<form (ngSubmit)="submit()">
  <header>
    <div class="left"></div>
    <h1 class="center">
      <span class="title">{{ "verifyIdentity" | i18n }}</span>
    </h1>
    <div class="right">
      <button type="submit" *ngIf="!hideInput">{{ "unlock" | i18n }}</button>
    </div>
  </header>
  <main tabindex="-1">
    <div class="box">
      <div class="box-content">
        <div class="box-content-row box-content-row-flex" appBoxRow *ngIf="!hideInput">
          <div class="row-main" *ngIf="pinLock">
            <label for="pin">{{ "pin" | i18n }}</label>
            <input
              id="pin"
              type="{{ showPassword ? 'text' : 'password' }}"
              name="PIN"
              class="monospaced"
              [(ngModel)]="pin"
              required
              appInputVerbatim
            />
          </div>
          <div class="row-main" *ngIf="!pinLock">
            <label for="masterPassword">{{ "masterPass" | i18n }}</label>
            <input
              id="masterPassword"
              type="{{ showPassword ? 'text' : 'password' }}"
              name="MasterPassword"
              aria-describedby="masterPasswordHelp"
              class="monospaced"
              [(ngModel)]="masterPassword"
              required
              appInputVerbatim
            />
          </div>
          <div class="action-buttons">
            <button
              type="button"
              class="row-btn"
              appStopClick
              appA11yTitle="{{ 'toggleVisibility' | i18n }}"
              (click)="togglePassword()"
              [attr.aria-pressed]="showPassword"
            >
              <i
                class="bwi bwi-lg"
                [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                aria-hidden="true"
              ></i>
            </button>
          </div>
        </div>
      </div>
      <div id="masterPasswordHelp" class="box-footer">
        <p>{{ "yourVaultIsLocked" | i18n }}</p>
        {{ "loggedInAsOn" | i18n : email : webVaultHostname }}
      </div>
    </div>
    <div class="box" *ngIf="biometricLock">
      <div class="box-footer no-pad">
        <button
          type="button"
          class="btn primary block"
          (click)="unlockBiometric()"
          appStopClick
          [disabled]="pendingBiometric"
        >
          {{ "unlockWithBiometrics" | i18n }}
        </button>
      </div>
    </div>
    <p class="text-center">
      <button type="button" appStopClick (click)="logOut()">{{ "logOut" | i18n }}</button>
    </p>
    <app-private-mode-warning></app-private-mode-warning>
    <app-callout *ngIf="biometricError" type="error">{{ biometricError }}</app-callout>
    <p class="text-center text-muted" *ngIf="pendingBiometric">
      <i class="bwi bwi-spinner bwi-spin" aria-hidden="true"></i> {{ "awaitDesktop" | i18n }}
    </p>
  </main>
</form>
