{% extends "authentic2/base-page.html" %}
{% load i18n %}

{% block content %}
  <h1>{% trans "Email authentication activation" %}</h1>

  <div>
    <form method="post" autocomplete="off" action="">
      {% csrf_token %}
      {% if not code_sent %}
        <p>
          {% blocktrans trimmed %}
            To enable this factor, we need to send you a one-time code by email.
          {% endblocktrans %}
        </p>
        <button class="submit-button" name="{{ submit_name }}" value="send">
          {% trans "Send me the code by email" %}
        </button>

      {% else %}

        {{ form.as_p }}
        <button class="submit-button" name="{{ submit_name }}" value="verify" id="resend-button">
          {% trans "Continue" %}
        </button>

        <div id="resend-code" style="margin-top: 2em; font-size: 0.8em;"
             data-delay-before-sending-new-code="{{ delay_before_sending_new_code }}"
             data-message-with-delay="{% blocktrans trimmed %}
                                        If you did not receive this email, you can request another one by clicking the button below in {}.
                                      {% endblocktrans %}"
             data-message-without-delay="{% blocktrans trimmed %}
                                           If you did not receive this email, you can request another one by clicking the button below.
                                         {% endblocktrans %}">
          <p>
            {% blocktrans trimmed %}
              If you did not receive this email, you can request another one by clicking the button below.
            {% endblocktrans %}
          </p>
          <button class="submit-button" name="{{ submit_name }}" value="send">
            {% trans "Send me a new code by email" %}
          </button>
        </div>

        <script src="{% url 'a2-auth-email-js-catalog' %}"></script>
        <script type="text/javascript">
          div = $("#resend-code");
          message = div.find('p');
          button = div.find('button');
          delay = div.data("delay-before-sending-new-code");
          if (delay > 0) {
            button.attr("disabled", "disabled");
            message_with_delay = div.data("message-with-delay");
            message_without_delay = div.data("message-without-delay");
            update_message = function() {
              if (delay > 0) {
                message.text(message_with_delay.replace("{}", delay + " " + ngettext("second", "seconds", delay)));
                delay -= 1;
                setTimeout(update_message, 1000);
              }
              else {
                message.text(message_without_delay);
                button.removeAttr("disabled");
              }
            }
            update_message();
          }
        </script>
      {% endif %}
    </form>
  </div>
{% endblock %}