<ion-content>
  <ion-slides [options]="slideOptsOne" (ionSlideDidChange)="slideChanged($event)" #slides>
    <ion-slide *ngFor="let shift of SHIFTDETAILS.GetScheduleShiftsDetailsList; let i=index">
          <ion-grid class="headerGrid">
            <ion-row style="padding: 5px 10px;">
              <ion-col size="8">
                <div style="width: 100%;">
                    <div class="result-graph">
                      <div class="result-text-container">
                          <h2 class="percentage">{{percentage}}</h2>
                          <span>{{ts.trPK('attendance','completed')}}<br><br><br><br></span>
                      </div>
                      <p-chart [ngClass]="direction == 'ltr'? 'today-graph':'today-graph-ar'" type="doughnut" [data]="data" [options]="options"></p-chart>
                    </div>
                </div>
              </ion-col>
              <ion-col size="4">
                <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-row class="gridrow">
             

              <ion-col [size]="6" [ngClass]="direction == 'ltr'? 'col':'col-ar'">
                <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 [size]="6" style="border-bottom: 1px solid #ccc;">
                <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-col [size]="6" [ngClass]="direction == 'ltr'? 'col':'col-ar'">
                <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 [size]="6" style="border-bottom: 1px solid #ccc;">
                <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-col [size]="6" [ngClass]="direction == 'ltr'? 'col':'col-ar'"> 
                <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 [size]="6" style="border-bottom: 1px solid #ccc;">
                <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-col [size]="6" [ngClass]="direction == 'ltr'? 'col':'col-ar'">
                <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 [size]="6">
                <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>
    </ion-slide>
  </ion-slides>
</ion-content>

