<ion-header >
  <ion-toolbar  class="header-toolbar">
      <ion-title color="light">  {{ts.trPK('submitAbsence','submitAbsence')}}</ion-title>
      <ion-buttons slot="start">
        <nav-buttons></nav-buttons>
      </ion-buttons>
</ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-item>
    <ion-label class="colBold requiredClass">{{ts.trPK('submitAbsence','absenceType')}} </ion-label>
    <ion-select (ionChange)="calcDay()" okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}" [(ngModel)]="absenceType"  (ionChange)="onTypeAbsenceChange()" required>
        <!-- let item of AbsenceType; let i=index; -->
        <ion-select-option value= "{{item.ABSENCE_ATTENDANCE_TYPE_ID}}" *ngFor="let item of absenceTypeList; let i=index;">{{item.ABSENCE_ATTENDANCE_TYPE_NAME}} </ion-select-option>
    </ion-select>
  </ion-item>
  
  <ion-item>
    <ion-label class="colBold requiredClass">{{ts.trPK('submitAbsence','startDate')}} </ion-label>
   <ion-datetime  (ionChange)="calcDay()" [(ngModel)]="startDate"  min="1900" max="2100" displayFormat="MMM/DD/YYYY"  placeholder="MM/DD/YYYY" required></ion-datetime>
</ion-item>
<ion-item *ngIf="hoursOrDay!='D'">
  <ion-label class="colBold requiredClass">{{ts.trPK('submitAbsence','startTime')}} </ion-label>
  <ion-datetime displayFormat="HH:mm" [(ngModel)]="startTime" required></ion-datetime>
</ion-item>
<ion-item>
    <ion-label class="colBold requiredClass">{{ts.trPK('submitAbsence','endDate')}}</ion-label>
    <ion-datetime (ionChange)="calcDay()" [(ngModel)]="endDate"  min="1900" max="2100" displayFormat="MMM/DD/YYYY"  placeholder="MM/DD/YYYY" required ></ion-datetime>
</ion-item>

<ion-item *ngIf="hoursOrDay!='D'">
  <ion-label class="colBold requiredClass">{{ts.trPK('submitAbsence','endTime')}}</ion-label>
  <ion-datetime displayFormat="HH:mm" [(ngModel)]="endTime" required></ion-datetime>
</ion-item>
<ion-item>
  <ion-label  class="colBold" >{{ts.trPK('submitAbsence','totalDays')}} </ion-label>
  <ion-label end style="text-align: center;">{{totalDays}}</ion-label>
</ion-item>
<ion-item>

  <ion-input  placeholder="{{ts.trPK('searchForReplacment','searchForReplacment')}}" type="text" [(ngModel)]="employeeSel">
    </ion-input>
    <button ion-button class="search-button" icon-only (click)="SearchReplacment()" clear type="button" item-end >
        <ion-icon name="search" ></ion-icon>
      </button>
</ion-item>

<ion-item>
  <ion-label class="colBold">{{ts.trPK('submitAbsence','comments')}}</ion-label>
  <ion-textarea [(ngModel)]="absComments"></ion-textarea>
</ion-item>
<div id="dynamic-abs-container" >
</div>
</ion-content>
<ion-footer>
  <div  class="centerDiv">
    <ion-button color="customnavy"  (click)="validateAbcenseTransaction()">{{ts.trPK('general','next')}}</ion-button>
    </div> 
</ion-footer>
