<form class="form-login"
  (ngSubmit)="submit()"
  [formGroup]="form" novalidate>
  <input [attr.aria-label]="'login.form.email' |translate"
    autocomplete="username"
    autofocus
    class="form-control form-control-lg position-relative"
    formControlName="email"
    placeholder="{{'login.form.email' | translate}}"
    required
    type="email"
    [attr.data-test]="'email' | dsBrowserOnly">
  <input [attr.aria-label]="'login.form.password' |translate"
    autocomplete="current-password"
    class="form-control form-control-lg position-relative mb-3"
    placeholder="{{'login.form.password' | translate}}"
    formControlName="password"
    required
    type="password"
    [attr.data-test]="'password' | dsBrowserOnly">
  @if ((error | async) && hasError) {
    <div class="alert alert-danger" role="alert"
    @fadeOut>{{ (error | async) | translate }}</div>
  }
  @if ((message | async) && hasMessage) {
    <div class="alert alert-info" role="alert"
    @fadeOut>{{ (message | async) | translate }}</div>
  }

  <button class="btn btn-lg btn-primary w-100" type="submit" [attr.data-test]="'login-button' | dsBrowserOnly"
    [dsBtnDisabled]="!form.valid" role="button" tabindex="0"><i class="fas fa-sign-in-alt"></i> {{"login.form.submit" | translate}}</button>
  </form>

  @if (canShowDivider$ | async) {
    <div class="mt-2">
      @if (canRegister$ | async) {
        <a class="dropdown-item" [routerLink]="[getRegisterRoute()]"
        [attr.data-test]="'register' | dsBrowserOnly" tabindex="0">{{"login.form.new-user" | translate}}</a>
      }
      @if (canForgot$ | async) {
        <a class="dropdown-item" [routerLink]="[getForgotRoute()]"
        [attr.data-test]="'forgot' | dsBrowserOnly" tabindex="0">{{"login.form.forgot-password" | translate}}</a>
      }
    </div>
  }
