<div class="confirm-login-parent">
  <form [formGroup]="confirmLoginForm" (ngSubmit)="submit()">
    <div>
      <mat-card appearance="raised" class="confirm-login-card" [style.margin-top]="cardTopMargin">
        <app-fl-backdrop *ngIf="loading"></app-fl-backdrop>
        <div>
          <app-logo [darkContext]="false" [linkOptions]="logoLinkOptions" [customStyle]="{
            width: '140px',
            height: '70px',
            marginBottom: '20px'
          }"></app-logo>
        </div>
        <mat-card-title class="text-left">
          <span class="card-title" i18n>2-Step Verification</span>
        </mat-card-title>
        <mat-card-content class="text-left">
          <p class="fl-detail" i18n>This extra step shows it’s really you trying to sign in</p>
          <p class="fl-detail" *ngIf="receiver" i18n>A verification code was sent to {{receiver}}</p>
          <p class="fl-margin-top-small fl-detail fl-bold" *ngIf="auth.feature('demo')" i18n>
            In demo mode, any input will log you in.
          </p>
          <div>
            <app-form-errors #formErrors [formGroup]="confirmLoginForm"></app-form-errors>
            <mat-form-field>
              <mat-label i18n>Enter code</mat-label>
              <input matInput placeholder="Enter code" i18n-placeholder autocapitalize="none"
                     type="text" pattern="[0-9]*" inputmode="numeric" maxlength="6"
                     formControlName="code" name="code" required>
              <mat-error>{{ backendErrors['code'] || confirmLoginForm.controls.code.errors | errorFormatter }}</mat-error>
            </mat-form-field>
            <mat-checkbox formControlName="rememberSFA" [color]="'primary'" i18n>
              Don't ask again on this device
            </mat-checkbox>
              <p>{{confirmLoginForm.errors}}</p>
          </div>
        </mat-card-content>
        <mat-card-actions class="fl-block">
          <div>
            <button class="sign-in-btn" mat-raised-button [color]="'primary'" type="submit" i18n>Sign in</button>
          </div>
          <div>
            <a (click)="sendCode(true)"
               *ngIf="verificationCodeTimeout" mat-flat-button i18n>Resend verification code</a>
          </div>
          <div>
            <a (click)="goToConfirmOptions()" mat-flat-button i18n>Try another way</a>
          </div>
        </mat-card-actions>
      </mat-card>
    </div>
  </form>
  <a class="powered-by-link" href="http://fleio.com" target="_blank"
     *ngIf="auth && auth.userData && !auth.userData.is_white_label" i18n>
    Powered by Fleio
  </a>
</div>
