{# Modal Component #}
{% set modalId = id|default('modal') %}
{% set modalSize = size|default('md') %} {# sm, md, lg, xl #}

{% set sizeClasses = {
    'sm': 'max-w-md',
    'md': 'max-w-lg',
    'lg': 'max-w-2xl',
    'xl': 'max-w-4xl'
} %}

<div
    x-data="{ open: false }"
    @keydown.escape.window="open = false"
    id="{{ modalId }}"
>
    {# Trigger #}
    {% if trigger is defined %}
        <div @click="open = true">
            {{ trigger|raw }}
        </div>
    {% endif %}

    {# Modal Overlay #}
    <div
        x-show="open"
        x-cloak
        class="fixed inset-0 z-50 overflow-y-auto"
        @click="open = false"
    >
        <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            {# Background overlay #}
            <div
                x-show="open"
                x-transition:enter="ease-out duration-300"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="fixed inset-0 transition-opacity bg-secondary-500 bg-opacity-75"
            ></div>

            {# Modal panel #}
            <div
                x-show="open"
                x-transition:enter="ease-out duration-300"
                x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                @click.stop
                class="inline-block w-full {{ sizeClasses[modalSize] }} p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-lg"
            >
                {# Header #}
                {% if title is defined %}
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-medium leading-6 text-secondary-900">
                        {{ title }}
                    </h3>
                    <button @click="open = false" class="text-secondary-400 hover:text-secondary-500 focus:outline-none">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
                {% endif %}

                {# Body #}
                <div>
                    {{ content|raw }}
                </div>

                {# Footer #}
                {% if footer is defined %}
                <div class="mt-6 flex justify-end space-x-3">
                    {{ footer|raw }}
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>