@props(['showVar' => 'showDetailModal', 'title' => 'Détails', 'subtitleVar' => 'detailReference', 'maxWidth' => 'max-w-2xl', 'compact' => false])

<div x-show="{{ $showVar }}" x-cloak class="fixed inset-0 z-[60] overflow-y-auto" aria-labelledby="detail-modal-title">
    <div class="flex min-h-screen items-center justify-center p-4">
        <div x-show="{{ $showVar }}" @click="{{ $showVar }} = false" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm"></div>
        <div x-show="{{ $showVar }}" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" class="relative bg-white rounded-2xl shadow-2xl {{ $maxWidth }} w-full overflow-hidden">
            <div class="{{ $compact ? 'px-5 py-4' : 'px-6 py-5' }} border-b border-slate-100 bg-gradient-to-b from-slate-50 to-white flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-slate-800" id="detail-modal-title">{{ $title }}</h3>
                    <p class="text-sm text-slate-500 mt-0.5 font-mono" x-show="{{ $subtitleVar }}" x-text="{{ $subtitleVar }}"></p>
                </div>
                <button type="button" @click="{{ $showVar }} = false" class="p-2 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-colors" title="Fermer">
                    <svg class="w-5 h-5" 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>
            <div class="{{ $compact ? 'p-4' : 'p-6' }}">
                {{ $slot }}
            </div>
        </div>
    </div>
</div>