<form [formGroup]="formGroup" [bitSubmit]="submit">
  <bit-form-field>
    <bit-label>{{ "masterPass" | i18n }}</bit-label>
    <input
      type="password"
      formControlName="masterPassword"
      bitInput
      appAutofocus
      name="masterPassword"
      class="tw-font-mono"
      required
      appInputVerbatim
    />
    <button
      type="button"
      bitIconButton
      bitSuffix
      bitPasswordInputToggle
      [(toggled)]="showPassword"
    ></button>
  </bit-form-field>

  <div class="tw-flex tw-flex-col tw-space-y-3">
    <button type="submit" bitButton bitFormButton buttonType="primary" block>
      {{ "unlock" | i18n }}
    </button>

    <p class="tw-text-center">{{ "or" | i18n }}</p>

    @if (showBiometricsSwap()) {
      <button
        type="button"
        bitButton
        bitFormButton
        buttonType="secondary"
        [disabled]="!biometricsAvailable()"
        block
        (click)="swapToBiometrics.emit()"
      >
        <span> {{ biometricUnlockBtnText() | i18n }}</span>
      </button>
    }

    @if (showPinSwap()) {
      <button
        type="button"
        bitButton
        bitFormButton
        buttonType="secondary"
        block
        (click)="swapToPin.emit()"
      >
        {{ "unlockWithPin" | i18n }}
      </button>
    }

    <bit-unlock-via-prf
      [formButton]="true"
      (unlockSuccess)="onPrfUnlockSuccess($event)"
    ></bit-unlock-via-prf>

    <button type="button" bitButton bitFormButton block (click)="logOut.emit()">
      {{ "logOut" | i18n }}
    </button>
  </div>
</form>
