{% load i18n %}

<h1>{% trans "Email authentication" %}</h1>

<div>
  <form method="post" autocomplete="off" action="">
    {% csrf_token %}
    {% if not code_sent %}
      <p>
        {% blocktrans trimmed %}
          To verify your identity, 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>
      {% if device_can_be_trusted %}
        {% include "authentic2_auth_trusted_device/form_input.html" %}
      {% endif %}

      <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>