<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
  <header>
    <div class="left">
      <a routerLink="/home">{{ "cancel" | i18n }}</a>
    </div>
    <h1 class="center">
      <span class="title">{{ "appName" | i18n }}</span>
    </h1>
    <div class="right">
      <button type="submit" appBlurClick [disabled]="form.loading">
        <span [hidden]="form.loading">{{ "login" | i18n }}</span>
        <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
      </button>
    </div>
  </header>
  <content>
    <div class="box">
      <div class="box-content">
        <div class="box-content-row" appBoxRow>
          <label for="email">{{ "emailAddress" | i18n }}</label>
          <input
            id="email"
            type="text"
            name="Email"
            [(ngModel)]="email"
            required
            inputmode="email"
            appInputVerbatim="false"
          />
        </div>
        <div class="box-content-row box-content-row-flex" appBoxRow>
          <div class="row-main">
            <label for="masterPassword">{{ "masterPass" | i18n }}</label>
            <input
              id="masterPassword"
              type="{{ showPassword ? 'text' : 'password' }}"
              name="MasterPassword"
              class="monospaced"
              [(ngModel)]="masterPassword"
              required
              appInputVerbatim
            />
          </div>
          <div class="action-buttons">
            <button
              type="button"
              class="row-btn"
              appStopClick
              appBlurClick
              appA11yTitle="{{ 'toggleVisibility' | i18n }}"
              (click)="togglePassword()"
              [attr.aria-pressed]="showPassword"
            >
              <i
                class="bwi bwi-lg"
                [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                aria-hidden="true"
              ></i>
            </button>
          </div>
        </div>
        <div class="box-content-row" [hidden]="!showCaptcha()">
          <iframe id="hcaptcha_iframe" height="80"></iframe>
        </div>
      </div>
    </div>
    <p class="text-center">
      <a routerLink="/hint">{{ "getMasterPasswordHint" | i18n }}</a>
    </p>
  </content>
</form>
