<!-- <ion-header>
  <ion-toolbar class="header-toolbar">
    <ion-title color="light">Attendance Tracking </ion-title>
    <ion-buttons slot="start">
      <nav-buttons></nav-buttons>
    </ion-buttons>
  </ion-toolbar>
</ion-header> -->


<!-- <ion-header>
  <ion-toolbar class="header-toolbar-new">
      <ion-buttons slot="start">
        <nav-buttons backLink="/home"></nav-buttons>
      </ion-buttons>
      <ion-title>Attendance Tracking</ion-title>
  </ion-toolbar>
</ion-header> -->


<ion-content>
  <div class="back-button-container">
      <nav-buttons backLink="/home"></nav-buttons>
  </div>
  <div class="timer-chart">
    <ion-label class="shift-title" style="font-weight: bold; font-size: 20px;"> {{curentDate}}</ion-label><br/>
    <ion-label class="shift-title">  {{ts.trPK('attendance-tracking','today-time-left')}}</ion-label>
  
    <div class="fixed-shift-timer">
      <circle-progress
        [titleFontSize]= '3'
        [percent]="percent"
        [radius]="8"
        [outerStrokeWidth]="0.25"
        [innerStrokeWidth]="0.25"
        [outerStrokeColor]="'#3cb9d5'"
        [innerStrokeColor]="'rgba(0,0,0,0.3)'"
        [animation]="true"
        [animationDuration]="300"
        [responsive]="true"
        [space]="-0.25"
        [startFromZero]="false"
        [title]="displayTime"
        titleFontWeight="bold"
        [titleColor]="'#ffffff'"
        [showUnits]="false"
        [showSubtitle]="false"
        [subtitleColor]="'#ffffff'"
        [clockwise]="false"
        [renderOnClick]="false">
  </circle-progress>
    </div>
  </div>
  <div *ngIf="attendanceTrackingList" class="tracking-content">
    <div class="divstopBtn">
      <button *ngIf="isCheckedIn"(click)="openDialog();" class="stopBtn" ion-button>
        <ion-icon class="stopicon" name="pause"></ion-icon>
      </button>
    </div>
    <ion-grid>
      <ion-row class="rowBorder">
        <ion-col [size]="12" class="colBorder" style="border-right: none;">
          <ion-label class="shift-title">{{ts.trPK('attendance-tracking','shift-time')}}</ion-label>
          <ion-label class="shift-text shift-title">{{attendanceTrackingList.P_SHT_NAME}} </ion-label>
        </ion-col>
      </ion-row>
      <ion-row class="rowBorder">
        <ion-col [size]="6" class="colBorder">
          <ion-label class="shift-title"> {{ts.trPK('attendance-tracking','check-in')}}</ion-label>
          <ion-label class="shift-text shift-title">{{attendanceTrackingList.P_SWIPE_IN | slice:0:-3}}</ion-label>
        </ion-col>
        <ion-col [size]="6" class="colBorder" style="border-right: none;">
          <ion-label class="shift-title"> {{ts.trPK('attendance-tracking','check-out')}}</ion-label>
          <ion-label class="shift-text shift-title">{{attendanceTrackingList.P_SWIPE_OUT | slice:0:-3}}</ion-label> 
        </ion-col>
      </ion-row>
      <ion-row style="text-align: center">
        <ion-col [size]="6" class="colBorder">
          <ion-label class="shift-title"> {{ts.trPK('attendance-tracking','late-in')}}</ion-label>
          <ion-label class="shift-text shift-title">{{attendanceTrackingList.P_LATE_IN_HOURS | slice:0:-3}}</ion-label>
        </ion-col>
        <ion-col [size]="6" class="colBorder" style="border-right: none;">
          <ion-label class="shift-title"> {{ts.trPK('attendance-tracking','regular')}}</ion-label>
          <ion-label class="shift-text shift-title">{{attendanceTrackingList.P_SCHEDULED_HOURS | slice:0:-3}} </ion-label>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>