<div class="container">
  <div class="row justify-content-center">
    <div class="col-sm-4 loans" *ngFor="let loan of Loans">
      <kendo-card [width]="'260px'">
        <kendo-card-header class="k-hbox">
          <kendo-avatar width="40px" height="40px" [shape]="'circle'" [icon]="'attachment'">  </kendo-avatar>
          <div>
            <h1 kendoCardTitle> {{ loan.Amount | currency }} </h1>
            <span *ngIf="loan.Status != 'none'" class="badge badge-success">{{loan .Status}}</span>
          </div>
        </kendo-card-header>
        <kendo-card-body>
        <b> Address: </b> <p> {{ loan.Item }} </p>
        </kendo-card-body>
        <kendo-card-actions>
          <comment-actions>
            <p *ngIf="goodDate(loan.Settlement) " ><b> Settlement </b> {{ loan.Settlement  | date }} </p>
          </comment-actions>
        </kendo-card-actions>
      </kendo-card>
    </div>
  </div>
</div>
