{% extends "base.html" %}

{% block media %}
  <style>
    #login-panel-2fa {
      position: relative;
      margin: 5em auto auto -10em;
      top: 40%;
      left: 50%;
    }

    #totp-token-container {
      margin: 0.5em 0;
    }

    #id_totp_token {
      width: 100%;
    }

    .totp-panel-message {
      width: 300px;
    }
  </style>
{% endblock %}

{% block body %}
  <div id="login-panel-2fa">
    <form action="" method="post" class="form-area">
      {% csrf_token %}
      {% if form.errors %}
        <div id="form-errors">
          <p class="error">{{ _('Invalid Two Factor Authentication token.') }}</p>
        </div>
      {% endif %}

      <div><label class="inline-header grayed">{{ _('Enter the 6-digit code generated by your app:') }}</label></div>
      <div id="totp-token-container"><span class="fullwidth">{{ form.totp_token }}</span></div>
      <hr>
      <button style="float:right;" type="submit">{{ _('Login!') }}</button>
    </form>
    <p class="totp-panel-message">{{ _('If you lost your authentication device, please contact us at %(email)s.', email=SITE_ADMIN_EMAIL)|urlize }}</p>
  </div>
{% endblock %}