<ion-header>
  <ion-toolbar  class="header-toolbar-new">
    <ion-buttons slot="start">
      <ion-back-button color="light" class="btnBack" ></ion-back-button>
    </ion-buttons>
      <ion-title color="light" >Shift Details</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding shift-container" *ngIf="shiftDetailsData.length > 0 && selectedShift.origin === 'shiftDetails'">
    <ion-card *ngFor="let shiftData of shiftDetailsData;">
      <ion-card-content>
         <h2 class="card-summary-heading">Shift details</h2>
          <h2 class="card-summary-heading">{{ shiftData.SCHEDULE_DATE | date }}</h2>
          <ion-grid style="line-height: 10px;">
              <ion-row>
                  <ion-col [size]="8">
                      Shift type 
                  </ion-col>
                  <ion-col [size]="4">
                      {{shiftData.SHT_TYPE_DESC}}
                  </ion-col>
              </ion-row>
              <ion-row>
                  <ion-col [size]="8">
                      Shift
                  </ion-col>
                  <ion-col [size]="4">
                    {{shiftData.SHT_NAME}}
                  </ion-col>
              </ion-row>
              <ion-row>
                  <ion-col [size]="8">
                      Break 
                  </ion-col>
                  <ion-col [size]="4">
                    {{shiftData.BREAK_NAME}}
                  </ion-col>
              </ion-row>
              <ion-row>
                  <ion-col [size]="8">
                    Work On Break 
                  </ion-col>
                  <ion-col [size]="4">
                    {{shiftData.ACTUAL_WOB_HRS}}
                  </ion-col>
              </ion-row>
              <ion-row>
                <h2 class="card-summary-heading">Actual Swipe(s)</h2>
              </ion-row>
              <ion-row>
                    <ion-col [size]="8">
                        Start 
                    </ion-col>
                    <ion-col [size]="4">
                    {{shiftData.SHT_ACTUAL_START_TIME}}
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col [size]="8">
                    End 
                    </ion-col>
                    <ion-col [size]="4">
                    {{shiftData.SHT_ACTUAL_END_TIME}}
                    </ion-col>
                </ion-row>
                <ion-row>
                    <h2 class="card-summary-heading">Approved  Swipe(s)</h2>
                </ion-row>
                <ion-row>
                    <ion-col [size]="8">
                        Start 
                    </ion-col>
                    <ion-col [size]="4">
                        {{shiftData.APPROVED_START_TIME}}
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col [size]="8">
                        Start Reason 
                    </ion-col>
                    <ion-col [size]="4">
                        {{shiftData.APPROVED_START_REASON_DESC}}
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col [size]="8">
                        End 
                    </ion-col>
                    <ion-col [size]="4">
                        {{shiftData.APPROVED_END_TIME}}
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col [size]="8">
                        End Reason 
                    </ion-col>
                    <ion-col [size]="4">
                        {{shiftData.APPROVED_END_REASON_DESC}}
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col [size]="8">
                        Actual Hours
                    </ion-col>
                    <ion-col [size]="4">
                        {{shiftData.SHT_ACTUAL_HRS}}
                    </ion-col>
                </ion-row>
          </ion-grid> 
      </ion-card-content>
  </ion-card>
  </div>

  <div class="ion-padding shift-container" *ngIf="swipeDetailsData && selectedShift.origin === 'shiftSwipes'">
    <ion-card *ngFor="let swipeData of swipeDetailsData;">
        <ion-card-content>
            <h2 class="card-summary-heading">Employee Swipe(s)</h2>
            <h2 class="card-summary-heading">{{ swipeData.SCHEDULE_DATE | date }}</h2>
            
            <ion-grid style="line-height: 10px;">
                <ion-row>
                    <ion-col [size]="8">
                        Swipe Date 
                    </ion-col>
                    <ion-col [size]="4">
                        {{swipeData.SWIPE_DATE}}
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col [size]="8">
                        Swipe Time	
                    </ion-col>
                    <ion-col [size]="4">
                        {{swipeData.SWIPE_TIME}}
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col [size]="8">
                        Swipe Status 
                    </ion-col>
                    <ion-col [size]="4">
                      {{swipeData.SWIPE_STATUS}}
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col [size]="8">
                        Machine Location	 
                    </ion-col>
                    <ion-col [size]="4">
                      {{swipeData.MACHINE_LOCATION}}
                    </ion-col>
                </ion-row>
                <ion-row>
                      <ion-col [size]="8">
                        Unit Number	 
                      </ion-col>
                      <ion-col [size]="4">
                      {{swipeData.UNIT_NUMBER}}
                      </ion-col>
                  </ion-row>
                  <ion-row>
                      <ion-col [size]="8">
                        Unit Name	 
                      </ion-col>
                      <ion-col [size]="4">
                        {{swipeData.UNIT_NAME}}
                      </ion-col>
                  </ion-row>
                  <ion-row>
                      <ion-col [size]="8">
                        Exclude 
                      </ion-col>
                      <ion-col [size]="4">
                          {{swipeData.EXCLUDE_FLAG}}
                      </ion-col>
                  </ion-row>
                  <ion-row>
                      <ion-col [size]="8">
                        Error Message 
                      </ion-col>
                      <ion-col [size]="4">
                          {{swipeData.RETURN_MESSAGE}}
                      </ion-col>
                  </ion-row>
            </ion-grid> 
        </ion-card-content>
    </ion-card>
  </div>
</ion-content>