<ion-header>
  <ion-toolbar class="header-toolbar">
    <!-- <nav-buttons></nav-buttons> -->
    <ion-title color="light">{{ '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 padding>
  <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>
    <ion-input [(ngModel)]="searchKey" placeholder="{{'vacation-rule, search-employee' | translate}}"></ion-input>
    <ion-button style="width: 19%;" button-type="clear" (click)="SearchReplacementList()">
      <ion-icon slot="icon-only" name="search"></ion-icon>
    </ion-button>
  </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-content>

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