{% if validation_modal %}
<dialog class="validation-dialog" data-validation-dialog>
    <form method="dialog" class="validation-dialog-card">
        <p class="eyebrow">需要确认</p>
        <h2>{{ validation_modal.title }}</h2>
        <p class="small-muted">当前输入已保留。关闭这个窗口后，页面会高亮需要修改的位置。</p>

        <ul class="validation-dialog-list">
            {% for message in validation_modal.messages %}
            <li>{{ message }}</li>
            {% endfor %}
        </ul>

        <div class="button-row top-gap">
            <button class="primary-button" type="submit">返回修改</button>
        </div>
    </form>
</dialog>

<script>
    (() => {
        const dialog = document.querySelector("[data-validation-dialog]");
        if (!dialog) {
            return;
        }

        const focusFirstInvalid = () => {
            const control = document.querySelector(
                "[data-field-error='true'] input:not([type='hidden']), [data-field-error='true'] select, [data-field-error='true'] textarea, [data-field-error='true'] button"
            );
            if (!control) {
                return;
            }
            control.scrollIntoView?.({behavior: "smooth", block: "center"});
            control.focus?.({preventScroll: true});
        };

        dialog.addEventListener("close", () => {
            focusFirstInvalid();
        });

        if (typeof dialog.showModal === "function" && !dialog.open) {
            dialog.showModal();
            return;
        }

        dialog.setAttribute("open", "open");
    })();
</script>
{% endif %}