
<bkp-divider>
  <kendo-icon [name]="'user'" >  </kendo-icon>Loan Id: {{Loan.Id}}
</bkp-divider>

<form #form="ngForm">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <h5 class="title">Select Clients</h5>
        <kendo-multiselect name="client" [data]="AllPeople" [textField]="'Display'"
                           [valueField]="'Id'" [(ngModel)]="this.Loan.Client" [virtual]="virtual" required="true"
                           (close)="rebuildPeopleMap($event)">
          <ng-template kendoMultiSelectItemTemplate let-dataItem>
            <img class="contact-image"  [src]="getContactImageUrl(dataItem.Id)" />
            <span>{{ dataItem.Display}}</span>
          </ng-template>
        </kendo-multiselect>

        <div class="container">
          <div class="row clientCardContainer justify-content-center">
            <div *ngFor="let v of this.Loan.Client" class="col-sm-9">
              <app-people-card [PeopleId]="v.Id"></app-people-card>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <h5 class="title">Assign Brokers</h5>
        <kendo-multiselect name="brokers" [data]="AllBrokers" [textField]="'Display'"
                           [valueField]="'Id'" [(ngModel)]="this.Loan.Broker" [virtual]="virtual"
                           (close)="rebuildPeopleMap($event)"
                           required="true"
        >
          <ng-template kendoMultiSelectItemTemplate let-dataItem>
            <img class="contact-image"  [src]="getContactImageUrl(dataItem.Id)" />
            <span>{{ dataItem.First +' ' + dataItem.Last}}</span>
          </ng-template>
        </kendo-multiselect>
        <div class="container">
          <div class="row brokerCardContainer justify-content-center">
            <div *ngFor="let v of this.Loan.Broker" class="col-sm-9">
              <app-people-card [PeopleId]="v.Id"></app-people-card>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>



  <h5 class="title">Other Related</h5>
    <kendo-multiselect name="beneficiaries" [data]="AllPeople" [textField]="'Display'"
                       [valueField]="'Id'" [(ngModel)]="this.Loan.OtherRewarder" [virtual]="virtual"
                       (close)="rebuildPeopleMap($event)">
      <ng-template kendoMultiSelectItemTemplate let-dataItem>
        <img class="contact-image"  [src]="getContactImageUrl(dataItem.Id)" />
        <span>{{ dataItem.First +' ' + dataItem.Last}}</span>
      </ng-template>
    </kendo-multiselect>
  <div class="container">
    <div class="row beneficiaryCardContainer justify-content-center">
      <div *ngFor="let v of this.Loan.OtherRewarder, let idx=index" class="col-sm-4">
        <app-people-card [PeopleId]="v.Id"></app-people-card>
        <kendo-combobox [name]="'beneficiary_'+idx" [data]="roles" [allowCustom]="true" [(ngModel)]="role[v.Id]"
                        class="beneficiaryRole" required="true"> </kendo-combobox>
      </div>
    </div>
  </div>`
  <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
</form>


<div class="k-form-buttons k-buttons-end">
  <div>
    <button class="k-button k-primary" (click)="prev()" > ◀ Prev</button>
    <button kendoButton look="flat"  [disabled]="true">&nbsp;</button>
    <button kendoButton class="k-button k-primary" (click)="next()" icon="save"> (Save and) Next ▶  </button>

  </div>
</div>




