<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" >Time and Attendance</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
  <div class="time-card-home-container">
    <ion-card 
      (click)="openDetailPage(timeCard.pageLink)"
      *ngFor="let timeCard of timeCardOptions ; let i = index">
      <ion-card-content>
          <ion-grid>
              <ion-row>
                  <ion-col [size]="4" class="time-card-image">
                    <img src="../assets/imgs/time-card/{{timeCard.imageName}}">
                  </ion-col>
                  <ion-col [size]="6" class="time-card-details">
                    <h1 class="time-card-heading">{{timeCard.heading}}</h1>
                    <span class="time-card-description">{{timeCard.description}}</span>
                  </ion-col>
                  <ion-col [size]="2">
                    <img class="time-card-rightIcon"
                    src="../assets/imgs/time-card/ArrowRight.png">
                  </ion-col>
              </ion-row>
          </ion-grid> 
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>
