{# Shared event detail modal.

Include this partial on any page that wants to call showEventDetail(eventId)
from event-modal.js.  The partial provides only the modal shell — the
actual content is rendered by JS into #event-detail-modal-content.

Usage:
    {% include 'partials/event_detail_modal.html' %}
    <script src="/static/event-modal.js"></script>
#}
<div id="event-detail-modal" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/60" onclick="closeEventDetailModal()"></div>
    <div class="absolute inset-x-4 top-1/2 -translate-y-1/2 max-w-3xl mx-auto bg-white dark:bg-slate-800 rounded-xl shadow-2xl p-6 max-h-[88vh] overflow-y-auto">
        <div class="flex items-center justify-between mb-4 sticky top-0 bg-white dark:bg-slate-800 -mx-6 px-6 pb-3 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white" id="event-detail-modal-title">Event Detail</h3>
            <button onclick="closeEventDetailModal()"
                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
                <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"></path>
                </svg>
            </button>
        </div>
        <div id="event-detail-modal-content"></div>
    </div>
</div>