<bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-sm-4">
        <div *ngIf="validBrokerSelected()"  class="row justify-content-center">
          <div #brokerPhoto class="broker-photo" [ngStyle]="{'background-image' : avatarUrl }" ></div>
        </div>
          <kendo-combobox #selectBroker
                          [data]="filteredBroker" [allowCustom]="false"
                          [filterable]="true"
                          [textField]="'Display'"
                          [valueField]="'Id'"
                          [placeholder]="'Select  a broker'"
                          [(ngModel)]="brokerSelected"
                          [ngModelOptions]="{standalone: true}"
                          (filterChange)="onFilterBroker($event)"
                          (valueChange)="onBrokerSelected($event)"
          >
          <ng-template kendoDropDownListItemTemplate let-dataItem>
            <img class="contact-image"  [src]="getContactImageUrl(dataItem.Id)" />
            <span>{{ dataItem.First +' ' + dataItem.Last}}</span>
          </ng-template>
          </kendo-combobox>
      </div>
    </div>
  </div>

  <app-broker-reward #brokerReward></app-broker-reward>
