
<!-- <ion-slides [options]="slideOptsOne" (ionSlideDidChange)="slideChanged($event)">
  <ion-slide *ngFor="let shift of SHIFTDETAILS.GetScheduleShiftsDetailsList; let i=index"> -->
    <!-- <div> -->
        <ion-grid class="headerGrid">
          <ion-row style="margin-left: -130px; margin-top: 27px;">
            <ion-col size="10">
              <div style="width: 100%;">
                  <div class="result-graph">
                    <div class="result-text-container">
                        <h2 class="percentage">{{percentage}}</h2>
                        <span>Completed <br><br><br><br></span>
                    </div>
                    <p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
                  </div>
              </div>
            </ion-col>
            <ion-col size="2">
              <div class="div" >
                <ion-row >
                <p class="p0">{{nameDay}}</p>
              </ion-row>
                <ion-row >
                <p class="p1">{{day}}</p>
              </ion-row>
              <ion-row >
                <p class="p2">{{nameMonth}}</p>
              </ion-row>
              <ion-row >
                <p class="p3">{{year}}</p>
              </ion-row>
              <ion-row>
                <p class="p5">{{ts.trPK('attendance','present')}}</p>
              </ion-row>
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
        
        <div>
          <ion-grid class="grid">
            <ion-row class="gridrow">
              <ion-col class="liftcol">
                <ion-row class="amountlabel"> <p>{{shiftTime}}</p> </ion-row>
                <ion-row class="rowlabel"> 
                <p >{{ts.trPK('attendance-tracking','shift-time')}}</p>
                </ion-row>
              </ion-col>
              <ion-col class="rightcol">
                <ion-row class="amountlabel"><p >{{scheduled}}</p> </ion-row>
                <ion-row class="rowlabel"> 
                  <p >{{ts.trPK('attendance-tracking','regular')}}</p>
                </ion-row>
              </ion-col>
            </ion-row>
            <ion-row class="gridrow" >
              <ion-col class="liftcol">
                <ion-row class="amountlabel"><p >{{startDate}}</p> </ion-row>
                <ion-row class="rowlabel"> 
                  <p >{{ts.trPK('attendance-tracking','check-in')}}</p>
                </ion-row>
              </ion-col>
              <ion-col class="rightcol">
                <ion-row class="amountlabel"> <p >{{endDate}}</p> </ion-row>
                <ion-row class="rowlabel"> 
                  <p >{{ts.trPK('attendance-tracking','check-out')}} </p>
                </ion-row>
              </ion-col>
            </ion-row >
            <ion-row class="gridrow">
              <ion-col class="liftcol"> 
                <ion-row class="amountlabel"> <p >{{lateIn}}</p> </ion-row>
                <ion-row class="rowlabel"> 
                  <p >{{ts.trPK('attendance-tracking','late-in')}}</p>
                </ion-row>
              </ion-col>
              <ion-col class="rightcol">
                <ion-row class="amountlabel">  <p >{{excess}}</p> </ion-row>
                <ion-row class="rowlabel"> 
                  <p >{{ts.trPK('attendance-tracking','excess')}}</p>
                </ion-row>
              </ion-col>
            </ion-row>
            <ion-row class="gridrow">
              <ion-col class="liftcol">
                <ion-row class="amountlabel">  <p >{{shortage}}</p> </ion-row>
                <ion-row class="rowlabel"> 
                  <p>{{ts.trPK('attendance-tracking','shortage')}}</p>
                </ion-row>
              </ion-col>
              <ion-col class="rightcol">
                <ion-row class="amountlabel"> <p >{{earlyOut}}</p> </ion-row>
                <ion-row class="rowlabel"> 
                  <p >{{ts.trPK('attendance-tracking','early-out')}}</p>
                </ion-row>
              </ion-col>
            </ion-row>
        
          </ion-grid>
        </div>
    <!-- </div> -->
    
  <!-- </ion-slide>
</ion-slides> -->
