<kendo-grid [data]="gridData | async " [scrollable]="'none'">
  <kendo-grid-column field="Rank" title="ID" width="40">
  </kendo-grid-column>
  <kendo-grid-column field="Amount" title="Amount ($)" width="130">
    <ng-template kendoGridCellTemplate let-dataItem>
      <span [ngClass]="{'green text-bold': dataItem.Amount > 50000000}">{{ dataItem.Amount | currency }}</span>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="Item" title="Loan Property Description">
  </kendo-grid-column>
  <kendo-grid-column field="Settlement" title="Settlement &nbsp; ↓" width="120">
    <ng-template kendoGridCellTemplate let-dataItem>
      {{dataItem.Settlement | date: 'yyyy-MM-dd'}}
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="Rating" title="Rating" width="110" [resizable]="false" filter="numeric">
    <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="Balance" title="Balance($)" width="130">
    <ng-template kendoGridCellTemplate let-dataItem>
      <span [ngClass]="{'green text-bold': dataItem.Balance < 500000}">{{ dataItem.Balance | currency }}</span>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="OffsetBalance" title="Offset Balance" width="130">
    <ng-template kendoGridCellTemplate let-dataItem>
      <span [ngClass]="{'red text-bold': dataItem.Percentage > 60}">
        {{ dataItem.OffsetBalance | currency }}
      </span>
    </ng-template>
  </kendo-grid-column>

  <kendo-grid-column
    field="OffsetBalance"
    title="Offset Percentage"
    [width]="230"
    [resizable]="false"
    filter="numeric"
  >
    <ng-template kendoGridCellTemplate let-dataItem>
      <kendo-sparkline type="bar"
                       [data]="dataItem.Percentage"
                       [tooltip]="{visible: false}"
                       [transitions]="true"
                       [seriesDefaults]="{labels: {background: 'none', visible: true, format: '{0}%'}}"
      >
        <kendo-chart-area opacity="0" [width]="200"></kendo-chart-area>
        <kendo-chart-value-axis>
          <kendo-chart-value-axis-item [min]="0" [max]="130">
          </kendo-chart-value-axis-item>
        </kendo-chart-value-axis>
      </kendo-sparkline>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>
