<ion-header>
  <ion-toolbar class="header-toolbar">
    <ion-title color="light">{{headerTitle}}</ion-title>
    <ion-buttons slot="primary">
      <ion-button style="background: none !important;" *ngIf="!isSearch" (click)="goToSubordinate()">
        <ion-icon slot="icon-only" name="search"></ion-icon>
      </ion-button>
    </ion-buttons>

  </ion-toolbar>
</ion-header>

<ion-content padding>

  <ion-list *ngIf="isSearch">
    <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>
  <div>
    <ion-list no-lines *ngIf="empSubordinate && empSubordinate.length>0">
      <ion-item no-border *ngFor="let subordinate of empSubordinate;let i=index" (click)="getDetails(i);">
        <ion-avatar item-start>
          <!-- <img *ngIf="subordinate.EMPLOYEE_IMAGE" src="data:image/*;base64,{{ subordinate.EMPLOYEE_IMAGE}}"> -->
          <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>
  </div>
</ion-content>

<ion-footer *ngIf="isSearch">

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

</ion-footer>