{% extends "base.html" %}
{% load i18n %}

{% block main_content %}
<div class="tfa-panel text-center">
    <h2 class="hd fw-normal mb-4">{% trans "Enable Two-Factor Authentication" %}</h2>
    <div class="con">
  {% if wizard.steps.current == 'welcome' %}
    <p>You are about to take your account security to the
        next level. Follow the steps in this wizard to enable two-factor
        authentication.</p>
  {% elif wizard.steps.current == 'method' %}
    <p>Please select which authentication method you would like to use.</p>
  {% elif wizard.steps.current == 'generator' %}
    <p>{% blocktrans %}To start using a token generator, please use your
        smartphone to scan the QR code below. For example, use Google
        Authenticator. Then, enter the token generated by the app.
        {% endblocktrans %}</p>
    <img src="{{ QR_URL }}" alt="QR Code" class="qr-code-image" />
  {% elif wizard.steps.current == 'sms' %}
    <p>Please enter the phone number you wish to receive the
      text messages on. This number will be validated in the next step.
      </p>
  {% elif wizard.steps.current == 'call' %}
    <p>Please enter the phone number you wish to be called on.
      This number will be validated in the next step. </p>
  {% elif wizard.steps.current == 'validation' %}
    {% if challenge_succeeded %}
      {% if device.method == 'call' %}
        <p>We are calling your phone right now, please enter the digits you hear.</p>
      {% elif device.method == 'sms' %}
        <p>We sent you a text message, please enter the tokens we sent.</p>
      {% endif %}
    {% else %}
      <p class="alert alert-warning" role="alert">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.</p>
    {% endif %}
  {% elif wizard.steps.current == 'yubikey' %}
    <p>To identify and verify your YubiKey, please insert a
      token in the field below. Your YubiKey will be linked to your
      account.</p>
  {% endif %}

  <form action="" method="post">{% csrf_token %}
    {% include "two_factor/_wizard_forms.html" %}
    {% include "two_factor/_wizard_actions.html" %}
  </form>
    </div>
</div>
{% endblock %}

{% block extra_script %}
<script type="text/javascript">
$('input[type="text"], input[type="number"]', $('.tfa-panel')).trigger('focus');
$('#id_generator-token').prev().addClass('d-none');
$('#id_generator-token').addClass('form-control m-0').attr('placeholder', '{% trans "Token" %}');
</script>
{% endblock %}
