<dialog id="{{ id ?? 'default-dialog-id' }}" class="dialog" {% if open_on_load|default(false) %}data-open-on-load{% endif %}>
    <button id="close-{{ id ?? 'default-dialog-id' }}" class="dialog__close" autofocus>
        <svg><use href="/build/svg/_icons.svg#close"></use></svg>
    </button>
    {% if dialog_header is not empty %}
        <h3>{{ dialog_header }}</h3>
    {% endif %}
    <div>
        {{ content|raw }}
    </div>
</dialog>

<script>
    (function () {
        const dialogs = document.querySelectorAll('dialog');

        dialogs.forEach(dialog => {
            const id = dialog.id;
            const closeDialogButton = document.getElementById(`close-${id}`);
            const openDialogButton = document.querySelector(`[data-open-dialog="${id}"]`);

            if (openDialogButton) {
                openDialogButton.addEventListener('click', (event) => {
                    event.preventDefault();
                    dialog.showModal();
                });
            }

            if (closeDialogButton) {
                closeDialogButton.addEventListener('click', () => {
                    dialog.close();
                });
            }

            if (dialog.hasAttribute('data-open-on-load')) {
                dialog.showModal();
            }
        });
    })();
</script>