<div class="flex flex-col">

    {{-- HEADER --}}
    <div class="px-6 pt-6 pb-4 border-b border-border flex items-start gap-4">

        <div class="size-12 rounded-xl bg-primary/10 flex items-center justify-center">
            <x-heroicon-o-calendar class="size-6 text-primary"/>
        </div>

        <div class="flex-1">
            <h2 class="text-lg font-semibold text-text">
                {{ t('calendar.events') }}
            </h2>

            <p class="text-sm text-text-muted mt-0.5">
                {{ \Carbon\Carbon::parse($date)->translatedFormat('l, d. F Y') }}
            </p>
        </div>

    </div>

    {{-- BODY --}}
    <div class="px-6 py-5 space-y-3 max-h-[400px] overflow-y-auto">

        @forelse($events as $event)
            <div
                wire:click="$dispatch('openModal', {
                    component: 'calendar.modals.event-modal',
                    arguments: { eventId: '{{ $event->id }}' }
                })"
                class="flex items-center justify-between bg-background border border-border rounded-xl px-4 py-3 cursor-pointer hover:border-primary transition"
            >
                <div class="text-sm text-text">
                    {{ $event->title }}
                </div>

                <div class="text-xs text-text-muted">
                    {{ $event->starts_at
                        ->timezone(auth()->user()->timezone)
                        ->format('H:i') }}
                </div>
            </div>
        @empty
            <div class="text-sm text-text-muted">
                {{ t('calendar.no_events') }}
            </div>
        @endforelse

    </div>

    {{-- FOOTER --}}
    <div class="px-6 py-4 border-t border-border flex justify-end">

        <button
            wire:click="$dispatch('closeModal')"
            class="px-5 py-2.5 text-sm bg-background hover:bg-border rounded-xl transition"
        >
            {{ t('common.close') }}
        </button>

    </div>

</div>
