{% extends "base.html" %}

{% block content %}
<div class="profiles">
  <div class="profiles__wrapper">
    <div class="heading heading--hero">
      <h1 class="heading__component">{% trans "Forgot PIN" %}</h1>
    </div>
    <div class="profiles__inner">
      <form method="post" action="{% url 'molo.profiles:forgot_password' %}" class="profiles__form" novalidate>
      {% csrf_token %}
        <fieldset>
        {% if form.errors or form.non_field_errors %}
          {% if form.non_field_errors %}
              {% for error in form.non_field_errors %}
                <p class="error-list__item">{{ error }}</p>
              {% endfor %}
          {% endif %}
        {% endif %}
        {% for field in form %}
          <label>{% trans field.label_tag %}</label>
          {{ field }}
          {{ field.errors}}
          {% if forloop.counter == 1 %}
            <h2 class="heading__headline">{% trans "Security question" %}:</h2>
            <p class="heading__micro">
              {% trans "Please answer the following security question." %}
            </p>
            {% endif %}
          {% endfor %}
        </fieldset>
        <div class="call-to-action--group">
          <button type="submit" class="call-to-action__button call-to-action__button--primary">{% trans "Forgot PIN" %}</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}