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

{% block main_content %}
<div class="tfa-panel">
  <h2 class="hd fw-normal mb-4">{% trans "Backup Tokens" %}</h2>
  <div class="con">
    <p>{% blocktrans %}Backup tokens can be used when your primary and backup
    phone numbers aren't available. The backup tokens below can be used
    for login verification. If you've used up all your backup tokens, you
    can generate a new set of backup tokens. Only the backup tokens shown
    below will be valid.{% endblocktrans %}</p>

    {% if device.token_set.count %}
    <ul class="two-factor-auth-backup-token-list">
      {% for token in device.token_set.all %}
      <li>{{ token.token }}</li>
      {% endfor %}
    </ul>
    <p>{% blocktrans %}Print these tokens and keep them somewhere safe.{% endblocktrans %}</p>
    {% else %}
    <p>{% trans "You don't have any backup codes yet." %}</p>
    {% endif %}

    <form method="post" class="mt-5">{% csrf_token %}{{ form }}
      <button type="submit" class="btn btn-primary btn-block">{% trans "Generate Tokens" %}</button>
      <a href="{{ SITE_ROOT }}profile/" class="btn btn-secondary btn-block mt-3">{% trans "Back" %}</a>
    </form>
  </div>
</div>
{% endblock %}
