<div fxLayout="row">
  <div fxFlex="100">
    <mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header">
      <div fxFlex="95" fxLayoutAlign="start start"><span class="page-title">Setup Two Factor Authentication</span></div>
      <button tabindex="15" fxFlex="5" fxLayoutAlign="center center" class="btn-close-x p-0" mat-button [mat-dialog-close]="false">X</button>
    </mat-card-header>
    <mat-card-content class="padding-gap-x-large">
      <div fxLayout="column">
        <mat-vertical-stepper #stepper [linear]="true" (selectionChange)="stepSelectionChanged($event)">
          <mat-step [stepControl]="passwordFormGroup" [editable]="flgEditable">
            <form fxLayout="column" fxLayoutAlign="space-between" class="my-1 pr-1" [formGroup]="passwordFormGroup">
              <ng-template matStepLabel>{{passwordFormLabel}}</ng-template>
              <div fxLayout="row">
                <mat-form-field fxLayout="column" fxFlex="100">
                  <mat-label>Password</mat-label>
                  <input autoFocus matInput type="password" tabindex="1" formControlName="password" required>
                  <mat-error *ngIf="passwordFormGroup?.controls?.password?.errors?.required">Password is required.</mat-error>
                </mat-form-field>
              </div>
              <div class="mt-2" fxLayout="row">
                <button mat-button color="primary" tabindex="3" type="button" (click)="onAuthenticate()">Confirm</button>
              </div>
            </form>
          </mat-step>
          <mat-step *ngIf="!showDisableStepper" [stepControl]="secretFormGroup" [editable]="flgEditable">
            <form fxLayout="column" class="my-1 pr-1" [formGroup]="secretFormGroup">
              <ng-template matStepLabel disabled="true">{{secretFormLabel}}</ng-template>
              <div fxLayout="row" fxFlex="100" fxLayoutAlign="start">
                <qr-code *ngIf="otpauth" [value]="otpauth" [size]="180" [errorCorrectionLevel]="'L'" />
              </div>
              <div fxFlex="100" class="w-100 alert alert-info">
                <fa-icon class="mt-1 mr-1 alert-icon" [icon]="faInfoCircle" />
                <span>You can use a compatible authentication app to get an authentication code when you log in to RTL. e.g.: Google Authenticator.</span>
              </div>
              <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between stretch">  
                <mat-form-field fxLayout="column" fxFlex="100">
                  <mat-label>Secret Code</mat-label>
                  <input autoFocus matInput type="text" tabindex="4" formControlName="secret" required>
                  <fa-icon matSuffix rtlClipboard [icon]="faCopy" [payload]="secretFormGroup?.controls?.secret?.value" (copied)="onCopySecret($event)" />
                  <mat-error *ngIf="secretFormGroup?.controls?.secret?.errors?.required">Secret Code is required.</mat-error>
                </mat-form-field>
              </div>
              <div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
                <button mat-button color="primary" tabindex="6" type="button" matStepperNext>Next</button>
              </div>
            </form>
          </mat-step>
          <mat-step *ngIf="!showDisableStepper" [stepControl]="tokenFormGroup">
            <form fxLayout="column" fxLayoutAlign="start" class="my-1 pr-1" [formGroup]="tokenFormGroup">
              <ng-template matStepLabel>{{tokenFormLabel}}</ng-template>
              <div *ngIf="!flgValidated || !isTokenValid" fxLayout="column">
                <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between stretch">  
                  <mat-form-field fxLayout="column" fxFlex="100">
                    <mat-label>Token</mat-label>
                    <input autoFocus matInput type="text" tabindex="7" formControlName="token" required>
                    <mat-error *ngIf="tokenFormGroup?.controls?.token?.errors?.required">Token is required.</mat-error>
                    <mat-error *ngIf="tokenFormGroup?.controls?.token?.errors?.notValid">Token is invalid.</mat-error>
                  </mat-form-field>
                </div>
                <div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
                  <button mat-button color="primary" tabindex="8" type="button" (click)="onVerifyToken()">{{tokenFormGroup?.controls?.token?.errors?.notValid ? 'Retry' : 'Verify'}}</button>
                </div>
              </div>
              <div *ngIf="flgValidated && isTokenValid">
                <strong>Success! You are all set.</strong>
              </div>
            </form>
          </mat-step>
          <mat-step *ngIf="showDisableStepper" [stepControl]="disableFormGroup">
            <form fxLayout="column" fxLayoutAlign="start" class="my-1 pr-1" [formGroup]="disableFormGroup">
              <ng-template matStepLabel>{{disableFormLabel}}</ng-template>
              <div *ngIf="!flgValidated || !isTokenValid" fxLayout="column">
                <div fxFlex="100" class="w-100 alert alert-warn">
                  <fa-icon class="mt-1 mr-1 alert-icon" [icon]="faExclamationTriangle" />
                  <span>You are about to disable two-factor authentication security from RTL. Are you sure you want to turn it off?</span>
                </div>
                <div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
                  <button mat-button color="primary" tabindex="8" type="button" (click)="onVerifyToken()">Disable</button>
                </div>
              </div>
              <div *ngIf="flgValidated && isTokenValid">
                <strong>Two factor authentication removed from RTL.</strong>
              </div>
            </form>
          </mat-step>
        </mat-vertical-stepper>
        <div fxLayout="row" fxFlex="100" fxLayoutAlign="end center">        
          <button mat-button color="primary" tabindex="12" type="button" default [mat-dialog-close]="false">{{flgValidated && isTokenValid ? 'Close' : 'Cancel'}}</button>
        </div>
      </div>
    </mat-card-content>
  </div>
</div>
