{% extends "base.html" %}
{% block content %}
<div class="profiles">
  <div class="profiles__wrapper">
    <div class="heading heading--hero">
      <h1 class="heading__component">{% trans "Change Pin" %}</h1>
    </div>
    <div class="profiles__inner">
      <form method="post" action="" class="profiles__form" novalidate>
      {% csrf_token %}
        {% 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 %}
        {% if messages %}
          <ul class="error-list">
            {% for message in messages %}
              <li class="error-list__item">==>{{ message }}</li>
            {% endfor %}
          </ul>
        {% endif %}
        <fieldset>
          <label for="id_old_pin">{% trans "Old pin" %}</label>
          {{form.old_password}}
          {{form.old_password.errors}}
          <span class="input-hint">{% trans "(e.g. 2086)" %}</span>
        </fieldset>

        <fieldset>
          <label for="id_new_password">{% trans "New pin" %}</label>
          {{form.new_password}}
          {{form.new_password.errors}}
        </fieldset>
        <fieldset>
          <label for="id_confirm_password">{% trans "Confirm New pin" %}</label>
          {{form.confirm_password}}
          {{form.confirm_password.errors}}
        </fieldset>
        <div class="call-to-action--group">
          <button type="submit" class="call-to-action__button call-to-action__button--primary">{% trans "Save" %}</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}