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

<ion-content padding>

  <ion-grid no-padding>
    <ul class="cusprogressbar">
      <ion-row nowrap>
        <ion-col size="4">
          <!-- <ul class="cusprogressbar"> -->
          <li class="active">{{'vacation-rule, itemType' | translate}}</li>
          <!-- </ul> -->
        </ion-col>
        <ion-col size="4">
          <!-- <ul class="cusprogressbar"> -->
          <li>{{'vacation-rule, notification-type' | translate}}</li>
          <!-- </ul> -->
        </ion-col>
        <ion-col size="4">
          <!-- <ul class="cusprogressbar"> -->
          <li>{{'vacation-rule, create-vacation-rule' | translate}}</li>
          <!-- </ul> -->
        </ion-col>
      </ion-row>
    </ul>

    <ion-row justify-content-center>
      <div [innerHTML]='"vacation-rule, vacation-type-text" | translate'></div>
    </ion-row>

    <ion-row no-wrap>

      <ion-item>
        <ion-label>{{'vacation-rule, itemType' | translate}}</ion-label>
        <ion-select okText='{{"general, ok" | translate }}' cancelText='{{"general, cancel" | translate }}'
          [(ngModel)]="index" required>
          <ion-select-option [selected]="x.ITEM_TYPE_DISPLAY_NAME" value="{{i}}"
            *ngFor="let x of ruleTypeList; let i=index;">
            {{x.ITEM_TYPE_DISPLAY_NAME}} </ion-select-option>
        </ion-select>
      </ion-item>

    </ion-row>

    <ion-row>
      <p class="smallTip">
        {{'vacation-rule, skip-step-3' | translate}}
      </p>
    </ion-row>

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

<ion-footer>
  <div class="centerDiv">
    <ion-button class="footer-button" color="customnavy" ion-button (click)="NextPage()">
      {{'vacation-rule, next-label' | translate}}</ion-button>
  </div>
</ion-footer>