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

<ion-content padding no-bounce>

  <ion-grid no-padding>
    <ul class="cusprogressbar">
      <ion-row nowrap>
        <ion-col size="4">
          <!-- <ul class="cusprogressbar"> -->
          <li>{{'vacation-rule, itemType' | translate}}</li>
          <!-- </ul> -->
        </ion-col>
        <ion-col size="4">
          <!-- <ul class="cusprogressbar"> -->
          <li class="active">{{'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, notification-tip" | translate'></div>
    </ion-row>

    <ion-row nowrap style="margin-top: 5%;">
      <ion-col align-self-center size="3">
        <ion-label class="label">{{'vacation-rule, itemType' | translate}}</ion-label>
      </ion-col>

      <ion-col size="5"></ion-col>

      <ion-col size="4">
        <ion-label class="label">{{itemType}}</ion-label>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-list>
        <ion-radio-group [(ngModel)]="notifTypeSel" mode="md">
          <ion-item>
            <ion-label>{{'vacation-rule, all-label' | translate}}</ion-label>
            <ion-radio checked value="*"></ion-radio>
          </ion-item>
          <ion-item>
            <ion-label>{{'vacation-rule, select-label' | translate}}</ion-label>
            <ion-radio value="sel_opt"></ion-radio>
          </ion-item>
        </ion-radio-group>
      </ion-list>
    </ion-row>

    <ion-row>
      <ion-item *ngIf="notifTypeSel=='sel_opt'">
        <ion-label>{{'vacation-rule, notification' | translate}}</ion-label>
        <ion-select okText='{{"general, ok" | translate }}' cancelText='{{"general, cancel" | translate }}'
          [(ngModel)]="var_notification">
          <ion-select-option value="{{i}}" *ngFor="let x of notification_list; let i=index">
            {{x.NOTIFICATION_DISPLAY_NAME}}
          </ion-select-option>
        </ion-select>
      </ion-item>
    </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>