{% load wagtailadmin_tags i18n %}
<template data-dialog>
    <div
        id="{{ id }}"
        aria-labelledby="title-{{ id }}"
        aria-hidden="true"
        class="w-dialog"
        {% if data_url %}
            data-url="{{ data_url }}"
        {% endif %}
    >
        <div data-a11y-dialog-hide class="w-dialog__overlay"></div>
        <div class="w-dialog__box">
            <button type="button" data-a11y-dialog-hide aria-label="{% trans 'Close dialog' %}" class="w-dialog__close-button">
                {% icon name='cross' class_name="w-dialog__close-icon" %}
            </button>

            {% if message_heading and message_icon_name %}
                <div class="w-dialog__message w-dialog__message--{{ message_status }}">
                    {% icon name=message_icon_name class_name="w-dialog__message-icon" %}
                    <div class="w-dialog__message-header">
                        <strong class="w-dialog__message-heading">{{ message_heading }}</strong>
                        {% if message_description %}<p class="w-dialog__message-description ">{{ message_description }}</p>{% endif %}
                    </div>
                </div>
            {% endif %}

            <div class="w-dialog__content">
                <h2 class="w-dialog__title w-h1" id="title-{{ id }}">
                    {% if icon_name %}{% icon name=icon_name class_name="w-dialog__icon" %}{% endif %}
                    {{ title }}
                </h2>

                {% if subtitle %}
                    <p class="w-dialog__subtitle w-help-text">{{ subtitle }}</p>
                {% endif %}

                <div data-dialog-body>
                    {{ children }}
                </div>
            </div>
        </div>
    </div>
</template>
