{% extends "registration/base.html" %}

{% load i18n form_tags %}

{% block main_content %}
  <div class="login-box">
    <h2>{% translate "Forgot password?" %}</h2>
    <form method="post" style="margin-top: 20px">
      {% csrf_token %}
      <div class="col-sm-offset-4 col-sm-5">
        <div class="input-group{% if form.code.errors %} error{% endif %}">
          <label for="id_code">{{ form.code.label }} *</label>
          {{ form.code }}
          {% if form.code.errors %}
            <p class="error-message">
              {% for error in form.code.errors %}
                {{ error }}
              {% endfor %}
            </p>
          {% endif %}
          <p class="help-block">
            {% blocktrans trimmed %}
              Enter the code you've just received by SMS
            {% endblocktrans %}
          </p>
        </div>
        <button type="submit" class="btn btn-primary">{% trans "Submit" %}</button>
        <div class="footer">
          <a id="resend_code" href="{% url 'password_reset_resend_code' %}">
            {% trans "Resend code" %}
          </a>
        </div>
      </div>
    </form>
  </div>
{% endblock %}

{% block extra_js %}
  <script type="text/javascript">
  document.addEventListener('DOMContentLoaded', () => {
    const button = document.querySelector('#resend_code')
    button.addEventListener('click', async (event) => {
      event.preventDefault();
      await fetch(event.target.href);
      alert('{% translate "The code has been sent again" %}');
    })
  });
  </script>
{% endblock %}
