{% extends "account/base.html" %}

{% load i18n %}
{% load crispy_forms_tags %}

{% block pagetitle %}Change Password{% endblock %}
{% block head_title %}{% trans "Change Password" %} · Ghostwriter{% endblock %}

{% block content %}
  <div class="resource-form-shell account-profile-editor account-security-page">
    <form method="POST" action="{% url 'account_change_password' %}" class="password_change password-change-form resource-edit-form account-security-form">
      {% csrf_token %}

      {% if form.errors %}
        <div class="alert alert-danger account-security-alert" role="alert">
          <div class="account-security-alert-icon" aria-hidden="true"><i class="fas fa-exclamation-circle"></i></div>
          <div>
            <strong>{% trans "Password not changed" %}</strong>
            <p>{% trans "Review the highlighted fields below and try again." %}</p>
            {% if form.non_field_errors %}{{ form.non_field_errors }}{% endif %}
          </div>
        </div>
      {% endif %}

      <section class="resource-form-card account-security-card" aria-labelledby="password-fields-heading">
        <div class="resource-form-section-heading">
          <span class="resource-form-section-icon account-security-card-icon" aria-hidden="true"><i class="fas fa-key"></i></span>
          <div>
            <h1 id="password-fields-heading">{% trans "Change password" %}</h1>
            <p>{% trans "Use your current password to confirm this change, then choose a replacement that meets the requirements below." %}</p>
          </div>
        </div>

        <div class="account-security-fields">
          {% for field in form %}
            {{ field|as_crispy_field }}
          {% endfor %}
        </div>
      </section>

      <div class="resource-form-actions resource-form-actions-compact account-security-actions">
        <div class="resource-form-actions-buttons">
          <a class="btn btn-outline-secondary" href="{% url 'users:user_detail' request.user.username %}">{% trans "Cancel" %}</a>
          <button class="btn btn-primary" type="submit" name="action">
            <i class="fas fa-key" aria-hidden="true"></i> {% trans "Change password" %}
          </button>
        </div>
      </div>
    </form>
  </div>
{% endblock %}