<form [bitSubmit]="submit" [formGroup]="formGroup">
  <div [ngClass]="{ 'tw-hidden': loginUiState !== LoginUiState.EMAIL_ENTRY }">
    <!-- Email Address input -->
    <bit-form-field>
      <bit-label>{{ "emailAddress" | i18n }}</bit-label>
      <input
        id="email"
        type="email"
        formControlName="email"
        bitInput
        appAutofocus
        data-testid="login-email-input"
        (input)="onEmailInput($event)"
        (keyup.enter)="ssoRequired ? handleSsoClick() : continuePressed()"
      />
    </bit-form-field>

    <!-- Remember Email input -->
    <bit-form-control>
      <input
        type="checkbox"
        formControlName="rememberEmail"
        data-testid="login-remember-email"
        (input)="onRememberEmailInput($event)"
        bitCheckbox
      />
      <bit-label>{{ "rememberEmail" | i18n }}</bit-label>
    </bit-form-control>

    <div class="tw-grid tw-gap-3">
      <!-- Continue button -->
      <button
        type="button"
        bitButton
        block
        buttonType="primary"
        data-testid="login-continue-button"
        (click)="continuePressed()"
        [bitTooltip]="ssoRequired ? ('yourOrganizationRequiresSingleSignOn' | i18n) : ''"
        [addTooltipToDescribedby]="ssoRequired"
        [disabled]="ssoRequired"
      >
        {{ "continue" | i18n }}
      </button>

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

      <!-- Button to Login with Passkey -->
      <ng-container *ngIf="isLoginWithPasskeySupported()">
        <button
          type="button"
          bitButton
          block
          buttonType="secondary"
          data-testid="login-with-passkey-button"
          (click)="handleLoginWithPasskeyClick()"
          [bitTooltip]="ssoRequired ? ('yourOrganizationRequiresSingleSignOn' | i18n) : ''"
          [addTooltipToDescribedby]="ssoRequired"
          [disabled]="ssoRequired"
        >
          <bit-icon name="bwi-passkey" class="tw-mr-1"></bit-icon>
          {{ "logInWithPasskey" | i18n }}
        </button>
      </ng-container>

      <!-- Button to Login with SSO -->
      <button
        type="button"
        bitButton
        block
        [buttonType]="ssoRequired ? 'primary' : 'secondary'"
        data-testid="login-sso-button"
        (click)="handleSsoClick()"
      >
        <bit-icon name="bwi-provider" class="tw-mr-1"></bit-icon>
        {{ "useSingleSignOn" | i18n }}
      </button>
    </div>
  </div>

  <div [ngClass]="{ 'tw-hidden': loginUiState !== LoginUiState.MASTER_PASSWORD_ENTRY }">
    <!-- Master Password input -->
    <bit-form-field class="!tw-mb-1">
      <bit-label>{{ "masterPass" | i18n }}</bit-label>
      <input
        id="masterPassword"
        type="password"
        autocomplete="current-password"
        formControlName="masterPassword"
        bitInput
        data-testid="login-master-password-input"
        #masterPasswordInputRef
      />
      <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
    </bit-form-field>

    <!-- Link to Password Hint page - doesn't use bit-hint so that it doesn't get hidden on input validation errors -->
    <a bitLink routerLink="/hint" (click)="goToHint()" class="tw-inline-block tw-mb-4">
      {{ "hint" | i18n }}
    </a>

    <div class="tw-grid tw-gap-3">
      <!-- Submit button to Login with Master Password -->
      <button
        type="submit"
        bitButton
        bitFormButton
        block
        buttonType="primary"
        data-testid="login-submit-button"
      >
        {{ "logIn" | i18n }}
      </button>

      <!-- Button to Login with Device -->
      <ng-container *ngIf="isKnownDevice">
        <div class="tw-text-center">{{ "or" | i18n }}</div>

        <button
          type="button"
          bitButton
          block
          buttonType="secondary"
          data-testid="login-with-device-button"
          (click)="startAuthRequestLogin()"
        >
          <bit-icon name="bwi-mobile"></bit-icon>
          {{ "loginWithDevice" | i18n }}
        </button>
      </ng-container>

      <!-- Back button -->
      <ng-container *ngIf="shouldShowBackButton()">
        <button
          type="button"
          bitButton
          block
          buttonType="secondary"
          data-testid="login-back-button"
          (click)="backButtonClicked()"
        >
          {{ "back" | i18n }}
        </button>
      </ng-container>
    </div>
  </div>
</form>
