{% load safe_html %}
{# Security: Dialog content and footer are sanitized to prevent XSS. #}

<div class="fixed inset-0 z-50 flex items-start justify-center sm:items-center"
     role="dialog"
     aria-modal="true"
     x-data="{ open: true }"
     x-show="open"
     x-transition:enter="transition ease-out duration-200"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     x-transition:leave="transition ease-in duration-100"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0">

    <!-- Backdrop -->
    <div class="fixed inset-0 transition-all bg-background/80 backdrop-blur-sm"
         @click="open = false; setTimeout(() => $el.closest('[hx-history-elt]').innerHTML = '', 200)"></div>

    <!-- Dialog Panel -->
    <div class="fixed z-50 grid w-full gap-4 p-6 duration-200 border shadow-lg bg-background sm:max-w-lg sm:rounded-lg"
         x-show="open"
         x-transition:enter="animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2 slide-in-from-top-[48%]"
         x-transition:leave="animate-out fade-out-0 zoom-out-95 slide-out-to-left-1/2 slide-out-to-top-[48%]">

        <div class="flex flex-col space-y-1.5 text-center sm:text-left">
            {% if title %}
            <h2 class="text-lg font-semibold leading-none tracking-tight">
                {{ title }}
            </h2>
            {% endif %}

            {% if description %}
            <p class="text-sm text-muted-foreground">
                {{ description }}
            </p>
            {% endif %}
        </div>

        <div class="py-4">
            {{ content|sanitize }}
            {% block dialog_content %}{% endblock %}
        </div>

        {% if footer %}
        <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
            {{ footer|sanitize }}
        </div>
        {% endif %}

        <!-- Close Button -->
        <button class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
                @click="open = false">
            <svg class="w-4 h-4" 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"></path>
            </svg>
            <span class="sr-only">Close</span>
        </button>
    </div>
</div>