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

<ion-content >

  <ion-list syle="margin-bottom:2px !important" [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 lines="none">
        <ion-button class="filterBtn" button-type="clear" (click)="getreplacmentemployee()" item-end>
            <ion-icon slot="icon-only" color="white" name="search"></ion-icon>
          </ion-button>
  
      <ion-input class="filterInput" [(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-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 class="noteInput">
    <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-grid fixed>
        <ion-row justify-content-end>
        <ion-col [ngClass]="{'activated': (active == i),'deactivated': (active != i)}" (click)="select(employee,i)"  
        *ngFor="let employee of demoeAttach;let i=index;" 
        size-xs="6" size-sm="6" size-md="6" size-lg="6" align-self-stretch>
            <div class="profileImageDiv"> <img class="profileImage" src="../assets/imgs/profile.png"></div>
            <div *ngIf="active == i" class="selIEmpDiv"> <img class="selIEmpImage" src="../assets/imgs/green.png"></div>

   
          
            <br/>
            <div class="repContentDiv"> 
              <ion-label style="color:var(--dark) !important">
                <span style="font-weight: bold !important">{{employee.EMPLOYEE_DISPLAY_NAME}}</span>
             <br>{{employee.USER_NAME}}<br>
            {{employee.EMAIL_ADDRESS}}</ion-label>
            </div>
       
      </ion-col>
    </ion-row>
  </ion-grid> -->


  <!-- </ion-radio-group> -->
      <!-- 
    </ion-list> -->

    <div  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>

         <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 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="background: var(--darkblue)!important;border-radius: 10px;    --background: transparent; " ion-button (click)="closeModal()">
      {{'general, cancel' | translate}}</ion-button>
  </div>
</ion-footer>