<ion-header>
  <ion-toolbar class="header-toolbar">
    <ion-buttons slot="start">
      <!-- <ion-back-button color="light" class="btnBack" defaultHref="/vacation-rule/create-vacation-rule"></ion-back-button> -->
      <nav-buttons backLink="/vacation-rule/vacation-type"></nav-buttons>

    </ion-buttons>




    <ion-title color="light">{{ 'vacation-rule, create-vacation-rule' | 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">
          <li>{{'vacation-rule, itemType' | translate}}</li>
        </ion-col>
        <ion-col size="4">
          <li>{{'vacation-rule, notification-type' | translate}}</li>
        </ion-col>
        <ion-col size="4">
          <li class="active">{{'vacation-rule, create-vacation-rule' | translate}}</li>
        </ion-col>
      </ion-row>
    </ul>

    <ion-row>
      <ion-item>
        <ion-label class="label">{{'vacation-rule, itemType' | translate}}</ion-label>
        <ion-label class="label floatlabel">{{P_ITEM_TYPE_TITLE}} </ion-label>
      </ion-item>
      <ion-item>
        <ion-label class="label">{{'vacation-rule, notification' | translate}} </ion-label>
        <ion-label class="label floatlabel">{{Notification_Title}} </ion-label>
      </ion-item>
      <ion-item class="requiredItem">
        <ion-label class="label">{{'vacation-rule, start-date' | translate}}</ion-label>
        <ion-datetime  [(ngModel)]="Sdate" min="1900" max="2100"  displayFormat="MM/DD/YYYY hh:mm:ss A"
          placeholder="MM/DD/YYYY hh:mm:ss A" required cancelText="{{ts.trPK('general','cancel')}}"
          doneText="{{ts.trPK('general','done')}}"></ion-datetime>
      </ion-item>
      <ion-item class="requiredItem">
        <ion-label class="label">{{'vacation-rule, end-date' | translate}}</ion-label>
        <ion-datetime [(ngModel)]="Edate" min="1900" max="2100"  displayFormat="MM/DD/YYYY hh:mm:ss A"
          placeholder="MM/DD/YYYY hh:mm:ss A" required cancelText="{{ts.trPK('general','cancel')}}"
          doneText="{{ts.trPK('general','done')}}"></ion-datetime>
      </ion-item>
      <ion-item lines="none" class="requiredItem">
        <ion-label>{{'vacation-rule, message-label' | translate}}</ion-label>
        <ion-textarea required [(ngModel)]="msgVal"></ion-textarea>
      </ion-item>

      <ion-list>
        <ion-radio-group [(ngModel)]="notifTypeSel">
          <ion-item *ngFor="let assignMode of REASSIGN_val;let i=index">
            <ion-label>{{assignMode.RADIO_BUTTON_LABEL}}</ion-label>
            <ion-radio value="{{assignMode.RADIO_BUTTON_ACTION}}" [checked]="i==0"></ion-radio>
          </ion-item>
          <ion-item *ngIf="isDeliver">
            <ion-label>{{'vacation-rule, deliver' | translate}}</ion-label>
            <ion-radio value="DELIVER"></ion-radio>
          </ion-item>

          <ion-item *ngIf="showForType_Y">
            <ion-label>{{'vacation-rule, close' | translate}}</ion-label>
            <ion-radio value="CLOSE"></ion-radio>
          </ion-item>
          <!-- <button *ngIf="notifTypeSel!='RESPOND'" ion-button block (click)="SearchReplacment()">{{'createVacationRule.search' | translate}}</button> -->

          <ion-item *ngIf="schemaNotific && showForType_Y == false">
            <ion-label>{{'vacation-rule, respond' | translate}}</ion-label>
            <ion-radio value="RESPOND"></ion-radio>
          </ion-item>
        </ion-radio-group>
      </ion-list>
      <div id="CVDynamicFields">
        </div>
      <!-- <json-schema-form *ngIf="schemaNotific && notifTypeSel =='RESPOND'" [form]="schemaNotific"
        [(ngModel)]="exampleJsonObject">
      </json-schema-form> -->

      <ion-item style="margin-right: 0px;" lines="none" (click)="SearchReplacment()"
        *ngIf="(hideForwordEmployee && notifTypeSel =='RESPOND') || (notifTypeSel == 'DELEGATE') || (notifTypeSel == 'TRANSFER') ">

        <ion-input [(ngModel)]="employeeSel" placeholder="{{'vacation-rule, search-employee' | translate}}"></ion-input>
        <ion-button style="width: 19%;" button-type="clear">
          <ion-icon slot="icon-only" name="search"></ion-icon>
        </ion-button>

      </ion-item>

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

<ion-footer>
  <div class="centerDiv">
    <div *ngIf="isUpdate==false" class="centerDiv">
      <ion-button class="footer-button" color="customnavy" ion-button (click)="ApplyFunc()">
        {{'vacation-rule, apply' | translate}}</ion-button>
    </div>

    <div *ngIf="isUpdate" class="centerDiv">
      <ion-button class="footer-button" color="customnavy" ion-button (click)="updateVacationRule()">
        {{'vacation-rule, update' | translate}}</ion-button>
    </div>
  </div>
</ion-footer>