<ng-template #loading>
  <div class="tw-flex tw-items-center tw-justify-center" *ngIf="loading">
    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
  </div>
</ng-template>

<ng-container *ngIf="unlockOptions; else loading">
  <!-- Biometrics Unlock -->
  <ng-container
    *ngIf="unlockOptions.biometrics.enabled && activeUnlockOption === UnlockOption.Biometrics"
  >
    <button
      type="button"
      bitButton
      buttonType="primary"
      class="tw-mb-3"
      [disabled]="unlockingViaBiometrics"
      [loading]="unlockingViaBiometrics"
      block
      (click)="unlockViaBiometrics()"
    >
      <span> {{ biometricUnlockBtnText | i18n }}</span>
    </button>

    <div class="tw-flex tw-flex-col tw-space-y-3">
      <p class="tw-text-center tw-mb-0">{{ "or" | i18n }}</p>

      <ng-container *ngIf="unlockOptions.pin.enabled">
        <button
          type="button"
          bitButton
          buttonType="secondary"
          block
          (click)="activeUnlockOption = UnlockOption.Pin"
        >
          {{ "unlockWithPin" | i18n }}
        </button>
      </ng-container>

      <ng-container *ngIf="unlockOptions.masterPassword.enabled">
        <button
          type="button"
          bitButton
          buttonType="secondary"
          block
          (click)="activeUnlockOption = UnlockOption.MasterPassword"
        >
          {{ "unlockWithMasterPassword" | i18n }}
        </button>
      </ng-container>

      <button type="button" bitButton block (click)="logOut()">
        {{ "logOut" | i18n }}
      </button>
    </div>
  </ng-container>

  <!-- PIN Unlock -->
  <ng-container *ngIf="unlockOptions.pin.enabled && activeUnlockOption === UnlockOption.Pin">
    <form [bitSubmit]="submit" [formGroup]="formGroup">
      <bit-form-field>
        <bit-label>{{ "pin" | i18n }}</bit-label>
        <input
          type="password"
          formControlName="pin"
          bitInput
          appAutofocus
          name="pin"
          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>

        <ng-container *ngIf="unlockOptions.biometrics.enabled">
          <button
            type="button"
            bitButton
            bitFormButton
            buttonType="secondary"
            block
            (click)="activeUnlockOption = UnlockOption.Biometrics"
          >
            <span> {{ biometricUnlockBtnText | i18n }}</span>
          </button>
        </ng-container>

        <ng-container *ngIf="unlockOptions.masterPassword.enabled">
          <button
            type="button"
            bitButton
            bitFormButton
            buttonType="secondary"
            block
            (click)="activeUnlockOption = UnlockOption.MasterPassword"
          >
            {{ "unlockWithMasterPassword" | i18n }}
          </button>
        </ng-container>

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

  <!-- MP Unlock -->
  <ng-container
    *ngIf="
      unlockOptions.masterPassword.enabled && activeUnlockOption === UnlockOption.MasterPassword
    "
  >
    <form [bitSubmit]="submit" [formGroup]="formGroup">
      <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>

        <!-- [attr.aria-pressed]="showPassword" -->
      </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>

        <ng-container *ngIf="unlockOptions.biometrics.enabled">
          <button
            type="button"
            bitButton
            bitFormButton
            buttonType="secondary"
            block
            (click)="activeUnlockOption = UnlockOption.Biometrics"
          >
            <span> {{ biometricUnlockBtnText | i18n }}</span>
          </button>
        </ng-container>

        <ng-container *ngIf="unlockOptions.pin.enabled">
          <button
            type="button"
            bitButton
            bitFormButton
            buttonType="secondary"
            block
            (click)="activeUnlockOption = UnlockOption.Pin"
          >
            {{ "unlockWithPin" | i18n }}
          </button>
        </ng-container>

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