<div class="container" style="border-top-style: none; border-top-color: #ff0000; border-left: 10px groove #969696; padding: 10px; margin: 5px; background-color: #e9e9e9; box-shadow: inset 1 1 10 10;">
  <div class="row" style="padding-bottom: 10px;">
    <div class="col-md-4">
      <h5>Overview<div *ngIf="Loading" class="spinner-border text-success" role="status">
        <span class="sr-only">Loading...</span>
      </div></h5>
      <ul class="list-group">
        <li class="list-group-item d-flex justify-content-between align-items-center">
          {{Loan.Id}}
          <span class="badge badge-primary badge-pill">ID</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          {{Loan.Amount | currency}}
          <span class="badge badge-primary badge-pill">Amount</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          {{Loan.Settlement | date:"yyyy-MMM-dd"}}
          <span class="badge badge-primary badge-pill">Settlement</span>
        </li>
      </ul>
    </div>
    <div class="col-md-4">
      <h5>People <div *ngIf="Loading" class="spinner-border text-success" role="status">
        <span class="sr-only">P)_PLoading... Peopl</span>
      </div></h5>
      <ul class="list-group">
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <div *ngFor="let p of Loan.Client, let idx=index ">
            <div *ngIf="Loan.ClientIds.length >0" class="customer-photo" [ngStyle]="{'background-image' : photoURL(Loan.ClientIds[idx])}"></div>
            <div *ngIf="Loan.ClientIds.length >0" class="customer-name"> {{ p }}</div>
          </div>
          <span class="badge badge-primary badge-pill">Client</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <div *ngFor="let p of Loan.Broker, let idx=index ">
            <div *ngIf="Loan.BrokerIds.length >0" class="customer-photo" [ngStyle]="{'background-image' : photoURL(Loan.BrokerIds[idx])}"></div>
            <div *ngIf="Loan.BrokerIds.length >0" class="customer-name"> {{ p }}</div>
          </div>
          <span class="badge badge-primary badge-pill">BDM</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <div *ngFor="let p of Loan.OtherRewarder, let idx=index ">
            <div *ngIf="Loan.OtherRewarderIds.length > 0 " class="customer-photo" [ngStyle]="{'background-image' : photoURL(Loan.OtherRewarderIds[idx])}"></div>
            <div *ngIf="Loan.OtherRewarderIds.length > 0 " class="customer-name"> {{ p }}</div>
          </div>
          <span class="badge badge-primary badge-pill">Other</span>
        </li>
      </ul>
    </div>
    <div class="col-md-4">
      <h5 class="text-left">Remarks <div *ngIf="Loading" class="spinner-border text-success" role="status">
        <span class="sr-only">Loading...</span>
      </div></h5>
      <ul class="list-group">
        <li class="list-group-item d-flex justify-content-between align-items-center">
          {{Loan.Lender}}
          <span class="badge badge-primary badge-pill">Lender</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          {{Loan.LenderLoanNumber}}
          <span class="badge badge-primary badge-pill">#</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <button kendoButton (click)="gotoSteps()">Actions List</button>
          <button kendoButton (click)="editLoan()">Edit</button>
        </li>
      </ul>
    </div>
  </div>
</div>
