{% extends "account/base.html" %}
{% load i18n crispy_forms_tags %}

{% block content %}
<h3>
  {% trans "Setup Two-Factor Authentication" %}
</h3>

<h4>
  {% trans 'Step 1' %}:
</h4>

<p>
  {% trans 'Scan the QR code below with a token generator of your choice (for instance Google Authenticator).' %}
</p>

<div class="bg-qr-code rounded">
<img src="{{ qr_code_url }}" alt="{% trans 'QR Code' %}" class="mx-auto d-block"/>
</div>
<br>

<h4>
  {% trans 'Step 2' %}:
</h4>

<p>
  {% trans 'Input a token generated by the app:' %}
</p>

<form method="post">
  {% csrf_token %}
  {{ form|crispy }}

  <hr>
  <div class='btn-group float-right' role='group'>
    <button type="submit" class="btn btn-primary btn-block w-100">
      <span class='fas fa-check-circle'></span> {% trans 'Verify' %}
    </button>
  </div>
</form>

<div>
  <a type='button' href="{% url 'settings' %}" class="btn btn-secondary">
    <span class='fas fa-undo-alt'></span> {% trans "Return to Site" %}
  </a>
</div>
{% endblock content %}
