{% extends "layout/immersive.html" %}
{% block content %}
<div class="row"><div class="columns">
  <div class="immersive--content immersive--center">
    <h1>{{ _('Confirm Access') }}</h1>
    <form method="POST">
      {% if UserContext.authn %}
      <div class="row sudo-div confirm-div nojs--hide" data-sudo="authn"><div class="columns">
        <input value="{{ _('Use Authenticator') }}" class="inverse expanded rounded primary button" name="webauthn_verify">
        <input type="hidden" name="authnChallenge" value="">
      </div></div>
      {% endif %}
      {% if UserContext.tfa %}
      <div class="row sudo-div" data-sudo="tfa" style="display:none"><div class="columns">
        <label class="inverse material textbox">
          {{ _('Two Factor Authentication Code') }}
          <input name="tfa" type="number">
        </label>
      </div></div>
      {% endif %}
      <div class="row sudo-div" data-sudo="password"><div class="columns">
        <label class="inverse material textbox">
          {{ _('Password') }}
          <input name="password" type="password">
        </label>
      </div></div>
      <div class="row confirm-div"><div class="columns">
        <div class="text-center">
          <input value="{{ _('Confirm') }}" class="inverse expanded rounded primary button" name="confirm">
        </div>
      </div></div>
    </form>
    <div class="row"><div class="columns">
      <div class="text-center supplementary inverse typo">
        <p>{{ _('Tip: You are entering sudo mode.')|safe }}</p>
        <p>{{ _("After you've performed a sudo-protected action, you'll only be asked to re-authenticate again after a few hours of inactivity.") }}</p>
      </div>
    </div></div>
    {% if UserContext.authn or UserContext.tfa %}
    <br>
    <div class="row nojs--hide"><div class="columns">
      <div class="supplementary inverse typo">
        <p><strong>{{ _('Or use other methods:') }}</strong></p>
        <ol>
          {% if UserContext.authn %}<li class="sudo-switch" data-sudo="authn"><a>{{ _('Use Authenticator') }}</a></li>{% endif %}
          {% if UserContext.tfa %}<li class="sudo-switch" data-sudo="tfa"><a>{{ _('Use TFA Code') }}</a></li>{% endif %}
          <li class="sudo-switch" data-sudo="password" style="display:none"><a>{{ _('Use Password') }}</a></li>
        </ol>
      </div>
    </div></div>
    {% endif %}
  </div>
</div></div>
{% endblock %}