<app-generic-header
  showBack="true"
  [headerText]="'myTeam, subordinate-leave' | translate">
</app-generic-header>


<ion-content padding style="--background: #f5f5f5">
  <div class="team-member-container">
    <ion-label>
      <ion-item lines='none'>
        <p style="font-size: 18px; font-weight: bold;">{{ts.trPK('myTeam','select-duration')}}</p>
      </ion-item>
    </ion-label>
    <ion-grid>
      <ion-row>
        <ion-col size='6'>
          <ion-label position='floating' style="margin-left: 15px;" class="colBold">{{ts.trPK('general','from')}} </ion-label>
          
          <ion-item class='dynamicField' lines='none'>
            <ion-datetime style="padding: 0px" [(ngModel)]="startDate"  min="1900" max="2100" displayFormat="MMM/DD/YYYY"  placeholder="MM/DD/YYYY" required
            cancelText="{{ts.trPK('general','cancel')}}" doneText="{{ts.trPK('general','done')}}"></ion-datetime>
            &nbsp;
            <ion-icon style="width: 20px;" name="calendar"></ion-icon>
          </ion-item>
        </ion-col>
        <ion-col size='6'>
          <ion-label position='floating' style="margin-left: 15px;" class="colBold">{{ts.trPK('general','to')}} </ion-label>
          <ion-item class='dynamicField' lines='none'>
            <ion-datetime style="padding: 0px" [(ngModel)]="endDate"  min="1900" max="2100" displayFormat="MMM/DD/YYYY"  placeholder="MM/DD/YYYY" required
            cancelText="{{ts.trPK('general','cancel')}}"
            doneText="{{ts.trPK('general','done')}}"></ion-datetime>
            &nbsp;
            <ion-icon style="width: 20px;" name="calendar"></ion-icon>
        </ion-item>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

  <div *ngIf='noData'></div>

  <div *ngIf='!noData'>
    <div *ngIf='list.length === 0'>
      <div class="team-member-container" style="text-align: center;">
        <h2 style="margin-top: 5px !important; font-size: 20px;" class="name">
          {{ts.trPK('general','empty')}}
        </h2>
      </div>
  
    </div>
    <div *ngIf='list.length > 0'>
      <div class="team-member-container" *ngFor='let user of list'>
        <ion-row>
          <ion-col [size]="3">
            <div class="user-image-container">
              <div class="user-image">
                <img *ngIf='user.image' [src]="user.image"/>
                <img *ngIf='!user.image' src="../assets/imgs/profile.png"/>
              </div>
            </div>
          </ion-col>
          <ion-col [size]="9">
              <div>
                <span>
                    <h2 style="margin-top: 0px !important; font-size: 20px;" class="name">{{user.EMPLOYEE_NAME}}</h2>
                    <span class="title"><ion-label>{{ts.trPK('general','from')}}: </ion-label><b style="font-size: 12px;">{{getDate(user.DATE_START)}} &nbsp; &nbsp;</b></span>
                    <span class="title"><ion-label>{{ts.trPK('general','to')}}: </ion-label><b style="font-size: 12px;">{{getDate(user.DATE_END)}}</b></span>
                    <br>
                    <span class="title"><ion-label>{{ts.trPK('myTeam','no-of-days')}}: </ion-label><b style="font-size: 12px;">{{diffDays(user)}}</b></span>
                </span>
              </div>
          </ion-col> 
        </ion-row>
      </div>
    </div>
  </div>
 
</ion-content> 

<ion-footer>
  <div  class="centerDiv">
    <ion-button class="confirmEitOkButton" [disabled]='checkDate()'  (click)="subordinateLeaveList()">{{ts.trPK('general','submit')}}</ion-button>
    </div> 
</ion-footer>



 
 