{% comment %}
Danger-zone action button for admin change pages. Clicking the button opens a <dialog>
confirmation modal instead of submitting directly. The modal's submit button posts the
surrounding admin form to action_url via formaction, not a <form> of its own, because a nested
<form> here would be dropped by the browser (formnovalidate skips its field validation).
Admin pages serve a CSP with no 'unsafe-inline'/'unsafe-hashes' on script-src, which silently
drops inline onclick attributes (no console error a user would see, no fallback), so the
open/cancel handlers live in the nonce'd <script> block below instead.
Include from a readonly display method with action_url / button_label / confirm_message /
notice in context, and pass request=request to render_to_string so {{ request.csp_nonce }}
resolves.
{% endcomment %}
<div class="deletion-button-widget">
    <button type="button" class="button deletion-trigger-button" style="background: #ba2121; color: #fff;">
        {{ button_label }}
    </button>
    <dialog class="deletion-confirm-dialog" style="max-width: 32em; padding: 16px; border: 1px solid #ba2121; border-radius: 4px;">
        <p>{{ confirm_message }}</p>
        <p class="help" style="color: #ba2121;">{{ notice }}</p>
        <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;">
            <button type="button" class="deletion-cancel-button">Cancel</button>
            <button type="submit"
                    formaction="{{ action_url }}"
                    formmethod="post"
                    formnovalidate
                    class="button"
                    style="background: #ba2121; color: #fff;">
                Confirm deletion
            </button>
        </div>
    </dialog>
</div>
<script nonce="{{ request.csp_nonce }}">
(function () {
    var widget = document.currentScript.previousElementSibling;
    var dialog = widget.querySelector(".deletion-confirm-dialog");
    widget.querySelector(".deletion-trigger-button").addEventListener("click", function () {
        dialog.showModal();
    });
    widget.querySelector(".deletion-cancel-button").addEventListener("click", function () {
        dialog.close();
    });
})();
</script>