{% extends "portal/base.html" %}
{% block title %}Change your password - Your account{% endblock %}
{% block content %}
    {# Step P3 (2 Oct 2026). Passwords are never sent back to the page: every password input renders empty. #}
    <div class="rf-page-head">
        <div>
            <h1>Change your password</h1>
            <p class="rf-lede">The password you use to connect, and to log in here.</p>
        </div>
    </div>

    {% if unavailable %}
    <section class="rf-form-card">
        <p>{{ unavailable }}</p>
        <div class="rf-form-actions"><a href="{% url 'portal-home' %}">Back to your account</a></div>
    </section>
    {% else %}
    {% if errors.form %}<ul class="rf-messages"><li class="rf-message rf-message-error">{{ errors.form }}</li></ul>{% endif %}
    <form method="post" class="rf-form-card" novalidate>
        {% csrf_token %}
        <label for="id_current_password">Current password</label>
        <input type="password" name="current_password" id="id_current_password" autocomplete="current-password" required{% if errors.current_password %} aria-invalid="true" aria-describedby="err_current_password"{% endif %}>
        {% if errors.current_password %}<div class="errorlist" id="err_current_password">{{ errors.current_password }}</div>{% endif %}

        <label for="id_new_password">New password</label>
        <div class="helptext" id="rules_new_password">
            <ul>{% for rule in rules %}<li>{{ rule }}</li>{% endfor %}</ul>
        </div>
        <input type="password" name="new_password" id="id_new_password" autocomplete="new-password" minlength="{{ min_length }}" maxlength="{{ max_length }}" required aria-describedby="rules_new_password{% if errors.new_password %} err_new_password{% endif %}"{% if errors.new_password %} aria-invalid="true"{% endif %}>
        {% if errors.new_password %}<div class="errorlist" id="err_new_password">{{ errors.new_password }}</div>{% endif %}

        <label for="id_new_password_again">New password again</label>
        <input type="password" name="new_password_again" id="id_new_password_again" autocomplete="new-password" maxlength="{{ max_length }}" required{% if errors.new_password_again %} aria-invalid="true" aria-describedby="err_new_password_again"{% endif %}>
        {% if errors.new_password_again %}<div class="errorlist" id="err_new_password_again">{{ errors.new_password_again }}</div>{% endif %}

        <div class="checkbox-row">
            <input type="checkbox" id="rf-show-passwords">
            <label for="rf-show-passwords">Show passwords</label>
        </div>

        <div class="rf-form-actions">
            <button type="submit">Change password</button>
            <a href="{% url 'portal-home' %}">Cancel</a>
        </div>
    </form>
    <script>
        // Show or hide what was typed - easier to check on a phone. Nothing is sent anywhere.
        document.getElementById("rf-show-passwords").addEventListener("change", function () {
            var kind = this.checked ? "text" : "password";
            ["id_current_password", "id_new_password", "id_new_password_again"].forEach(function (id) {
                document.getElementById(id).type = kind;
            });
        });
    </script>
    {% endif %}
{% endblock %}