{#
    Password rules for one password input, with a live checklist.

    Include next to the input it describes:

        {% with password_input_id="password" %}
            {% include "config/_password_rules.html" %}
        {% endwith %}

    and give the input aria-describedby="<id>-rules". The rule text,
    the length bounds and the pattern come from
    security.auth.password_policy.password_policy_template_context(),
    which the handler merges into the template context -- the same
    module the server-side check uses, so the page and the server
    cannot disagree. The checklist is a hint only; the server decides.
#}
<style>
    .pyc-password-rules__list {
        list-style: none;
        margin: 0.35rem 0 0;
        padding: 0;
        font-size: var(--pyc-font-size-small, 0.875rem);
        color: var(--pyc-color-on-surface-muted, #6c757d);
    }
    .pyc-password-rules__list li[data-met="true"] {
        color: var(--pyc-color-on-success-surface, #1e6b3c);
    }
    .pyc-password-rules__mark {
        display: inline-block;
        width: 1.1em;
    }
    .pyc-password-rules__state {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
</style>
<div class="pyc-password-rules" id="{{ password_input_id }}-rules" data-password-rules-for="{{ password_input_id }}">
    <p class="muted small">{{ password_summary }}</p>
    <ul class="pyc-password-rules__list">
        {% for rule in password_rules %}
        <li data-password-rule="{{ rule.key }}" data-met="false">
            <span class="pyc-password-rules__mark" aria-hidden="true">&#9675;</span>{{ rule.label }}<span class="pyc-password-rules__state" data-role="rule-state"> (not met yet)</span>
        </li>
        {% endfor %}
    </ul>
</div>
<script nonce="{{ csp_nonce() }}">
    (function () {
        var input_id = "{{ password_input_id }}";
        var container = document.getElementById(input_id + "-rules");
        var input = document.getElementById(input_id);
        if (container === null || input === null) {
            return;
        }
        var min_length = {{ password_min_length }};
        var checks = {
            length: function (value) {
                return Array.from(value).length >= min_length;
            },
            upper: function (value) {
                return /\p{Lu}/u.test(value);
            },
            lower: function (value) {
                return /\p{Ll}/u.test(value);
            },
            digit: function (value) {
                return /\p{Nd}/u.test(value);
            },
            symbol: function (value) {
                return /[^\p{L}\p{N}]/u.test(value);
            }
        };
        function update() {
            var value = input.value || "";
            var items = container.querySelectorAll("[data-password-rule]");
            for (var index = 0; index < items.length; index++) {
                var item = items[index];
                var check = checks[item.getAttribute("data-password-rule")];
                if (typeof check !== "function") {
                    continue;
                }
                var met = check(value) === true;
                item.setAttribute("data-met", met ? "true" : "false");
                var mark = item.querySelector(".pyc-password-rules__mark");
                if (mark !== null) {
                    mark.textContent = met ? "✓" : "○";
                }
                var state = item.querySelector("[data-role='rule-state']");
                if (state !== null) {
                    state.textContent = met ? " (met)" : " (not met yet)";
                }
            }
        }
        input.addEventListener("input", update);
        update();
    })();
</script>