  <kendo-grid
    [data]="gridView"
    [loading]="loading"
    [sortable]="true"
    [pageable]="pageable"
    [filterable]="true"
    [resizable]="true"
    [selectable]="selectTableSettings"

    kendoGridSelectBy="Id"
    [selectedKeys]="selected"

    (selectionChange)="onSelectionChange($event)"
    [pageSize]="state.take"
    [skip]="state.skip"
    [sort]="state.sort"
    [filter]="state.filter"
    (dataStateChange)="dataStateChange($event)"

    class="fullheight_grid"
  >
    <ng-template kendoGridToolbarTemplate [position]="'top'">
      <div class="payment-toolbar">
        <button *ngIf="showNonPaidOnly" (click)="onSelectionEmit()" class="k-button">Make Payment</button>
        <span *ngIf="!showNonPaidOnly"> Today: {{ today | date }}</span>
      </div>
    </ng-template>

    <kendo-grid-checkbox-column *ngIf="EnableSelectButton" width="50" ></kendo-grid-checkbox-column>
    <kendo-grid-column field="Id" width="100">
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <app-number-range-filter [filter]="filter" [fieldName]="'Id'"
                                 [options]="['eq']" [min]=1
        >
        </app-number-range-filter>
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="Amount" >
      <ng-template kendoGridCellTemplate let-dataItem>
        <span >{{ dataItem.Amount | currency }}</span>
      </ng-template>
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <app-number-range-filter [filter]="filter" [fieldName]="'Amount'"
                                 [options]="['gte', 'lte', 'eq']" [min]=0
        >
        </app-number-range-filter>
      </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="ToDisplay" title="Beneficiary" width="250">
      <ng-template kendoGridCellTemplate let-dataItem>
          <div class="customer-photo" [ngStyle]="{'background-image' : photoURL(dataItem.ToId)}"></div>
          <div class="customer-name"> {{  dataItem.ToDisplay }}</div>
      </ng-template>
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <app-string-filter [filter]="filter" [fieldName]="'ToDisplay'">
        </app-string-filter>
      </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="Description" title=" Description" >
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <app-string-filter [filter]="filter" [fieldName]="'Description'">
        </app-string-filter>
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="Item" title=" From Loan">
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <app-string-filter [filter]="filter" [fieldName]="'Item'">
        </app-string-filter>
      </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="Status" title="Loan Status">
      <ng-template kendoGridCellTemplate let-dataItem>
        <span *ngIf="dataItem.Status != 'none'" class="badge badge-success">{{dataItem.Status}}</span>
      </ng-template>
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <app-string-filter [filter]="filter" [fieldName]="'Status'">
        </app-string-filter>
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="Ts" title="Date Rewarded"  filter="date">
      <ng-template kendoGridCellTemplate let-dataItem >
        <div *ngIf="dataItem.Ts != null" >
          {{  dataItem.Ts | date: 'yyyy-MM-dd' }}
        </div>
      </ng-template>
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <app-date-filter [filter]="filter" [fieldName]="'Ts'" [start]=0 [end]="15"
                         [range]=1 >
        </app-date-filter>
      </ng-template>
    </kendo-grid-column>


    <kendo-grid-column field="Paid" title="Invoice" [sortable]="false" [filterable]="false" width="100">
      <ng-template kendoGridCellTemplate let-dataItem>
        <button *ngIf="dataItem.Paid" kendoButton [icon]="'attachment'"
                (click)="onGoDetail(dataItem)"> {{dataItem.PayOutId}} </button>

        <kendo-chip *ngIf="! dataItem.Paid"    [label]="'$'" (click)="onGoPayment(dataItem)" >
        </kendo-chip>

      </ng-template>
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <kendo-grid-boolean-filter-cell
          [column]="column"
          [filter]="filter">
        </kendo-grid-boolean-filter-cell>
      </ng-template>
    </kendo-grid-column>

  </kendo-grid>

