<ion-header>
  <ion-toolbar class="header-toolbar">
    <ion-buttons slot="start">
      <ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
    </ion-buttons>
    <ion-title color="light">{{headerTitle}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

  <ion-list>
    <ion-item>
      <ion-label>{{"general, search" | translate}} </ion-label>
      <ion-select okText='{{"general, ok" | translate }}' cancelText='{{"general, cancel" | translate }}'
        [(ngModel)]="searchKeySelect">
        <ion-select-option value="1" selected="true">{{'searchForReplacment, name' | translate}}</ion-select-option>
        <ion-select-option value="2">{{'searchForReplacment, userName' | translate}}</ion-select-option>
        <ion-select-option value="3">{{'searchForReplacment, email' | translate}}</ion-select-option>
      </ion-select>
    </ion-item>
    <ion-item>
      <ion-input [(ngModel)]="searchKey" placeholder='{{"general, enter" | translate}}'></ion-input>
    </ion-item>
  </ion-list>
  <ion-list no-lines *ngIf="specialistEmpList && specialistEmpList.length>0">
    <ion-item no-border *ngFor="let subordinate of specialistEmpList;let i=index" (click)="getSpecialistInfo(i);">
      <ion-avatar slot="start">
        <img
          [src]="subordinate.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+subordinate.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'">
      </ion-avatar>
      <p class="boldTxt">{{subordinate.EMPLOYEE_NAME}}</p>
      <p>{{subordinate.POSITION_NAME}}</p>
      <!-- <ion-badge item-end>{{subordinate.NUM_OF_SUBORDINATES}}</ion-badge>-->
    </ion-item>
  </ion-list>
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>

<ion-footer>
  <div class="centerDiv">
    <ion-button class="footer-button" color="customnavy" ion-button (click)="getEmployeeProfile()">
      {{ 'general, search' | translate }}</ion-button>
  </div>
</ion-footer>