<div class="login-with-device">
  <header>
    <h1 class="login-center">
      <span class="title">{{ "logIn" | i18n }}</span>
    </h1>
  </header>
  <div class="content login-page">
    <ng-container *ngIf="state == StateEnum.StandardAuthRequest">
      <div>
        <p class="lead">{{ "loginInitiated" | i18n }}</p>

        <div>
          <p>{{ "notificationSentDevice" | i18n }}</p>

          <p>
            {{ "fingerprintMatchInfo" | i18n }}
          </p>
        </div>

        <div>
          <b class="fingerprint-phrase-header">{{ "fingerprintPhraseHeader" | i18n }}</b>
          <p class="fingerprint-text">
            <code>{{ fingerprintPhrase }}</code>
          </p>
        </div>

        <div class="resend-notification" *ngIf="showResendNotification">
          <a (click)="startAuthRequestLogin()">{{ "resendNotification" | i18n }}</a>
        </div>

        <div class="footer">
          {{ "loginWithDeviceEnabledInfo" | i18n }}
          <a href="#" (click)="back()">{{ "viewAllLoginOptions" | i18n }}</a>
        </div>
      </div>
    </ng-container>

    <ng-container *ngIf="state == StateEnum.AdminAuthRequest">
      <div>
        <p class="lead">{{ "adminApprovalRequested" | i18n }}</p>

        <div>
          <p>{{ "adminApprovalRequestSentToAdmins" | i18n }}</p>
          <p>{{ "youWillBeNotifiedOnceApproved" | i18n }}</p>
        </div>

        <div>
          <b class="fingerprint-phrase-header">{{ "fingerprintPhraseHeader" | i18n }}</b>
          <p class="fingerprint-text">
            <code>{{ fingerprintPhrase }}</code>
          </p>
        </div>

        <div class="footer">
          {{ "troubleLoggingIn" | i18n }}
          <a routerLink="/login-initiated">{{ "viewAllLoginOptions" | i18n }}</a>
        </div>
      </div>
    </ng-container>
  </div>
</div>
