  <!-- <ion-header>
      <ion-toolbar class="header-toolbar">
        <div slot="start">
        <nav-buttons></nav-buttons>
        <ion-title  color="light">{{headerTitle}}</ion-title>
      </div>
    
        <ion-buttons slot="end">
          <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-header>
    <ion-toolbar  class="header-toolbar">
        <ion-buttons slot="start">
            <nav-buttons backLink="/home" *ngIf="!isSearch"></nav-buttons>
            <ion-icon class="search-icons" color="light" name="arrow-back" *ngIf="isSearch" (click)="dismiss()"></ion-icon>
          </ion-buttons>
          <ion-title color="light" >{{headerTitle}}</ion-title>
            <ion-buttons slot="end">
                <button ion-button icon-only class="btnBack" *ngIf="!isSearch" (click)="goToSubordinate();">
                  <ion-icon class="search-icons" color="light" name="search"></ion-icon>
                </button>
              </ion-buttons>
         
  </ion-toolbar>

  </ion-header>
  <ion-content padding>
      <ion-list *ngIf="isSearch">
          <ion-item>
            <ion-label>{{ts.trPK('general','search')}} </ion-label>
            <ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
              [(ngModel)]="searchKeySelect">
              <ion-select-option value="1" selected="true" selected>{{ts.trPK('searchForReplacment','name')}}</ion-select-option>
              <ion-select-option value="2">{{ts.trPK('searchForReplacment','userName')}} </ion-select-option>
              <ion-select-option value="3">{{ts.trPK('searchForReplacment','email')}} </ion-select-option>
            </ion-select>
          </ion-item>
          <ion-item>
            <ion-input [(ngModel)]="searchKey" placeholder="{{ts.trPK('general','enter')}}"></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 slot="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 slot="end" class="badge">{{subordinate.NUM_OF_SUBORDINATES}}</ion-badge>
      </ion-item>
    </ion-list>
  <!-- </div> -->

  <!-- <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll> -->

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>


  </ion-content>
  <ion-footer *ngIf="isSearch">
      <div class="centerDiv">
        <ion-button color="customnavy"  (click)="getEmpSubordinate()">{{ts.trPK('general','search')}} </ion-button>
      </div>
    </ion-footer>