<app-generic-header
  showBack="true"
  backLink="/home"
  [headerText]="'general,option-attendance' | translate">
</app-generic-header>

<ion-content>
  <ion-grid *ngIf="!nfcIOSSuccess" class="attendance-grid">

    <ion-row>
      <ion-col size="12" class="nfc-clock">
        <img src="../assets/imgs/nfc_clock.png" />
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col padding>
        <h4>{{ "general, select-attendance" | translate }}</h4>
      </ion-col>
    </ion-row>

    <ion-row padding>
      <ion-col size="5" [ngClass]="{'margin-col': direction === 'en', 'disable-attendance': !serviceEnableNFC}" class="buttonStyle" >
        <div class="textAndIcon" (click)="startNFCCode()">
          <img src="../assets/imgs/nfc_icon.png" />
          <p>{{ "general, nfc-text" | translate }}</p>
        </div>
      </ion-col>

      <ion-col 
        [ngClass]="{'margin-col-right': direction === 'ar','disable-attendance': !serviceEnableQR}"
        size="5"
        offset="1"
        class="buttonStyle">
        <div class="textAndIcon" (click)="startQRCode()">
          <img src="../assets/imgs/nfc_QR.png" />
          <p>{{ "general, qr-text" | translate }}</p>
        </div>
      </ion-col>
    </ion-row>


    <ion-row padding>
      <ion-col size="5" [ngClass]="{'margin-col': direction === 'en', 'disable-attendance': !serviceEnableWifi}" class="buttonStyle" >
        <div class="textAndIcon" (click)="startWIFICode()">
          <img src="../assets/imgs/wifi_icon.png" />
          <p>{{ "general, wifi-text" | translate }}</p>
        </div>
      </ion-col>

    </ion-row>
  </ion-grid>

  <div *ngIf="nfcIOSSuccess" style="display: block; text-align: center; margin-top: 50%" >
    <img src="../assets/imgs/check.png" />
  </div>
</ion-content>
