<ion-header>
  <ion-toolbar class="header-toolbar">
    <!-- <nav-buttons></nav-buttons> -->
    <ion-buttons slot="start">
      <ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
      
    </ion-buttons>
    <ion-title color="light">{{ 'vacation-rule, vacationRule' | translate}}</ion-title>
    
  </ion-toolbar>
</ion-header>

<ion-content padding>

  <!-- <div #containerDiv id="containerDiv"> -->
  <!-- </div> -->

  <div style="padding: 0 10px;" [innerHTML]='"vacation-rule, tip" | translate'></div>
  <ion-card *ngFor="let item of GetVacationRulesList; let i = index;">
    <ion-card-header class="boxHdr">
      <ion-grid no-padding>
        <ion-row class="hrTitle" nowrap>
          <ion-col size="8">
            <ion-text style="font-size: larger;"><b>{{'vacation-rule, ruleInfo' | translate}}</b></ion-text>
          </ion-col>
          <ion-col size="2">
            <button class="btnBack" ion-button (click)="deleteFunc(i)">
              <img class="imgSize" src="../assets/imgs/delete.png"></button>
          </ion-col>
          <ion-col size="2">
            <button class="btnBack" ion-button (click)="updateFunc(i)">
              <img class="imgSize" src="../assets/imgs/edit.png"></button>
          </ion-col>
        </ion-row>
      </ion-grid>

    </ion-card-header>

    <ion-card-content>
      <ion-grid>
        <div>
          <ion-row>
            <ion-col class="colBold">
              <label for="">{{'vacation-rule, ruleName' | translate}}</label>
            </ion-col>
            <ion-col>
              <label for=""> {{item.RULE_NAME}}</label>
            </ion-col>
          </ion-row>
        </div>
        <ion-row>
          <ion-col class="colBold">
            <label for="">{{'vacation-rule, itemType' | translate}}</label>
          </ion-col>
          <ion-col>
            <label for=""> {{item.ITEM_TYPE_DISPLAY_NAME}}</label>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col class="colBold">
            <label for="">{{'vacation-rule, notification' | translate}}</label>
          </ion-col>
          <ion-col>
            <label for=""> {{item.NOTIFICATION_DISPLAY_NAME}}</label>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col class="colBold">
            <label for="">{{'vacation-rule, status' | translate}}</label>
          </ion-col>
          <ion-col>
            <label for=""> {{item.RULE_STATUS}}</label>
          </ion-col>
        </ion-row>


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

  </ion-card>

  <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" color="customnavy" ion-button (click)="Vacation_Type()">
      {{'vacation-rule, createRule' | translate}}</ion-button>
  </div>
</ion-footer>