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

{% block browser_title %}
  {% trans "Account Security" %}
{% endblock %}

{% block content %}
  <h1>
    {% block title %}{% trans "Account Security" %}{% endblock %}
  </h1>

  {% if default_device %}
    {% if default_device_type == 'TOTPDevice' %}
      <p>{% trans "Tokens will be generated by your token generator." %}</p>
    {% elif default_device_type == 'PhoneDevice' %}
      <p>{% blocktrans with primary=default_device|device_action %}Primary method: {{ primary }}{% endblocktrans %}</p>
    {% elif default_device_type == 'RemoteYubikeyDevice' %}
      <p>{% blocktrans %}Tokens will be generated by your YubiKey.{% endblocktrans %}</p>
    {% endif %}

    {% if available_phone_methods %}
      <h2>{% trans "Backup Phone Numbers" %}</h2>
      <p>{% blocktrans %}If your primary method is not available, we are able to
        send backup tokens to the phone numbers listed below.{% endblocktrans %}</p>
      <ul class="collection">
        {% for phone in backup_phones %}
          <li class="collection-item">
            {{ phone|device_action }}
            <form method="post" action="{% url 'two_factor:phone_delete' phone.id %}"
                  onsubmit="return confirm('Are you sure?')">
              {% csrf_token %}
              <button class="btn-flat red-text waves-effect waves-red" type="submit">{% trans "Unregister" %}</button>
            </form>
          </li>
        {% endfor %}
      </ul>
      <p>
        <a href="{% url 'two_factor:phone_create' %}" class="btn green waves-effect waves-light">
          <i class="material-icons left">add</i>
          {% trans "Add Phone Number" %}
        </a>
      </p>
    {% endif %}

    <h2>{% trans "Backup Tokens" %}</h2>
    <p>
      {% blocktrans %}If you don't have any device with you, you can access
        your account using backup tokens.{% endblocktrans %}
      {% blocktrans count counter=backup_tokens %}
        You have only one backup token remaining.
      {% plural %}
        You have {{ counter }} backup tokens remaining.
      {% endblocktrans %}
    </p>
    <p>
      <a href="{% url 'two_factor:backup_tokens' %}" class="btn primary waves-effect waves-light">
        <i class="material-icons left">vpn_key</i>
        {% trans "Show Codes" %}
      </a>
    </p>

    <h2>{% trans "Disable Two-Factor Authentication" %}</h2>
    <p>
      {% blocktrans %}
        However we strongly discourage you to do so, you can
        also disable two-factor authentication for your account.
      {% endblocktrans %}
    </p>
    <p>
      <a class="btn red waves-effect waves-light" href="{% url 'two_factor:disable' %}">
        <i class="material-icons left">power_settings_new</i>
        {% trans "Disable Two-Factor Authentication" %}
      </a>
    </p>
  {% else %}
    <p class="flow-text">
      {% blocktrans %}
        Two-factor authentication is not enabled for your
        account. Enable two-factor authentication for enhanced account
        security.
      {% endblocktrans %}
    </p>

    <p>
      <a href="{% url 'two_factor:setup' %}" class="green btn waves-effect waves-light ">
        {% trans "Enable Two-Factor Authentication" %}
      </a>
    </p>
  {% endif %}
{% endblock %}
