<ion-header>
  <ion-toolbar>
    <!-- <nav-buttons></nav-buttons> -->
    <ion-title>{{ 'worklistMain, delegate' | 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 lines="none">
      <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-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-list>
    <!-- <ion-list-header>
        <ion-label class="boldTxtNav">{{'replacementRoll, searchBy' | translate}}</ion-label>
      </ion-list-header>
      <ion-radio-group   [(ngModel)]="searchKeySelect">
    <ion-row class="top-radio-row">
      <ion-col class="center">
        <ion-radio mode="md" value="1" checked></ion-radio>
        <ion-label class="radio-label">{{'addAttach, name' | translate}}</ion-label>
      </ion-col>
      <ion-col>
        <ion-radio mode="md" value="2" ></ion-radio>
        <ion-label class="radio-label">{{'login, username' | translate}}</ion-label>
      </ion-col>
      <ion-col>
        <ion-radio mode="md" value="3" ></ion-radio>
        <ion-label class="radio-label">{{'general, email' | translate}}</ion-label>
      </ion-col>
      <ion-col>
        <ion-radio mode="md" value="4" ></ion-radio>
        <ion-label class="radio-label">{{'replacementRoll, favorite' | translate}}</ion-label>
      </ion-col>
    </ion-row>
  
    
    
      </ion-radio-group> -->
    <ion-list-header>
      <ion-label class="boldTxtNav">{{'replacementRoll, searchBy' | translate}}</ion-label>
    </ion-list-header>
    <ion-radio-group [(ngModel)]="searchKeySelect" (ionChange)="onChangeSelect($event)">
      <ion-row class="top-radio-row" style="display: flex;">
        <ion-item lines='none'>
          <ion-radio mode="md" value="1" checked></ion-radio>
          <ion-label class="radio-label">
            <p class="textSearchType">{{'replacementRoll, workflow' | translate}}</p>
          </ion-label>
        </ion-item>
        <ion-item lines='none'>
          <ion-radio mode="md" value="4"></ion-radio>
          <ion-label class="radio-label">
            <p class="textSearchType">{{'replacementRoll, favorite' | translate}}</p>
          </ion-label>
        </ion-item>
        <ion-item lines='none'>
          <ion-radio mode="md" value="2"></ion-radio>
          <ion-label class="radio-label">
            <p class="textSearchType">{{'replacementRoll, employee-id' | translate}}</p>
          </ion-label>
        </ion-item>
        <ion-item lines='none'>
          <ion-radio mode="md" value="3"></ion-radio>
          <ion-label class="radio-label">
            <p class="textSearchType">{{'replacementRoll, employee-email' | translate}}</p>
          </ion-label>
        </ion-item>
        <ion-item lines='none'>
          <ion-radio mode="md" value="5"></ion-radio>
          <ion-label class="radio-label">
            <p class="textSearchType">{{'replacementRoll, employee-name' | translate}}</p>
          </ion-label>
        </ion-item>
      </ion-row>
    </ion-radio-group>


    <ion-item lines="none" class="search-box" *ngIf='!isFilter && !userSelected'>

      <ion-input (ionInput)="onChangeInput()" [ngClass]="direction == 'ltr'? 'filterInput':'filterInput-ar'"
        [(ngModel)]="searchKey" [placeholder]='getPlaceHolder()' clearInput="true"></ion-input>

    </ion-item>

    <div *ngIf="isFilter && !userSelected">
      <ion-searchbar class="filterClass" mode='md' (ionInput)="filterList($event)" placeholder="Filter">
      </ion-searchbar>
    </div>


  </ion-list>

  <!-- <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> -->
  <div *ngIf="!userSelected">
    <div *ngIf="ReplacementList.length>0" class="uk-margin">
      {{'replacementRoll, search-result' | translate}}
    </div>
    <br />

    <!-- <ion-item lines="none"> -->


    <div class="square-container">
      <div *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 || employee.EMPLOYEE_IMAGE == ''" class="empImgeRep"
            src="../assets/imgs/profile.png">
          <ion-label class="employee-details">

            <span (click)="select(employee,i)">{{employee.EMPLOYEE_DISPLAY_NAME}}</span>
            <!-- <br>{{employee.USER_NAME}}<br>
              {{employee.EMAIL_ADDRESS}} -->
          </ion-label>
          <div [ngClass]="direction == 'ltr' ? 'star-fav' : 'star-fav-left'"  (click)="setFavorite(employee)">
            <img src="assets/imgs/fav.svg" />
          </div>
        </div>
        <!-- <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
      </ion-infinite-scroll> -->
      </div>
    </div>

    <!-- related list -->
    <div [hidden]="isAnswer==true"
      *ngIf="relatedList?.length> 0 && !userSelected && ReplacementList?.length ==0 && searchKeySelect == '1'">
      <div class="uk-margin">
        {{'replacementRoll, related' | translate}}
      </div>

      <div class="square-container uk-padding">
        <div (click)="select(employee,i)" *ngFor="let employee of relatedList;let i=index;" class="square">
          <div class="profileImageDiv">

            <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">
            <ion-label class="employee-details">

              <span>{{employee.Name}}</span>

            </ion-label>
            <div [ngClass]="direction == 'ltr' ? 'star-fav' : 'star-fav-left'">
              <img [src]="isfavEmp(employee)? 'assets/imgs/fav filled.svg':'assets/imgs/fav.svg' " />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- favorite list -->
  <div [hidden]="isAnswer==true"
    *ngIf="favoriteUserList.length> 0 && !userSelected && ReplacementList.length ==0 && searchKeySelect == '4'">
    <div class="uk-margin">
      {{'replacementRoll, favorite' | translate}}
    </div>

    <div class="square-container uk-padding">
      <div (click)="select(employee,i)" *ngFor="let employee of favoriteUserList;let i=index;" class="square">
        <div class="profileImageDiv">

          <img *ngIf="employee.EMPLOYEE_IMAGE" class="empImgeRep"
            [src]="'data:image/png;base64,'+employee.EMPLOYEE_IMAGE">
          <img *ngIf="employee.EMPLOYEE_IMAGE == null || employee.EMPLOYEE_IMAGE == ''" class="empImgeRep" src="../assets/imgs/profile.png">
          <ion-label class="employee-details">

            <span>{{employee.EMPLOYEE_DISPLAY_NAME}}</span>

          </ion-label>
          <div [ngClass]="direction == 'ltr' ? 'star-fav' : 'star-fav-left'">
            <img src="assets/imgs/fav filled.svg" />
          </div>
        </div>
      </div>
    </div>
  </div>

  <div *ngIf='messageSuccess' class="succssfullMSG">
    <ion-col size="12">
      <ion-icon class="succssfullIcon" name="checkmark"></ion-icon>
    </ion-col>
    <ion-col size="12">
      <div style="font-size: 30px !important"> Transaction Successful </div>
    </ion-col>
  </div>
</ion-content>

<ion-footer *ngIf="isAnswer== false && userSelected ==true">

  <div class="noteInput">

    <!-- <ion-label class="boldTxtNav" padding>{{"replacementRoll, enterNote" | translate}}
          </ion-label> -->
    <ion-item>
      <ion-textarea [(ngModel)]="userNote" [placeholder]="'replacementRoll, enterNote' | translate"></ion-textarea>
    </ion-item>
  </div>
  <br />
  <!-- <div class="centerDiv">
    <ion-button *ngIf="userSelected ==true" class="footer-button" style="background: var(--newgreen)!important;border-radius: 10px;    --background: transparent; " ion-button (click)="submitAction()">
      {{'general, submit' | translate}}</ion-button>

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



<ion-footer>
  <div class="centerDiv" *ngIf="userSelected ==true">
    <ion-button [disabled]="saveBtnDisabled()" (click)="closePage()" class="footer-button" color="customnavy">{{'general, save' | translate}}
    </ion-button>
  </div>
  <div class="centerDiv">
    <ion-button (click)="closeFunction()" class="footer-button" color="customnavy">{{'general, close' | translate}}
    </ion-button>
  </div>
</ion-footer>