<div id="login-page">
  <div class="login-header">
    <a
      href="#"
      appStopClick
      (click)="settings()"
      class="environment-urls-settings-icon"
      attr.aria-label="{{ 'settings' | i18n }}"
    >
      <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
      {{ "settings" | i18n }}
    </a>
  </div>
  <form
    id="login-page"
    #form
    (ngSubmit)="submit()"
    [appApiAction]="formPromise"
    attr.aria-hidden="{{ showingModal }}"
  >
    <div id="content" class="content">
      <img class="logo-image" alt="Bitwarden" />
      <p class="lead">{{ "loginOrCreateNewAccount" | i18n }}</p>
      <div class="box last">
        <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
              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">
              <a
                class="row-btn"
                href="#"
                appStopClick
                appBlurClick
                role="button"
                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                (click)="togglePassword()"
              >
                <i
                  class="bwi bwi-lg"
                  aria-hidden="true"
                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                ></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="box last" [hidden]="!showCaptcha()">
        <div class="box-content">
          <div class="box-content-row">
            <iframe id="hcaptcha_iframe" height="80"></iframe>
          </div>
        </div>
      </div>
      <div class="buttons with-rows">
        <div class="buttons-row">
          <button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
            <b [hidden]="form.loading"
              ><i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "logIn" | i18n }}</b
            >
            <i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
          </button>
          <a routerLink="/register" class="btn block">
            <i class="bwi bwi-pencil-square" aria-hidden="true"></i> {{ "createAccount" | i18n }}
          </a>
        </div>
        <div class="buttons-row">
          <a (click)="launchSsoBrowser('desktop', 'bitwarden://sso-callback')" class="btn block">
            <i class="bwi bwi-bank" aria-hidden="true"></i> {{ "enterpriseSingleSignOn" | i18n }}
          </a>
        </div>
      </div>
      <div class="sub-options">
        <a routerLink="/hint">{{ "getMasterPasswordHint" | i18n }}</a>
      </div>
    </div>
  </form>
</div>
<ng-template #environment></ng-template>
