{% extends "base.html" %}
{% block content %}
<div class="profiles">

  {# include template "patterns/basics/headings/sp_variations/heading.html" #}
    {% trans "Forgot PIN" as headingtext %}
    {% with type="component" htmltag="h1" title=headingtext %}
      <div class="heading heading__{{type}} {{extraclass}}">
        <{{htmltag}}>{{title}}</{{htmltag}}>
      </div>
    {% endwith %}
  {# end include template #}

  <form method="post" action="{% url 'molo.profiles:forgot_password' %}" class="profiles__form" novalidate>
  {% 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 %}
  {% for field in form %}
  <fieldset>
      {% if forloop.counter == 2 %}

        {# include template "patterns/basics/headings/sp_variations/heading.html" #}
          {% trans "Security questions" as headingtext %}
          {% with type="micro" htmltag="h3" title=headingtext %}
            <div class="heading heading__{{type}} {{extraclass}}">
              <{{htmltag}}>{{title}}</{{htmltag}}>
            </div>
          {% endwith %}
        {# end include template #}

        <p class="helptext">{% trans "Please answer the following security question." %}</p>
      {% endif %}
    <div class="input-group">
      {% trans field.label_tag %}
      {{ field }}
    </div>
  </fieldset>
  {% endfor %}
  <button type="submit" class="call-to-action__button call-to-action__button--primary">{% trans "Forgot PIN" %}</button>
  </form>
</div>
{% endblock %}