<div{{ attributes }} data-controller="dialog" data-action="click->dialog#backdropClose" class="modal flex flex-row items-center {{ container_class|default('') }}">
    <dialog data-dialog-target="dialog" class="py-3 px-4 w-[30rem] rounded-md">
        <h2 class="mb-4 text-2xl font-bold">{{ heading }}</h2>

        <div class="mb-4">
            {% block content %}{% endblock %}
        </div>

        {% if show_cancel is defined or show_submit is defined %}
            <div class="flex justify-end">
            {% if show_cancel is defined %}
                <button type="button" data-action="dialog#close" class="px-1 py-1 rounded-md self-end w-16 hover:bg-stone-100" autofocus>
                    {{ cancel_text|default('Cancel') }}
                </button>
            {% endif %}
            {% if show_submit is defined %}
                <button type="button" {{ submit_action|raw }} class="px-1 py-1 rounded-md bg-orange-500 self-end text-white w-16 ml-2 hover:bg-orange-600" autofocus>
                    {{ submit_text|default('Submit') }}
                </button>
            {% endif %}
            </div>
        {% endif %}
    </dialog>

    <button type="button" class="{{ button_class|default('') }}" data-action="dialog#open">{{ button_text|raw }}</button>
</div>