<div class="box">

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

    [pageSize]="state.take"
    [skip]="state.skip"
    [sort]="state.sort"
    [filter]="state.filter"
    (dataStateChange)="dataStateChange($event)"
  >
    <kendo-grid-column field="Id" width="100">
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <kendo-grid-string-filter-cell
          [showOperators]="false"
          [operator]="'eq'"
          [column]="column"
          [filter]="filter">
        </kendo-grid-string-filter-cell>
      </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">
        <kendo-grid-numeric-filter-cell
          [showOperators]="false"
          [operator]="'gte'"
          [column]="column"
          [filter]="filter">
        </kendo-grid-numeric-filter-cell>
      </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.To)}"></div>
          <div class="customer-name"> {{  dataItem.ToDisplay }}</div>
      </ng-template>
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <kendo-grid-string-filter-cell
          [showOperators]="false"
          [column]="column"
          [filter]="filter">
        </kendo-grid-string-filter-cell>
      </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="Description" title=" Description" >
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <kendo-grid-string-filter-cell
          [showOperators]="false"
          [column]="column"
          [filter]="filter">
        </kendo-grid-string-filter-cell>
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="Item" title=" From Loan">
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <kendo-grid-string-filter-cell
          [showOperators]="false"
          [column]="column"
          [filter]="filter">
        </kendo-grid-string-filter-cell>
      </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">
        <kendo-grid-string-filter-cell
          [showOperators]="false"
          [column]="column"
          [filter]="filter">
        </kendo-grid-string-filter-cell>
      </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">
        <kendo-grid-date-filter-cell
          [showOperators]="false"
          [column]="column"
          [filter]="filter">
        </kendo-grid-date-filter-cell>
      </ng-template>
    </kendo-grid-column>


    <kendo-grid-column field="Paid" title="Paid">
      <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>

</div>
