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

{% block extra_head %}
  {{ wizard.form.media.css }}
{% endblock %}

{% block content %}
  <h1>{% block title %}{% trans "Add Two-Factor Authentication Method" %}{% endblock %}</h1>

  {% if wizard.steps.current == 'welcome' %}
    <p class="flow-text">
      {% blocktrans %}
        You are about to take your account security to the
        next level. Follow the steps in this wizard to add
        a two-factor authentication method to your account.
      {% endblocktrans %}
    </p>
  {% elif wizard.steps.current == 'method' %}
    <p>
      {% blocktrans %}
        Please select which authentication method you would like to use:
      {% endblocktrans %}
    </p>
  {% elif wizard.steps.current == 'generator' %}
    <p>
      {% blocktrans %}
        To start using a code generator, please use your
        favourite two-factor authentication (TOTP) app to scan the QR code below.
        Then enter the token generated by the app.
      {% endblocktrans %}
    </p>
    <p>
      <img src="{{ QR_URL }}" alt="QR Code">
    </p>
  {% elif wizard.steps.current == 'sms' %}
    <p>
      {% blocktrans %}
        Please enter the phone number you wish to receive the
        text messages on. This number will be validated in the next step.
      {% endblocktrans %}
    </p>
  {% elif wizard.steps.current == 'call' %}
    <p>
      {% blocktrans %}
        Please enter the phone number you wish to be called on.
        This number will be validated in the next step.
      {% endblocktrans %}
    </p>
  {% elif wizard.steps.current == 'email' %}
    <p>
      {% blocktrans %}
        We sent you an email, please enter the token we sent.
      {% endblocktrans %}
    </p>
  {% elif wizard.steps.current == 'validation' %}
    {% if challenge_succeeded %}
      {% if device.method == 'call' %}
        <p>
          {% blocktrans %}
            We are calling your phone right now, please enter the digits you hear.
          {% endblocktrans %}
        </p>
      {% elif device.method == 'sms' %}
        <p>
          {% blocktrans %}
            We sent you a text message, please enter the code we sent.
          {% endblocktrans %}
        </p>
      {% endif %}
    {% else %}
      <figure class="alert warning">
        {% blocktrans %}
          We've encountered an issue with the selected authentication method. Please
          go back and verify that you entered your information correctly, try
          again, or use a different authentication method instead. If the issue
          persists, contact the site administrator.
        {% endblocktrans %}
      </figure>
    {% endif %}
  {% endif %}
  <form action="" method="post">
    {% csrf_token %}

    {% include "two_factor/_wizard_forms.html" %}

    {# hidden submit button to enable [enter] key #}
    <div style="margin-left: -9999px">
      <input type="submit" value=""/>
    </div>

    {% include "two_factor/_wizard_actions.html" %}
  </form>

  {{ wizard.form.media.js }}
{% endblock %}
