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

{% block browser_title %}
  {% trans "Backup Tokens" %}
{% endblock %}

{% block content %}
  <h1>{% block title %}{% trans "Backup Tokens" %}{% endblock %}</h1>

  <div class="alert info">
    <p>
      <i class="material-icons iconify left" data-icon="mdi:information-outline"></i>
      {% 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>
  </div>

  {% if device.token_set.count %}
    <ul class="collection">
      {% for token in device.token_set.all %}
        <li class="collection-item">{{ token.token }}</li>
      {% endfor %}
    </ul>
    <div class="alert warning">
      <p>
        <i class="material-icons iconify left" data-icon="mdi:alert-outline"></i>
        {% blocktrans %}
          Print these tokens and keep them somewhere safe.
        {% endblocktrans %}
      </p>
    </div>
  {% else %}
    <p class="flow-text">{% trans "You don't have any backup codes yet." %}</p>
  {% endif %}

  <form method="post">{% csrf_token %}{{ form }}
    <a href="{% url 'two_factor:profile' %}" class="btn primary waves-effect waves-light">
      <i class="material-icons iconify left" data-icon="mdi:arrow-left"></i>
      {% trans "Back to Account Security" %}
    </a>
    <button class="btn green waves-effect waves-light" type="submit">
      <i class="material-icons iconify left" data-icon="mdi:key-outline"></i>
      {% trans "Generate Tokens" %}
    </button>
  </form>
{% endblock %}
