<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></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)="activeUnlockOption.set(UnlockOption.Biometrics)"
      >
        <span> {{ biometricUnlockBtnText() | i18n }}</span>
      </button>
    }

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

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