<app-generic-header
  [userImage]="userImage"
  showImage="true"
  showMenu="true"
  [headerText]="'home,dashboard' | translate">
</app-generic-header>

<ion-content class="main-dashboard-container">
  <ion-grid class="main-container contentBg">
    <ion-row class="slideFullWidth">
      <ion-slides [options]="slideOptsOne" class="padding-slide slide">
        <ion-slide *ngFor="let button of statsButtons; let i=index;">
              <app-stats-button 
                [title]="button.title"
                [statsValue]="button.statsValue"
                [icon]="button.icon"
                [show]="button.show"
                (click)="openStatsButton(button.link)">
              </app-stats-button>
        </ion-slide>
    </ion-slides>
    </ion-row>

    <ion-row *ngFor="let menuItem of menuEntries;  let i=index">
      <ion-row class="attendance-module" *ngIf="i == 1">
          <ion-col [size]="8">
              <h3>{{'home,monthly-attendance' | translate}}</h3>
              <span>{{'home,monthly-time-sheet-view' | translate}}</span>
              <ion-button  (click)="openTimeCard()">
                {{'home,view-detail' | translate}} 
              </ion-button>
          </ion-col>
          <ion-col [size]="4">
            <img src="assets/icon/new-design/attendance_button_icon.png"/>
          </ion-col>
      </ion-row>
      <ion-col [size]="12">
            <ion-label>{{menuItem.PROMPT}}</ion-label>
      </ion-col>
      <ion-slides [options]="slideOptsTwo">
        
        <ion-slide *ngFor="let subMenu of menuItem.children;  let j=index">
            <app-services-button
                (click)="openPage(subMenu)"
                [title]="subMenu.PROMPT"
                [icon]="subMenu.ICON">
            </app-services-button>
        </ion-slide>
        <ion-slide *ngIf="i == 0 && showVcationRule"> 
          <app-services-button
              (click)="Vacation_Rule()"
              [title]="vacationRuleTitle"
              >
          </app-services-button>
      </ion-slide>
    </ion-slides>
    </ion-row>

</ion-grid>
<div class="fixed-shift-timer" *ngIf="isCheckedIn" (click)="openattentracking()">
  <span class="subTitle">  {{'home,time-left' | translate}} </span>
  <circle-progress
    [backgroundColor]= "'#094875'"
    [percent]="percent"
    [radius]="50"
    [outerStrokeWidth]="2"
    [innerStrokeWidth]="0"
    [outerStrokeColor]="'#ffffff'"
    [animation]="true"
    [animationDuration]="300"
    [responsive]="false"
    [space]="-4"
    [startFromZero]="false"
    [title]="displayTime"
    titleFontWeight="bold"
    [titleColor]="'#ffffff'"
    [showUnits]="false"
    subtitle=""
    [subtitleColor]="'#ffffff'"
    [clockwise]="false"
    [renderOnClick]="false">
  </circle-progress>
</div>
<div class="fixed-shift-timer" *ngIf="isCheckedIn === false">
  <fab-button (trigger)="getDeviceLocation()"></fab-button>
  <page-trailer [small] = "true"></page-trailer>
</div>
</ion-content>
