<ion-header *ngIf="!messageSuccess">
  <ion-toolbar >
    <ion-title color="dark">{{ 'workListMain, rfc' | translate}}</ion-title>

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

<ion-content >
<div *ngIf="!messageSuccess"> 
  <div class="tipsPadding boldTxtNav">
    {{'replacementRoll , msgRFC' | translate}}
  </div>
  <!-- <ion-list (ionChange)="radioChecked($event)" radio-group>
    <ion-item *ngFor="let rfcEmployeeList of RFCEmployeeListListRes; let i = index;">
      <ion-label>{{rfcEmployeeList.EMPLOYEE_DISPLAY_NAME}}</ion-label>
      <ion-label>{{rfcEmployeeList.ACTION}}</ion-label>
      <ion-radio value="{{i}}"></ion-radio>
    </ion-item>
  </ion-list> -->


  
  

<ion-item lines="none">
  <div class="square-container">
    <div (click)="select(rfcEmployeeList,i)" *ngFor="let rfcEmployeeList of RFCEmployeeListListRes; let i = index;"
      class="square">
      <div class="profileImageDiv">
        <img *ngIf="rfcEmployeeList.EMPLOYEE_IMAGE" class="empImgeRep" [src]="'data:image/png;base64,'+rfcEmployeeList.EMPLOYEE_IMAGE">
        <img *ngIf="rfcEmployeeList.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">{{rfcEmployeeList.EMPLOYEE_DISPLAY_NAME}}</span>
          <br>{{rfcEmployeeList.ACTION}}

        </ion-label>
      </div>
    </div>

  </div>
</ion-item>
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</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">
        <label class="boldTxtNav" padding>{{'replacementRoll , enterNote' | translate}}</label>
    
        <ion-item>
          <ion-textarea [(ngModel)]="userNote"></ion-textarea>
        </ion-item>
      </div>
      <br/>
  <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>