<ion-header>
  <ion-toolbar>
    <!-- <nav-buttons></nav-buttons> -->
    <ion-title color="dark">{{ 'vacation-rule, search-employee' | translate}}</ion-title>
    <!-- <ion-buttons slot="primary">
      <ion-button style="background: none !important;" (click)="closePage()">
        <ion-icon slot="icon-only" name="close"></ion-icon>
      </ion-button>
    </ion-buttons> -->
  </ion-toolbar>
</ion-header>

<ion-content >
  <!-- <div style="padding: 0 10px;" [innerHTML]='"vacation-rule, replacement-employee-tip" | translate'></div> -->

  <ion-item>
    <ion-label class="boldTxtNav">{{'vacation-rule, search-by' | translate}}</ion-label>
    <ion-select okText='{{"general, ok" | translate }}' cancelText='{{"general, cancel" | translate }}'
      [(ngModel)]="searchKeySelect">
      <ion-select-option value="1" selected="true">{{'vacation-rule, search-by-name' | translate}}</ion-select-option>
      <ion-select-option value="2">{{'vacation-rule, search-by-username' | translate}}</ion-select-option>
      <ion-select-option value="3">{{'vacation-rule, search-by-email' | translate}}</ion-select-option>
    </ion-select>
  </ion-item>

  <ion-item lines="none">
    <ion-button class="filterBtn" button-type="clear"  button-type="clear" (click)="SearchReplacementList()">
      <ion-icon slot="icon-only" color="white" name="search"></ion-icon>
    </ion-button>
    <ion-input class="filterInput" [(ngModel)]="searchKey" placeholder="{{'vacation-rule, search-employee' | translate}}"></ion-input>

  </ion-item>

  

  <!-- <ion-item>
    <ion-list [(ngModel)]="selEmp" *ngIf="ReplacementList">
      <ion-item *ngFor="let employee of ReplacementList;let i=index;">
        <ion-label><span class="boldTxt">{{employee.EMPLOYEE_DISPLAY_NAME}}</span> <br>{{employee.USER_NAME}}<br>
          {{employee.EMAIL_ADDRESS}}</ion-label>
        <ion-radio value="{{i}}"></ion-radio>
      </ion-item>
    </ion-list>
  </ion-item> -->

  <!-- <ion-list>
    <ion-radio-group mode="md" [(ngModel)]="selEmp" *ngIf="ReplacementList">
      <ion-item *ngFor="let employee of ReplacementList;let i=index;">
        <ion-label><span class="boldTxt">{{employee.EMPLOYEE_DISPLAY_NAME}}</span> <br>{{employee.USER_NAME}}<br>
          {{employee.EMAIL_ADDRESS}}</ion-label>
        <ion-radio value="{{i}}"></ion-radio>
      </ion-item>
    </ion-radio-group>
  </ion-list> -->

<ion-item>
  <div  *ngIf="ReplacementList" class="square-container">
      <div (click)="select(employee,i)"  *ngFor="let employee of ReplacementList;let i=index;" class="square">
         <div class="profileImageDiv"> 
            <!-- <img class="profileImage" src="../assets/imgs/profile.png"> -->
 
            <img *ngIf="employee.EMPLOYEE_IMAGE" class="empImgeRep" [src]="'data:image/png;base64,'+employee.EMPLOYEE_IMAGE">
            <img *ngIf="employee.EMPLOYEE_IMAGE == null" class="empImgeRep" src="../assets/imgs/profile.png">    
         </div>
 
            
 
       <div *ngIf="active == i" class="selIEmpDiv">
          <img class="selIEmpImage" src="../assets/imgs/green.png">
       </div>
 
        <div  [ngClass]="{'activated': (active == i),'deactivated': (active != i)}"
         class="content">
         <ion-label class="labelRep">
 
          <span style="font-weight: bold !important">{{employee.EMPLOYEE_DISPLAY_NAME}}</span>
           <br>{{employee.USER_NAME}}<br>
          {{employee.EMAIL_ADDRESS}}
         </ion-label>
        </div>
      </div>
 
     </div>
    </ion-item>
    <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 (click)="closePage()" class="footer-button" color="customnavy">{{'general, save' | translate}}
    </ion-button>
  </div> -->



  <div class="centerDiv">
      <ion-button class="footer-button" style="background: var(--newgreen)!important;border-radius: 10px;    --background: transparent; " ion-button (click)="closePage()">
        {{'general, save' | translate}}</ion-button>
  
        <ion-button class="footer-button" style="background: var(--darkblue)!important;border-radius: 10px;    --background: transparent; " ion-button (click)="closeModal()">
        {{'general, cancel' | translate}}</ion-button>
    </div>
</ion-footer>