<ion-header>
  <ion-toolbar class="header-toolbar">
    <nav-buttons></nav-buttons>
    <ion-title color="light">{{headerTitle}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <ion-card>
    <ion-card-header class="boxHdr">
      <div class="hrTitle">{{'confirmAddEit, approverList' | translate}}</div>
    </ion-card-header>
    <ion-card-content>

      <!-- <ion-item  class="itemAH"  > -->
      <ion-grid no-padding class=" gridAH" *ngIf="approversList?.length > 0">
        <ion-row class="rowAH titleH" nowrap>
          <ion-col size="1">
            <ion-label class="Header" for="">{{'confirmAddEit, no' | translate}}</ion-label>
          </ion-col>
          <ion-col size="3">
            <ion-label class="Header" for="">{{'confirmAddEit, approver' | translate}}</ion-label>
          </ion-col>
          <ion-col size="3">
            <ion-label class="Header" for="">{{'confirmAddEit, approverCategory' | translate}}</ion-label>
          </ion-col>
          <ion-col size="3">
            <ion-label class="Header" for="">{{'confirmAddEit, approverType' | translate}}</ion-label>
          </ion-col>
          <ion-col size="2">
            <ion-label class="Header" for="">{{'confirmAddEit, status' | translate}}</ion-label>
          </ion-col>
        </ion-row>
        <!-- </ion-grid> 
</ion-item> -->


        <!-- <ion-list *ngIf="approversList?.length > 0">  -->

        <!-- <ion-item  class="itemAH" *ngFor="let item of approversList" >
                    <ion-grid class=" gridAH"> -->
        <ion-row class="rowAH" *ngFor="let item of approversList" nowrap>
          <ion-col size="1">
            <ion-label class="tbData" for="">{{item.APPROVER_ORDER_NUMBER}}</ion-label>
          </ion-col>
          <ion-col size="3">
            <ion-label class="tbData" for="">{{item.APPROVER}}</ion-label>
          </ion-col>
          <ion-col size="3">
            <ion-label class="tbData" for="">{{item.APPROVER_CATEGORY}}</ion-label>
          </ion-col>
          <ion-col size="3">
            <ion-label class="tbData" for="">{{item.APPROVER_TYPE}}</ion-label>
          </ion-col>
          <ion-col csize="2">
            <ion-label class="tbData" for="">{{item.APPROVAL_STATUS}}</ion-label>
          </ion-col>
        </ion-row>
      </ion-grid>
      <!-- </ion-item>
              
         </ion-list>  -->

    </ion-card-content>
  </ion-card>
  <ion-item padding>
    <ion-label class="boldTxtNav">{{'confirmAddEit, comment' | translate}}</ion-label>
    <ion-textarea type="text" [(ngModel)]="eitComments"></ion-textarea>
  </ion-item>

  <!-- <div padding *ngIf="attachmentRes?.length > 0 || attachListOver?.length > 0">
        <p class="boldTxt"> {{"absenceList.attachList" | translate}}</p>
    </div>
    <div *ngIf="attachListOver?.length > 0">
        <ion-row *ngFor="let attachList of attachListOver ; let i = index">
    
            <ion-col col-8 (click)="OpenAttachFiles(attachList.P_FILE_DATA,attachList.P_FILE_CONTENT_TYPE)">
                {{ attachList.P_FILE_NAME }}</ion-col>
            <ion-col col-4>

                <button [disabled]="attachList.isSuccess" class="iconButton" (click)="removeFile(attachList)"><img
                        class="imgSize" src="../assets/imgs/cancel.png"></button>
      
            </ion-col>

        </ion-row>
    </div> -->



  <!-- <div  *ngIf="attachmentRes?.length > 0">
        <ion-row *ngFor="let attachRes of attachmentRes">

           
            <ion-col col-8 (click)="OpenAttachFiles(attachRes.FILE_DATA,attachRes.FILE_CONTENT_TYPE)">
                {{ attachRes.FILE_NAME }}</ion-col>
            <ion-col col-4>

               <button [disabled]="!isResubmitEIT"    class="iconButton" (click)="addAttachment(false,attachRes)"><img
                        class="imgSize" src="../assets/imgs/editIcon.png"></button>
                <button (click)="delelteFile(attachRes)" class="iconButton" [disabled]="!isResubmitEIT"><img
                        class="imgSize" src="../assets/imgs/cancel.png"></button>

            </ion-col>


        </ion-row>
    </div> -->

  <div>
    <ion-card>

      <ion-card-header class="boxHdr">
        <ion-grid no-padding>
          <ion-row style="width: 100%;" class="hrTitle" nowrap>
            <ion-col size="10">
              <ion-text style="font-size: larger;"><b>{{"absenceList, attachList" | translate}}</b></ion-text>
            </ion-col>
            <ion-col size="2">
              <button class="btnBack" ion-button (click)="addAttachment(true,-1)">
                <img class="imgSize" src="../assets/imgs/attachment.png"></button>
            </ion-col>
          </ion-row>
        </ion-grid>

      </ion-card-header>

      <ion-card-content>
        <ion-grid *ngIf="attachListOver?.length > 0">
          <div *ngFor="let attachList of attachListOver ; let i = index">
            <ion-row>
              <ion-col col-8>
                <div> <img float-start class="attachImg" src="../assets/imgs/file.png">
                </div>
                <ion-label>
                  {{attachList.P_FILE_NAME }} </ion-label>

              </ion-col>
              <ion-col col-4>
                <button float-end class="attachImgBtn"
                  (click)="OpenAttachFiles(attachList.P_FILE_DATA,attachList.P_FILE_CONTENT_TYPE)">
                  <img class="attachImg" src="../assets/imgs/view.png">
                </button>
                <button float-end [disabled]="attachList.isSuccess" class="attachImgBtn"
                  (click)="removeFile(attachList)"><img class="attachImg" src="../assets/imgs/deletegray.png"></button>
              </ion-col>
            </ion-row>
          </div>

        </ion-grid>
        <ion-grid *ngIf="attachmentRes?.length > 0">
          <div *ngFor="let attachRes of attachmentRes">
            <ion-row>
              <ion-col col-8>
                <div> <img float-start class="attachImg" src="../assets/imgs/file.png">
                </div>
                <ion-label>
                  {{attachRes.FILE_NAME }} </ion-label>

              </ion-col>
              <ion-col col-4>
                <button float-end class="attachImgBtn"
                  (click)="OpenAttachFiles(attachRes.FILE_DATA,attachRes.FILE_CONTENT_TYPE)">
                  <img class="attachImg" src="../assets/imgs/view.png">
                </button>
                <button float-end [disabled]="!isResubmitEIT" class="attachImgBtn" (click)="delelteFile(attachRes)"><img
                    class="attachImg" src="../assets/imgs/deletegray.png"></button>
              </ion-col>


              <!-- <button [disabled]="!isResubmitEIT" class="iconButton" (click)="addAttachment(false,attachRes)"><img
                        class="imgSize" src="../assets/imgs/editIcon.png"></button>
                <button (click)="delelteFile(attachRes)" class="iconButton" [disabled]="!isResubmitEIT"><img
                        class="imgSize" src="../assets/imgs/cancel.png"></button> -->
            </ion-row>
          </div>

        </ion-grid>
      </ion-card-content>
    </ion-card>

  </div>

</ion-content>

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