<div
    x-data="{ open: @entangle('open') }"
    x-cloak
    class="fixed inset-0 z-50 pointer-events-none"
>

    {{-- BACKDROP --}}
    <div
        x-show="open"
        x-transition.opacity
        class="absolute inset-0 bg-black/10 pointer-events-auto"
        wire:click="close"
    ></div>

    {{-- SIDEBAR --}}
    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="translate-x-full"
        x-transition:enter-end="translate-x-0"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="translate-x-0"
        x-transition:leave-end="translate-x-full"
        class="absolute top-0 right-0 h-full w-[400px] bg-white border-l border-gray-100 shadow-xl flex flex-col pointer-events-auto"
    >

        {{-- HEADER --}}
        <div class="flex-shrink-0 px-5 py-4 border-b border-gray-100 flex justify-between items-center">

            <div class="flex items-center gap-3">
                <div class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center">
                    <x-heroicon-o-calendar class="w-4 h-4 text-indigo-600"/>
                </div>

                <div>
                    <div class="font-semibold text-gray-800 text-sm leading-tight">
                        {{ $mode === 'edit' ? t('calendar.edit_event') : t('calendar.new_event') }}
                    </div>
                    @if($date)
                        <div class="text-xs text-gray-400 mt-0.5">
                            {{ \Carbon\Carbon::parse($date)->translatedFormat('l, d. F Y') }}
                        </div>
                    @endif
                </div>
            </div>

            <button wire:click="close"
                    class="w-7 h-7 rounded-md flex items-center justify-center text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors">
                <x-heroicon-o-x-mark class="w-4 h-4"/>
            </button>

        </div>


        {{-- CONTENT --}}
        <div class="flex-1 overflow-y-auto px-5 py-5">

            @livewire('calendar.forms.event-form', [
                'eventId'    => $eventId,
                'starts_at'  => $date,
                'time'       => $time,
            ], key(($eventId ?? 'create') . '-' . $date . '-' . $time))

        </div>


        {{-- FOOTER --}}
        <div class="shrink-0 border-t border-gray-100 px-5 py-4 flex justify-between items-center bg-white">

            @if($eventId)
                <button wire:click="deleteEvent"
                        class="flex items-center gap-1.5 text-red-400 hover:text-red-600 text-xs font-medium transition-colors">
                    <x-heroicon-o-trash class="w-3.5 h-3.5"/>
                    {{ t('common.delete') }}
                </button>
            @else
                <button wire:click="close"
                        class="px-3 py-1.5 text-xs rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 transition-colors">
                    {{ t('common.cancel') }}
                </button>
            @endif

            <button wire:click="saveEvent"
                    class="px-4 py-1.5 text-xs rounded-lg bg-indigo-600 text-white font-medium hover:bg-indigo-700 transition-colors shadow-sm flex items-center gap-1.5">
                <x-heroicon-o-check class="w-3.5 h-3.5"/>
                {{ t('common.save') }}
            </button>

        </div>

    </div>

</div>
