{% extends "two_factor/_base_focus.html" %}
{% load i18n %}
{% load static %}

{% block content %}
  <h1>{% trans "Enable Two-Factor Authentication" %}</h1>
  {% if verified and wizard.steps.current == 'generator' %}
    <form class="horizontal-view help">
      <div class="explanation"
           role="group"
           aria-label="explanation qrcode generator">
        <p>
          {% blocktrans trimmed %}
            To start using a token generator, please use your
            smartphone to scan the QR code below or use the setup key. 
            For example, use GoogleAuthenticator. 
            Then, enter the token generated by the app.
        {% endblocktrans %}
        </p>
      </div>
      <fieldset>
        <div>
          <label>{% translate 'QR code' %}</label>
          <img class="qr-code-image" src="{{ QR_URL }}" alt="QR Code"/>
        </div>
        <div>
          <label>{% translate 'Setup key' %}</label>
          <input id="totp-input" type="text" value="{{ secret_key }}"/>
          <p class="explanation"
             data-open-label="Explanation of the secret key."
             data-close-label="Close explanation of the secret key">
            {% blocktrans trimmed %}
             The secret key is a 32 characters represenation of the QR code.
             There are 2 options to setup the two factor authtentication. 
             You can scan the QR code above or you can insert this key 
             using the secret key option of the authenticator app.
          {% endblocktrans %}
          </p>
        </div>
      </fieldset>
    </form>
    <form action="" method="post" class="horizontal-view help">
      {% csrf_token %}
      {% include "two_factor/_wizard_forms.html" with step=wizard.steps.current %}
      {# hidden submit button to enable [enter] key #}
      <input type="submit" value="" class="d-none"/>
      {% include "two_factor/_wizard_actions.html" with step=wizard.steps.current %}
    </form>
  {% else %}
    <p>
      {% blocktrans trimmed %}The current user has not been verified by a system administrator
            yet.{% endblocktrans %}
    </p>
  {% endif %}
{% endblock %}
