<kendo-grid
  [data]="view | async"
  [loading]="view.loading"
  [pageSize]="pageSize"
  [skip]="skip"
  [sortable]="true"
  [sort]="sort"
  [filter]="filter"
  [pageable]="true"
  [height]="1000"
  [navigable]="true"
  [filterable]="true"
  [selectable]="selectableSettings"
  kendoGridSelectBy="Id"
  [selectedKeys]="gridSelection"
  (selectionChange)="onSelectionChange($event)"
  (dataStateChange)="dataStateChange($event)"
  (filterChange)="filterChange($event)"
  (cellClick)="onCellClick($event)"
  class="fullheight_grid"
>
  <ng-template *ngIf="EnableExportExcel || EnableExportPdf || EnableSelectButton" kendoGridToolbarTemplate>
    <button *ngIf="EnableExportExcel" kendoGridExcelCommand type="button" icon="file-excel" style="float:right;">Export to Excel</button>
    <button *ngIf="EnableExportPdf" kendoGridPDFCommand icon="file-pdf" style="float:right;">Export to PDF</button>
    <div class="selected-loans" #notification>
      <app-loan-card *ngFor="let l of SelectedLoans" [Loan]="l" [ShowCloseButton]="true"
                     (Closed)="RemoveFromSelection(l)"
                     @fadeIn @slideOutUp
      ></app-loan-card>
    </div>
    <div class="selection-percentage" *ngIf="SelectedLoans.length >0">
      <span class="badge badge-info">{{SelectedLoans.length}}</span>/
      <span class="badge badge-info">{{MaxSelect}}</span>
    </div>
    <button *ngIf="EnableSelectButton"  kendoButton [primary]=true
            class="select-loan" icon="close-circle" style="float:right;"
            (click)="onFinishSelection()"
    >
      Finish Selection</button>

  </ng-template>

  <kendo-grid-checkbox-column *ngIf="EnableSelectButton" width="50" ></kendo-grid-checkbox-column>


  <kendo-grid-column field="Id" title="#" width="50" [class]="'topAlign'"  [sortable]="false" [filterable]="false">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" >
      <p title="{{dataItem.Id}}" > {{dataItem.Index}}</p>
    </ng-template>
  </kendo-grid-column>

  <kendo-grid-column-group title="People" [columnMenu]="false" [headerClass]="'colGroupPeople'">
      <kendo-grid-column field="Client" width="220" title="Client(s)" [class]="'topAlign'" [headerClass]="'colClient'">
        <ng-template kendoGridCellTemplate let-dataItem>
            <div *ngFor="let p of dataItem.Client, let idx=index ">
              <div class="customer-photo" [ngStyle]="{'background-image' : photoURL(dataItem.ClientIds[idx])}"></div>
              <div class="customer-name"> {{ p }}</div>
            </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="Broker" width="220" title="Broker (s)" [class]="'topAlign'" [headerClass]="'colBroker'">
        <ng-template kendoGridCellTemplate let-dataItem>
          <div *ngFor="let p of dataItem.Broker, let idx=index ">
            <div class="customer-photo" [ngStyle]="{'background-image' : photoURL(dataItem.BrokerIds[idx])}"></div>
            <div class="customer-name"> {{ p }}</div>
          </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="OtherRewarder" width="220" title="Beneficiary(ies)" [class]="'topAlign'" [headerClass]="'colOtherRewarder'">
        <ng-template kendoGridCellTemplate let-dataItem>
          <div *ngFor="let p of dataItem.OtherRewarder, let idx=index ">
            <div class="customer-photo" [ngStyle]="{'background-image' : photoURL(dataItem.OtherRewarderIds[idx])}"></div>
            <div class="customer-name"> {{ p }}</div>
          </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-group>

  <kendo-grid-column-group title="Loan Details" [columnMenu]="false" [headerClass]="'colGroupLoanDetails'">
    <kendo-grid-column field="Rating" title="Rating" width="150" [resizable]="false" [filterable]="false" [headerClass]="'colRating'" [class]="'topAlign colRating'">
      <ng-template kendoGridCellTemplate let-dataItem>
        <app-biukop-rating
          [value]="dataItem.Rating"
          [max]="5"
        ></app-biukop-rating>
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="Item" [sortable]="true" [class]="'topAlign'"  width="300">
      <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="Status" [width]="180" [headerClass]="'colStatus'"  [class]="'alignStatus colStatus'" [resizable]="false"  >
      <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="Settlement" title="Settlement" [class]="'topAlign'" width="300" filterable="false" filter="date">
      <ng-template kendoGridCellTemplate let-dataItem >
        <div *ngIf="dataItem.Settlement != null" >
          {{  dataItem.Settlement | 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-group>

  <kendo-grid-column-group title="Lender Details" [columnMenu]="false" [headerClass]="'colGroupLenderDetails'">
    <kendo-grid-column field="Amount" title="Amount($) " [sortable]="true" width="200" [headerClass]="'colAmount'" [class]="'topAlign colAmount'" filter="numeric">
      <ng-template kendoGridCellTemplate let-dataItem>
        <span [ngClass]="{'green text-bold': dataItem.Amount < 500000}">{{ dataItem.Amount | currency }}</span>
      </ng-template>
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <kendo-grid-numeric-filter-cell
          [showOperators]="false"
          [column]="column"
          [filter]="filter">
        </kendo-grid-numeric-filter-cell>
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="Balance" title="Balance($)" width="200" [class]="'topAlign'" filter="numeric">
      <ng-template kendoGridCellTemplate let-dataItem>
        <span *ngIf="dataItem.Balance > 0" [ngClass]="{'green text-bold': dataItem.Balance < 500000}">{{ dataItem.Balance | currency }}</span>
      </ng-template>
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <kendo-grid-numeric-filter-cell
          [showOperators]="false"
          [column]="column"
          [filter]="filter">
        </kendo-grid-numeric-filter-cell>
      </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="OffsetBalance" title="Offset Balance($)" width="200" [class]="'topAlign'" filter="numeric">
      <ng-template kendoGridCellTemplate let-dataItem>
      <span *ngIf="dataItem.OffsetBalance > 0" [ngClass]="{'red text-bold': dataItem.Percentage > 60}">
        {{ dataItem.OffsetBalance | currency }}
      </span>
      </ng-template>
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <kendo-grid-numeric-filter-cell
          [showOperators]="false"
          [column]="column"
          [filter]="filter">
        </kendo-grid-numeric-filter-cell>
      </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="IncomeTotal" title="Income Trail($) " width="200" [headerClass]="'colTrail'"  [class]="'topAlign colTrail'" filter="numeric">
      <ng-template kendoGridCellTemplate let-dataItem>
        <span *ngIf="dataItem.IncomeTotal > 0" [ngClass]="{'green text-bold': dataItem.IncomeTotal < 500000}">{{ dataItem.IncomeTotal | currency }}</span>
      </ng-template>
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <kendo-grid-numeric-filter-cell
          [showOperators]="false"
          [column]="column"
          [filter]="filter">
        </kendo-grid-numeric-filter-cell>
      </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="NumOfTrail" title="#Trail" width="100" [class]="'topAlign'" [filterable]="false">
    </kendo-grid-column>
    <kendo-grid-column field="LastPayInDate" title="Recent Trail" width="300" [sortable]="true" [class]="'topAlign'" [filterable]="false">
      <ng-template kendoGridCellTemplate let-dataItem >
        <div *ngIf="dataItem.LastPayInDate != null" >
          {{  dataItem.LastPayInDate | date: 'yyyy-MM-dd' }}
        </div>
      </ng-template>
    </kendo-grid-column>
  </kendo-grid-column-group>

  <kendo-grid-column-group title="Income Distribution" [columnMenu]="false" [headerClass]="'colIncomeDistribution colPayOut'">

    <kendo-grid-column field="PayOut" title="Paid ($)" width="140" [class]="'topAlign colPayOut'" [headerClass]="'colPayOut'" [filterable]="false">
      <ng-template kendoGridCellTemplate let-dataItem>
      <span [ngClass]="{'red text-bold': dataItem.PayOut > dataItem.Trail}">
        {{ dataItem.PayOut | currency }}
      </span>
      </ng-template>
    </kendo-grid-column>
  </kendo-grid-column-group>

<!--  <ng-template kendoGridDetailTemplate let-dataItem let-rowIndex="rowIndex" [kendoGridDetailTemplateShowIf]="allowEdit.bind(this)">-->
<!--    <category-details [category]="dataItem"></category-details>-->
<!--    <app-loan-detail [dataItem]="dataItem"> </app-loan-detail>-->
<!--  </ng-template>-->

  <kendo-grid-pdf fileName="Transaction.pdf" [allPages]="true" [repeatHeaders]="true"></kendo-grid-pdf>
  <kendo-grid-excel fileName="Transaction.xlsx" [fetchData]="allData">
    <kendo-excelexport-column field="Index" title="Index">

    </kendo-excelexport-column>
    <kendo-excelexport-column field="ClientNames" title="Client">
    </kendo-excelexport-column>
    <kendo-excelexport-column field="BrokerNames" title="Broker">
    </kendo-excelexport-column>
    <kendo-excelexport-column field="OtherRewarderNames" title="Beneficiary">
    </kendo-excelexport-column>
    <kendo-excelexport-column field="Amount" title="Amount">
    </kendo-excelexport-column>
    <kendo-excelexport-column field="Status" title="Status">
    </kendo-excelexport-column>
    <kendo-excelexport-column field="Rating" title="Rating">
    </kendo-excelexport-column>
    <kendo-excelexport-column field="Settlement" title="Settlement">
    </kendo-excelexport-column>
    <kendo-excelexport-column field="Lender" title="Lender">
    </kendo-excelexport-column>
    <kendo-excelexport-column field="LenderLoanNumber" title="Lender's Loan ID">
    </kendo-excelexport-column>
    <kendo-excelexport-column field="NumOfTrail" title="Number of Trails">
    </kendo-excelexport-column>
    <kendo-excelexport-column field="Trail" title="Total Trails Received">
    </kendo-excelexport-column>
    <kendo-excelexport-column field="PayOut" title="Paid to Beneficiary">
    </kendo-excelexport-column>
    <kendo-excelexport-column field="Balance" title="Balance">
    </kendo-excelexport-column>
    <kendo-excelexport-column field="OffsetBalance" title="Offset Balance">
    </kendo-excelexport-column>
    <kendo-excelexport-column field="Item" title="Loan Target">
    </kendo-excelexport-column>
  </kendo-grid-excel>

</kendo-grid>
