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

{% block content %}
  <div class="heading">
    <h1 class="heading__profiles">{% trans "Forgot PIN" %}</h1>
  </div>
  <div class="profiles">
  <form method="post" action="{% url 'molo.profiles:forgot_password' %}" class="profiles__form">
  {% csrf_token %}

    {% if form.errors %}
      <ul class="error-list">
      {% for key, errors in form.errors.items %}
          {% for error in errors %}
              <li class="error-list__item error">{% trans error %}</li>
          {% endfor %}
      {% endfor %}
    </ul>
    {% endif %}
    <fieldset>
    {% for field in form %}
      <label>{% trans field.label_tag %}</label>
      {{ field }}
      {% if forloop.counter == 1 %}
          <h4 class="heading heading--feeback-title">{% trans "Security question" %}</h4>
          <p>{% trans "Please answer the following security question." %}</p>
        {% endif %}
      {% endfor %}
    </fieldset>

      <input type="submit" value='{% trans "Forgot PIN" %}' class="call-to-action__button call-to-action__button--primary" />
  </form>
</div>
{% endblock %}
