<ion-header >
  <ion-toolbar  class="header-toolbar">
      <ion-title color="light">{{ts.trPK('absenceList','absenceList')}}</ion-title>
      <ion-buttons slot="start">
        <nav-buttons></nav-buttons>
      </ion-buttons>
      <ion-buttons slot="end">
              <button class="headerBtn" (click)="AccrualBalances()">
                      <img class="headerImg" src="../assets/imgs/accubalance.png">
              </button>
      </ion-buttons>
</ion-toolbar>
</ion-header>


<ion-content padding>

  <div class="no-dataDiv" *ngIf="!GetAbsenceTransactionList || GetAbsenceTransactionList.length <= 0" >
      <ion-row>
              <img class="empty-data" src="../assets/imgs/noData.png"/>
 
        
      </ion-row>
      <h4>  {{ts.trPK('general','noData')}}</h4>
    </div>
  
  <div *ngIf="GetAbsenceTransactionList && GetAbsenceTransactionList.length > 0 ">
          <ion-card *ngFor="let item of GetAbsenceTransactionList; let i=index;">
      
            <ion-card-header class="boxHdr">
                <div class="hrTitle">{{ts.trPK('absenceList','absHeader')}}</div>
               
                    <img class="imgSize" src="../assets/imgs/attachment.png" *ngIf="item.ATTACHMENT_EXIST=='Y'" (click)="AttachmentDocuments(item.ABSENCE_ATTENDANCE_ID)">
      </ion-card-header>
            <ion-card-content>
            <ion-grid>
              <div>
                      <ion-row>
                              <ion-col class="colBold">
                                  <label for="">{{ts.trPK('absenceList','startDate')}} </label>
                              </ion-col>
                              <ion-col>
                                  <label for=""> {{item.START_DATE}}</label>
                              </ion-col>
                          </ion-row>
                          <ion-row>
                              <ion-col class="colBold">
                                  <label for="">{{ts.trPK('absenceList','endDate')}}</label>
                              </ion-col>
                              <ion-col>
                                  <label for=""> {{item.END_DATE}}</label>
                              </ion-col>
                          </ion-row>
                          <ion-row>
                              <ion-col class="colBold">
                                  <label for="">{{ts.trPK('absenceList','absenceType')}} </label>
                              </ion-col>
                              <ion-col>
                                  <label for="">{{item.ABSENCE_TYPE}}</label>
                              </ion-col>
                          </ion-row>
                          <ion-row>
                              <ion-col class="colBold">
                                  <label for="">{{ts.trPK('absenceList','absenceCategory')}}</label>
                              </ion-col>
                              <ion-col>
                                  <label for="">{{item.ABSENCE_CATEGORY}}</label>
                              </ion-col>
                          </ion-row>
                          <ion-row>
                              <ion-col class="colBold">
                                  <label for="">{{ts.trPK('absenceList','days')}}</label>
                              </ion-col>
                              <ion-col>
                                  <label for="">{{item.ABSENCE_DAYS}}</label>
                              </ion-col>
                          </ion-row>
                          <ion-row>
                              <ion-col class="colBold">
                                  <label for="">{{ts.trPK('absenceList','hours')}}</label>
                              </ion-col>
                              <ion-col>
                                  <label for="">{{item.ABSENCE_HOURS}}</label>
                              </ion-col>
                          </ion-row>
                          <ion-row>
                              <ion-col class="colBold">
                                  <label for="">{{ts.trPK('absenceList','approvalStatus')}}</label>
                              </ion-col>
                              <ion-col>
                                  <label for="">{{item.APPROVAL_STATUS}}</label>
                              </ion-col>
                          </ion-row>
                          <ion-row>
                              <ion-col class="colBold">
                                  <label for="">{{ts.trPK('absenceList','absenceStatus')}}</label>
                              </ion-col>
                              <ion-col>
                                  <label for="">{{item.ABSENCE_STATUS}}</label>
                              </ion-col>
                          </ion-row>
              </div>
            </ion-grid>
          </ion-card-content>
          </ion-card>
      
        </div>
  <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  color="customnavy" class="gridBtn" (click)="createAbsence()">{{ts.trPK('absenceList','createAbs')}}</ion-button>
  </div>
</ion-footer>