  <kendo-grid
    [data]="brokerLoans | async"
    [height]="610"
    [loading]="brokerLoans.loading"
    class="fullheight_grid"
  >
    <kendo-grid-column field="Id"></kendo-grid-column>

    <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>
    </kendo-grid-column>



    <kendo-grid-column field="Item" Title="Loan Target"></kendo-grid-column>
    <kendo-grid-column field="Status">
      <ng-template kendoGridCellTemplate let-dataItem>
        <span *ngIf="dataItem.Status != 'none'" class="badge badge-success">{{dataItem.Status}}</span>
      </ng-template>

    </kendo-grid-column>

    <kendo-grid-column field="Amount">
      <ng-template kendoGridCellTemplate let-dataItem>
        <span [ngClass]="{'green text-bold': dataItem.Amount < 500000}">{{ dataItem.Amount | currency }}</span>
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="Settlement">
      <ng-template kendoGridCellTemplate let-dataItem >
        <div *ngIf="dataItem.Settlement != null" >
          {{  dataItem.Settlement | date: 'yyyy-MM-dd' }}
        </div>
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="broker" Title="Broker(s)">
      <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>
    </kendo-grid-column>

  </kendo-grid>
