<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="loginApprovalTitle">
  <div class="modal-dialog modal-md" role="document">
    <div id="login-approval-page" class="modal-content">
      <div class="section-title">
        <p style="text-transform: uppercase">{{ "areYouTryingtoLogin" | i18n }}</p>
      </div>
      <div class="content">
        <div class="section">
          <h4>{{ "logInAttemptBy" | i18n : email }}</h4>
        </div>

        <div class="section">
          <h4 class="label">{{ "fingerprintPhraseHeader" | i18n }}</h4>
          <code>{{ fingerprintPhrase }}</code>
        </div>

        <div class="section">
          <h4 class="label">{{ "deviceType" | i18n }}</h4>
          <p>{{ authRequestResponse?.requestDeviceType }}</p>
        </div>

        <div class="section">
          <h4 class="label">{{ "ipAddress" | i18n }}</h4>
          <p>{{ authRequestResponse?.requestIpAddress }}</p>
        </div>

        <div class="section">
          <h4 class="label">{{ "time" | i18n }}</h4>
          <p>{{ requestTimeText }}</p>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="primary" (click)="approveLogin(true, true)">
          {{ "confirmLogIn" | i18n }}
        </button>
        <button type="button" (click)="approveLogin(false, true)">
          {{ "denyLogIn" | i18n }}
        </button>
      </div>
    </div>
  </div>
</div>
