thrillwiki_django_no_react/backend/templates/components/ui/dialog.html

{% comment %}
Dialog/Modal Component - Unified Django Template

A flexible dialog/modal component that supports both HTMX-triggered and Alpine.js-controlled modals.
Includes proper accessibility attributes (ARIA) and keyboard navigation support.

Usage Examples:
  Alpine.js controlled modal:
    {% include 'components/ui/dialog.html' with title='Confirm Action' content='Are you sure?' id='confirm-modal' %}
    <button @click="$store.ui.openModal('confirm-modal')">Open Modal</button>

  HTMX triggered modal (loads content dynamically):
    <button hx-get="/modal/content" hx-target="#modal-container">Load Modal</button>
    <div id="modal-container">
      {% include 'components/ui/dialog.html' with title='Dynamic Content' %}
    </div>

  With footer actions:
    {% include 'components/ui/dialog.html' with title='Delete Item' description='This cannot be undone.' footer='<button class="btn">Cancel</button><button class="btn btn-destructive">Delete</button>' %}

Parameters:
  - id: Modal ID (used for Alpine.js state management)
  - title: Dialog title
  - description: Dialog subtitle/description
  - content: Main content (sanitized)
  - footer: Footer content with actions (sanitized)
  - open: Boolean to control initial open state (default: true for HTMX-loaded content)
  - closable: Boolean to allow closing (default: true)
  - size: 'sm', 'default', 'lg', 'xl', 'full' (default: 'default')
  - class: Additional CSS classes for the dialog panel

Accessibility:
  - role="dialog" and aria-modal="true" for screen readers
  - Focus trap within modal when open
  - Escape key closes the modal
  - Click outside closes the modal (backdrop click)

Security: Content and footer are sanitized to prevent XSS attacks.
{% endcomment %}

{% load safe_html %}

{% with modal_id=id|default:'dialog' is_open=open|default:True %}

<div class="fixed inset-0 z-50 flex items-start justify-center sm:items-center"
     role="dialog"
     aria-modal="true"
     {% if title %}aria-labelledby="{{ modal_id }}-title"{% endif %}
     {% if description %}aria-describedby="{{ modal_id }}-description"{% endif %}
     x-data="{ open: {{ is_open|yesno:'true,false' }} }"
     x-show="open"
     x-cloak
     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"
     @keydown.escape.window="open = false">

    {# Backdrop #}
    <div class="fixed inset-0 transition-all bg-black/50 backdrop-blur-sm"
         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-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         {% if closable|default:True %}
         @click="open = false; setTimeout(() => { if ($el.closest('[hx-history-elt]')) $el.closest('[hx-history-elt]').innerHTML = ''; }, 200)"
         {% endif %}
         aria-hidden="true"></div>

    {# Dialog Panel #}
    <div class="fixed z-50 grid w-full gap-4 p-6 duration-200 border shadow-lg bg-background sm:rounded-lg
                {% if size == 'sm' %}sm:max-w-sm
                {% elif size == 'lg' %}sm:max-w-2xl
                {% elif size == 'xl' %}sm:max-w-4xl
                {% elif size == 'full' %}sm:max-w-[90vw] sm:max-h-[90vh]
                {% else %}sm:max-w-lg{% endif %}
                {{ class|default:'' }}"
         x-show="open"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
         @click.stop>

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

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

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

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

        {# Close Button #}
        {% if closable|default:True %}
        <button type="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"
                @click="open = false; setTimeout(() => { if ($el.closest('[hx-history-elt]')) $el.closest('[hx-history-elt]').innerHTML = ''; }, 200)"
                aria-label="Close">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <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>
        {% endif %}
    </div>
</div>

{% endwith %}