<div id="login-decryption-options-page">
  <div id="content" class="content">
    <img class="logo-image" alt="Bitwarden" />

    <div class="container loading-spinner" *ngIf="loading">
      <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
    </div>

    <ng-container *ngIf="!loading">
      <h1 id="heading">{{ "loginInitiated" | i18n }}</h1>
      <h6
        *ngIf="data.state == State.ExistingUserUntrustedDevice"
        id="subHeading"
        class="standard-bottom-margin"
      >
        {{ "deviceApprovalRequired" | i18n }}
      </h6>

      <form id="rememberDeviceForm" class="standard-bottom-margin" [formGroup]="rememberDeviceForm">
        <div class="checkbox">
          <label for="rememberDevice">
            <input
              id="rememberDevice"
              type="checkbox"
              name="rememberDevice"
              formControlName="rememberDevice"
            />
            {{ "rememberThisDevice" | i18n }}
          </label>
        </div>
        <span id="rememberThisDeviceHintText">{{ "uncheckIfPublicDevice" | i18n }}</span>
      </form>

      <div *ngIf="data.state == State.ExistingUserUntrustedDevice" class="buttons with-rows">
        <div class="buttons-row" *ngIf="data.showApproveFromOtherDeviceBtn">
          <button (click)="approveFromOtherDevice()" type="button" class="btn primary block">
            {{ "approveFromYourOtherDevice" | i18n }}
          </button>
        </div>
        <div class="buttons-row" *ngIf="data.showReqAdminApprovalBtn">
          <button (click)="requestAdminApproval()" type="button" class="btn block">
            {{ "requestAdminApproval" | i18n }}
          </button>
        </div>
        <div class="buttons-row" *ngIf="data.showApproveWithMasterPasswordBtn">
          <button (click)="approveWithMasterPassword()" type="button" class="btn block">
            {{ "approveWithMasterPassword" | i18n }}
          </button>
        </div>
      </div>

      <div *ngIf="data.state == State.NewUser" class="buttons with-rows">
        <div class="buttons-row">
          <button (click)="createUser()" type="button" class="btn block">
            {{ "continue" | i18n }}
          </button>
        </div>
      </div>

      <div style="text-align: center">
        <p class="no-margin">{{ "loggingInAs" | i18n }} {{ data.userEmail }}</p>
        <a [routerLink]="[]" (click)="logOut()">{{ "notYou" | i18n }}</a>
      </div>
    </ng-container>
  </div>
</div>
