<ion-header *ngIf="!messageSuccess" no-border>
  <ion-toolbar no-border>
    <!-- <ion-title *ngIf="!isAnswer && getPassActionMode !='REQUEST_INFO' && getPassActionMode !='DELEGATE'" color="dark">{{
      'replacementRoll, title' | translate}}</ion-title>
    <ion-title *ngIf="getPassActionMode =='REQUEST_INFO'" color="dark">{{ 'worklistMain, request' | translate}}
    </ion-title>
    <ion-title *ngIf="getPassActionMode =='DELEGATE'" color="dark">{{ 'worklistMain, delegate' | translate}}</ion-title> -->



  </ion-toolbar>
</ion-header>

<ion-content>
  <div *ngIf="!messageSuccess">

    <ion-list [hidden]="isAnswer==true">
      <ion-list-header>
        
        <ion-title class="boldTxtNav" *ngIf="!isAnswer && getPassActionMode !='REQUEST_INFO' && getPassActionMode !='DELEGATE'" color="dark">{{
          'replacementRoll, title' | translate}}</ion-title>
        <ion-title class="boldTxtNav" *ngIf="getPassActionMode =='REQUEST_INFO'" color="dark">{{ 'worklistMain, request' | translate}}
        </ion-title>
        <ion-title class="boldTxtNav" *ngIf="getPassActionMode =='DELEGATE'" color="dark">{{ 'worklistMain, delegate' | translate}}</ion-title>

      </ion-list-header>
      <!-- <ion-radio-group [(ngModel)]="searchBy" (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> -->



      <!-- <div style="padding: 5px;" *ngIf="!isFilter">

        <ion-grid>
          <ion-row style="height: 45px; border: 1px solid lightgray; border-radius: 50px;">
            <ion-col size='9'>
              <ion-input class='replacmentSearchBar' style="height: 35px;"
                 [(ngModel)]="inputSearch" [placeholder]='"replacementRoll, searchbyname" | translate' clearInput="true">
                <ion-icon style="width: 50px; height: 21px;" name="search"></ion-icon>
              </ion-input>
            </ion-col>
            <ion-col size='3'>
              <button  [disabled]='inputSearch == undefined || inputSearch.length < 1' (click)='onChangeInput()' style="--background: white;background: transparent;--background-hover: transparent !important; margin-top: 4px;">
                <ion-label><p style="color: #024d71;">{{"general, search" | translate}}</p></ion-label>
              </button>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>

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

      <div style="border: 1px solid lightgray; border-radius: 100px; width: 100%;">
        <ion-grid style="height: 54px; padding: 1px 1px 1px 1px;">
          <ion-row>
            <ion-col size="7">
              <div *ngIf="isFilter" style="height: 0px;">
                <ion-searchbar  [(ngModel)]="inputSearch" style="padding-top: 1px;" class="filterClass" mode='md' (ionInput)="filterList($event)" placeholder="Filter">
                </ion-searchbar>
              </div>
              <ion-input *ngIf="!isFilter" class='replacmentSearchBar' clearInput="true"
                 [(ngModel)]="inputSearch" [placeholder]='"replacementRoll, searchbyname" | translate'>
                <ion-icon style="width: 50px; height: 21px;" name="search"></ion-icon>
              </ion-input>
            </ion-col>
            <ion-col size="5" style="display: flex;">
              <div class="vl"></div>
              <ion-item lines="none" style="display: flex;">
                <ion-select style="min-width: 100%; height: 40px; padding-top: 5px;" [(ngModel)]="searchBy" (ionChange)="onChangeSelect($event)">
                  <ion-select-option value="1" ><p style="min-width: 100%; font-size: 11px; font-weight: bold;">{{'replacementRoll, workflow' | translate}}</p></ion-select-option>
                  <ion-select-option value="4" ><p style="min-width: 100%; font-size: 11px; font-weight: bold;">{{'replacementRoll, favorite' | translate}}</p></ion-select-option>
                  <ion-select-option value="2" ><p style="min-width: 100%; font-size: 11px; font-weight: bold;">{{'replacementRoll, employee-id' | translate}}</p></ion-select-option>
                  <ion-select-option value="3" ><p style="min-width: 100%; font-size: 11px; font-weight: bold;">{{'replacementRoll, employee-email' | translate}}</p></ion-select-option>
                  <ion-select-option value="5" ><p style="min-width: 100%; font-size: 11px; font-weight: bold;">{{'replacementRoll, employee-name' | translate}}</p></ion-select-option>
                </ion-select>
              </ion-item>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
      <ion-grid>
        <ion-row>
          <ion-col>
            <div style="text-align: end;" *ngIf='inputSearch && !userSelected && !isFilter'>
              <button ion-button clear class="searchText" (click)="onChangeInput()" type="button"  item-right >
                {{"general, search" | translate}}
              </button>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-list>

    <div class="square-selected" *ngIf="inputSearch"><div  class="profileImageDiv">
  <ion-label  class="employee-details sc-ion-label-ios-h sc-ion-label-ios-s ios hydrated"><span>{{inputSearch}}</span></ion-label>
  <div  class="star-fav" ><img  src="assets/imgs/close.svg" (click)="resetSelected()"></div></div></div>


    <div class="letterDiv" *ngIf="searchBy === '4' && !isFavoriteLetterActive && !userSelected">
      <!-- <ion-slides [options]="slideOptsOne">
        <ion-slide *ngFor="let filter of favLetter;  let i=index"> -->
          <div *ngFor="let filter of favLetter;  let i=index" class="letterDivLoop">
            <p (click)='selectedLetter(favLetter[i])'>{{filter}}</p>
          </div>
        <!-- </ion-slide>
    </ion-slides> -->
    </div>

    <div class="letterDiv" *ngIf="searchBy === '4' && isFavoriteLetterActive && !userSelected">
      <!-- <ion-slides [options]="slideOptsOne">
        <ion-slide *ngFor="let filter of favLetter;  let i=index"> -->
          <div [ngClass]="returnIsActiveFunction(i)? 'isFavLetterActive':'letterDivLoop'" *ngFor="let filter of favLetter;  let i=index">
            <p (click)='selectedLetter(favLetter[i])'>{{filter}}</p>
          </div>
        <!-- </ion-slide>
    </ion-slides> -->
    </div>

    <div class="noteInput" *ngIf="isAnswer==true">
      <ion-label class="boldTxtNav" padding>{{"replacementRoll, question" | translate}} :
        {{pQuestion}} ?</ion-label>
      <ion-label class="boldTxtNav" padding>{{"replacementRoll, answer" | translate}}
      </ion-label>

      <ion-item>
        <ion-textarea [(ngModel)]="userNote"></ion-textarea>
      </ion-item>
    </div>
    <!-- <div [hidden]="isAnswer==true"
      *ngIf="actionHistory.length >0 && !userSelected && ReplacementList.length==0 && searchBy === '1'"> -->
    <div [hidden]="isAnswer==true" *ngIf="actionHistory.length >0 && !userSelected && searchBy === '1'">
      <div class="uk-margin">
        {{'replacementRoll, related' | translate}}
      </div>

      <div class="square-container uk-padding">
        <div *ngFor="let employee of actionHistory;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 (click)="select(employee,i)">{{employee.NAME}}</span>

            </ion-label>
            <!-- <div *ngIf='!employee.IsFavorite' [ngClass]="direction == 'en' ? 'star-fav' : 'star-fav-left'"
              (click)="setFavorite(employee)">
              <img src="assets/imgs/fav.svg" />
            </div>
            <div *ngIf='employee.IsFavorite' [ngClass]="direction == 'en' ? 'star-fav' : 'star-fav-left'"
              (click)="setFavorite(employee)">
              <img src="assets/imgs/fav filled.svg" />
            </div> -->
          </div>
        </div>
      </div>
    </div>

    <br />
    <!-- <div [hidden]="isAnswer==true"
      *ngIf="favoriteUserList.length> 0 && !userSelected && ReplacementList.length ==0 && searchBy == '4'"> -->
    <div style="width: 90%; float: left;" [hidden]="isAnswer==true" *ngIf="favoriteUserList.length >0 && !userSelected && searchBy === '4'">
      <div class="uk-margin" style="margin: -21px 15px 0px 15px !important;">
        {{'replacementRoll, favorite' | translate}}
      </div>

      <div class="square-container uk-padding">
        <div *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 (click)="select(employee,i)">{{employee.EMPLOYEE_DISPLAY_NAME}}</span>

            </ion-label>
            <!-- <div *ngIf='!employee.IsFavorite' [ngClass]="direction == 'en' ? 'star-fav' : 'star-fav-left'"
              (click)="setFavorite(employee)">
              <img src="assets/imgs/fav.svg" />
            </div>
            <div *ngIf='employee.IsFavorite' [ngClass]="direction == 'en' ? 'star-fav' : 'star-fav-left'"
              (click)="setFavorite(employee)">
              <img src="assets/imgs/fav filled.svg" />
            </div> -->
          </div>
        </div>
      </div>
    </div>
    
    <div style="padding-top: 190px;" *ngIf="favLetter.length > 0 && searchBy == '4' && favoriteUserList.length === 0">
      <ion-label>
        <p style="text-align: center; text-align: center; font-size: 20px; padding: 0px 35px 20px 0px;">
          {{'general, fav-showData' | translate}}
        </p>
      </ion-label>
    </div>
    <div *ngIf="favoriteUserList.length === 0 && searchBy == '4' && favLetter.length ===0">
      <ion-label>
        <p style="text-align: center; font-size: 20px; padding: 0px 35px 20px 0px;">
          {{'general, fav-noData' | translate}}
        </p>
      </ion-label>
    </div>
    <div [hidden]="isAnswer==true" *ngIf="ReplacementList.length>0 && !userSelected && searchBy !== '1' && searchBy !== '4'" class="uk-margin">
      {{'replacementRoll, search-result' | translate}}
    </div>
    <br />

    <ion-item [hidden]="isAnswer==true" lines="none" *ngIf="ReplacementList.length>0 && !userSelected && searchBy !== '1' && searchBy !== '4'">


      <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" 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 *ngIf='!employee.IsFavorite' [ngClass]="direction == 'en' ? 'star-fav' : 'star-fav-left'"
              (click)="setFavorite(employee)">
              <img src="assets/imgs/fav.svg" />
            </div>
            <div *ngIf='employee.IsFavorite' [ngClass]="direction == 'en' ? 'star-fav' : 'star-fav-left'"
              (click)="setFavorite(employee)">
              <img src="assets/imgs/fav filled.svg" />
            </div> -->
          </div>


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


    </ion-item>



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

<ion-footer *ngIf="!messageSuccess">

  <div class="noteInput" *ngIf="isAnswer== false && userSelected ==true">

    <!-- <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; --border-radius: 10px; " ion-button
      (click)="submitAction()">
      {{'general, submit' | translate}}</ion-button>

    <ion-button *ngIf="isAnswer" class="footer-button"
      style="background: var(--newgreen)!important;border-radius: 10px;    --background: transparent; --border-radius: 10px; " ion-button
      (click)="submitAction()">
      {{'general, submit' | translate}}</ion-button>

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