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

{% comment %}
  Inside the shell, unlike sign-in and sign-out: whoever is changing a password is
  already signed in, and taking the panel away from them mid-session would read as a
  different site. The confirmation arrives as a toast in the shell's own message
  region rather than on a separate "done" page.
{% endcomment %}

{% block content %}
<div class="v-page-head">
  <div>
    <h1 class="v-page-title">{% translate "Change password" %}</h1>
    <p class="v-page-description">
      {% blocktranslate trimmed %}
        Changing your own password. Everyone stays signed in on this device; other
        sessions are unaffected.
      {% endblocktranslate %}
    </p>
  </div>
</div>

<section class="v-card v-auth-narrow">
  <div class="v-card-body">
    {% if form.non_field_errors %}
      <div class="v-auth-alert" role="alert">
        <span class="v-auth-alert-label">{% translate "That did not work." %}</span>
        {% for error in form.non_field_errors %}<span>{{ error }}</span>{% endfor %}
      </div>
    {% endif %}

    <form method="post" novalidate>
      {% csrf_token %}
      {% for field in form %}
        <div class="v-auth-field">
          <label for="{{ field.id_for_label }}">{{ field.label }}</label>
          {{ field }}
          {% if field.help_text %}
            <div class="v-auth-help" id="{{ field.auto_id }}_help">{{ field.help_text }}</div>
          {% endif %}
          {% if field.errors %}
            <p class="v-auth-error" id="{{ field.auto_id }}_error">
              <span class="v-sr-only">{{ field.label }}:</span>
              {% for error in field.errors %}{{ error }} {% endfor %}
            </p>
          {% endif %}
        </div>
      {% endfor %}
      <button class="v-btn v-btn-primary" type="submit">{% translate "Change password" %}</button>
    </form>
  </div>
</section>
{% endblock %}