<kendo-grid  [data]="data" (cellClick)="onCellClick($event)" [selectable]="true">
  <ng-template kendoGridToolbarTemplate>
    {{ AgencyName }} - <span> {{InvoiceDate | date:'longDate'}} </span>
  </ng-template>

  <kendo-grid-column *ngIf="IncomeType=='trail'" field="Period" title="Period" format='{0:yyyy MMMM}' width="150"> </kendo-grid-column>
  <kendo-grid-column *ngIf="IncomeType=='trail'"  field="IncomeAmount"  width="150" format='{0:c}' > </kendo-grid-column>
  <kendo-grid-column field="LoanNumber" width="150"> </kendo-grid-column>
  <kendo-grid-column field="Customer" width="150"> </kendo-grid-column>
  <kendo-grid-column field="PrimaryIntroducer"  width="150" > </kendo-grid-column>
  <kendo-grid-column field="NextGenNumber"  width="100" > </kendo-grid-column>
  <kendo-grid-column field="Settlement"  width="150" format='{0:MM/dd/yyyy}'>
    <ng-template kendoGridCellTemplate let-dataItem>
      <div *ngIf="dataItem.Settlement != null && dataItem.Settlement >= Epoc" >
        {{  dataItem.Settlement | date: 'yyyy-MM-dd' }}
      </div>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="Balance"  width="150" format='{0:c}' > </kendo-grid-column>

  <kendo-grid-column *ngIf="IncomeType=='trail'" field="SettlementAmount" format='{0:c}' width="150"> </kendo-grid-column>
  <kendo-grid-column *ngIf="IncomeType=='trail'" field="TrailerMargin"  width="150"> </kendo-grid-column>

  <kendo-grid-column *ngIf="IncomeType=='upfront'"  field="UpfrontRate"  width="150" > </kendo-grid-column>


  <kendo-grid-column field="NetAmount"  width="150" format='{0:c}' > </kendo-grid-column>
  <kendo-grid-column field="GST"  width="150" format='{0:c}' > </kendo-grid-column>
  <kendo-grid-column field="GrossAmount"  width="150" format='{0:c}' > </kendo-grid-column>

  <kendo-grid-column field="matchedPayIn" title="Matched"  width="200" format='{0:c}'>
    <ng-template kendoGridCellTemplate let-dataItem>
      <kendo-icon *ngIf="dataItem.matchedPayIn === -1" [name]="'close-circle'" [size]="'small'" [themeColor]="'warning'"></kendo-icon>
      <kendo-icon *ngIf="dataItem.matchedPayIn !== -1" [name]="'tick'" [size]="'small'" [themeColor]="'success'"></kendo-icon>
      {{ dataItem.matchedPayIn === -1? 'Not matched': dataItem.matchedPayIn.Id}}
    </ng-template>
  </kendo-grid-column>

</kendo-grid>
