<ion-header>
  <ion-toolbar class="header-toolbar">
    <nav-buttons></nav-buttons>
    <ion-title color="light">{{ 'replacementRoll, title' | translate}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

  <ion-list [hidden]="isAnswer==true">
    <ion-item>
      <ion-label class="boldTxtNav">{{'replacementRoll, searchBy' | translate}}</ion-label>
      <ion-select okText='{{"general, ok" | translate }}' cancelText='{{"general, cancel" | translate }}'
        [(ngModel)]="searchBy">
        <ion-select-option value="1" selected="true">{{'addAttach, name' | translate}}</ion-select-option>
        <ion-select-option value="2">{{'login, username' | translate}}</ion-select-option>
        <ion-select-option value="3">{{'general, email' | translate}}</ion-select-option>
      </ion-select>
    </ion-item>
    
    <ion-item>
      <ion-input [(ngModel)]="inputSearch" placeholder='{{"general, search" | translate}}'></ion-input>
      
      <!-- <button ion-button icon-only (click)="getreplacmentemployee()" clear type="button" item-end>
        <ion-icon name="search"></ion-icon>
      </button> -->

      <ion-button style="width: 19%;" button-type="clear" (click)="getreplacmentemployee()" item-end>
          <ion-icon slot="icon-only" name="search"></ion-icon>
        </ion-button>

    </ion-item>

    <!-- <ion-item>
            <ion-label>
              {{selEmpName}}
            </ion-label>
          </ion-item> -->
    <!-- <div class="centerDiv">
          <button ion-button  (click)="closePage()">{{'general.save' | translate}}</button>
        </div> -->
  </ion-list>

  <div>
    <ion-label [hidden]="isAnswer==false" class="boldTxtNav" padding>{{"replacementRoll, question" | translate}} :
      {{pQuestion}} ?</ion-label>
    <ion-label [hidden]="isAnswer==false" class="boldTxtNav" padding>{{"replacementRoll, answer" | translate}}
    </ion-label>
    <ion-label [hidden]="isAnswer==true" class="boldTxtNav" padding>{{"replacementRoll, enterNote" | translate}}
    </ion-label>
    <ion-item>
      <ion-textarea [(ngModel)]="userNote"></ion-textarea>
    </ion-item>
  </div>

  <ion-item [hidden]="isAnswer==true">
    <!-- <ion-list  *ngIf="ReplacementList"> -->
    <ion-list *ngIf="ReplacementList">
      <ion-radio-group mode="md" [(ngModel)]="selEmp">
        <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-infinite-scroll (ionInfinite)="doInfinite($event)">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-item>

</ion-content>

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