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

{% block titletag %}{% translate "Add a new device for 2 factor authentication" %}{% endblock %}

{% block content %}
  {% translate "Secure your account" as prefs_str %}
  {% include "wagtailadmin/shared/header.html" with title=prefs_str %}

  <div class="nice-padding">
    <div class="help-block help-info">
      <p><strong>
        {% translate "To better protect your account, you will be asked for a security code in addition to your password when you log in." %}
      </strong>
      </p>

      <p>
        {% translate "This code is generated by an app on your phone and changes every 30 seconds." %}
      </p>

      <p>{% translate "You can use, for example:" %}</p>

      <ul>
        <li>Aegis Authenticator</li>
        <li>Bitwarden</li>
        <li>Google Authenticator</li>
        <li>Microsoft Authenticator</li>
      </ul>

      {% if not form.instance.confirmed %}
        <p>{% translate "To activate this option:" %}</p>

        <ol>
          <li>{% translate "Install an authenticator app on your phone." %}</li>
          <li>{% translate "Scan the QR code below." %}</li>
          <li>{% translate "Enter the code displayed in the app." %}</li>
        </ol>

        <p>
          <strong>{% translate "Important:" %}</strong>
          {% translate "If you lose your phone, you may no longer be able to access your account." %}
        </p>
      {% endif %}
    </div>

    <form action="" method="post" novalidate>
      {% csrf_token %}
      <ul class="fields">
        {% if not form.instance.confirmed %}
          <li>
            <div class="field char_field text_input">
              <label>{% translate "QR Code" %}</label>
              <div class="field-content">
                {% translate "QR code to configure two-factor authentication" as qrcode_alt %}
                <img src="{% url 'wagtail_2fa_device_qrcode' %}" alt="{{ qrcode_alt }}" />
                <p>{% translate "If you're unable to scan the QR code, please paste the following into your app:" %}</p>
                <ul class="listing">
                  <li>
                    <div class="row row-flush">
                      <div class="col2 title">
                        <h2>URL:</h2>
                      </div>
                      <div class="col10">
                        {% spaceless %}
                          <pre style="white-space:pre-wrap;overflow:auto;margin:0;padding:5px 0"><code style="padding:8px 0">{{ form.instance.config_url }}</code></pre>
                        {% endspaceless %}
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        {% endif %}

        {% for field in form %}
          <li>
            {% if field.name == "name" %}
              {% translate "Device name" as label_name %}
              {% translate "For example: Personal phone" as help_name %}
              {% include "wagtailadmin/shared/field.html" with field=field label_text=label_name help_text=help_name %}
            {% elif field.name == "otp_token" %}
              {% translate "Security code" as label_otp %}
              {% translate "Please enter the 6-digit code displayed in your application." as help_otp %}
              {% include "wagtailadmin/shared/field.html" with field=field label_text=label_otp help_text=help_otp %}
            {% elif field.name == "password" %}
              {% translate "Enter your password to confirm." as help_password %}
              {% include "wagtailadmin/shared/field.html" with field=field help_text=help_password %}
            {% else %}
              {% include "wagtailadmin/shared/field.html" with field=field %}
            {% endif %}
          </li>
        {% endfor %}

        <li class="submit">
          <a href="{% url 'wagtail_2fa_device_list' user.id %}"
             class="button button-secondary">{% translate "Cancel" %}</a>
          {% translate "Activate" as activate_label %}
          {% translate "Update" as update_label %}
          <input type="submit"
                 value="{% if form.instance.confirmed %}{{ update_label }}{% else %}{{ activate_label }}{% endif %}"
                 class="button" />
        </li>
      </ul>
    </form>
  </div>
{% endblock %}