@php
    $meta = $event->meta;
    $title = $meta->title ?? '(no title)';
    $allDay = (bool) ($meta->all_day ?? false);
    $calendarName = $calendar->displayname ?? __('common.calendar');
    $calendarColor = $calendar->meta_color ?? $calendar->calendarcolor ?? default_calendar_color();
    $rrule = $meta?->extra['rrule'] ?? null;
    $tzid = $meta?->extra['tzid'] ?? $tz;
    $locationLabel = $meta?->location_label ?? '';
    $hasLocation = trim((string) $locationLabel) !== '';
    $venue = $meta?->venue;
    $addressLine1 = $venue?->street;
    $addressLine2 = trim(implode(', ', array_filter([
        $venue?->city,
        $venue?->state,
        $venue?->postal,
    ])));
    $addressLine3 = $venue?->country;
@endphp

<x-modal.content>
    <x-modal.title>
        <div class="flex items-center gap-3">
            <span class="inline-block h-3 w-3 rounded-full" style="background: {{ $calendarColor }};"></span>
            <span>{{ $title }}</span>
        </div>
    </x-modal.title>
    <x-modal.body>
        <div class="flex flex-col gap-6">
            <section class="space-y-1">
                <p class="text-xs uppercase tracking-wide text-gray-400">{{ __('calendar.event.when') }}</p>
                @if ($allDay)
                    <p class="text-lg text-gray-900">
                        {{ $start->format('l, F j, Y') }}
                        @unless ($start->isSameDay($end))
                            &nbsp;–&nbsp;
                            {{ $end->format('l, F j, Y') }}
                        @endunless
                        <span class="text-sm text-gray-500">({{ __('calendar.event.all_day') }})</span>
                    </p>
                @else
                    <p class="text-lg text-gray-900">
                        {{ $start->format('l, F j, Y · g:i A') }}
                        @unless ($start->equalTo($end))
                            &nbsp;–&nbsp;
                            {{ $end->isSameDay($start)
                                ? $end->format('g:i A')
                                : $end->format('l, F j, Y · g:i A') }}
                        @endunless
                    </p>
                @endif
                <p class="text-sm text-gray-500">{{ __('common.timezone') }}: {{ $tzid }}</p>
            </section>

            <section class="space-y-1">
                <p class="text-xs uppercase tracking-wide text-gray-400">{{ __('common.calendar') }}</p>
                <p class="text-gray-900">{{ $calendarName }}</p>
            </section>

            <section class="space-y-2">
                <p class="text-xs uppercase tracking-wide text-gray-400">{{ __('calendar.event.location') }}</p>
                @if ($hasLocation)
                    <p class="text-gray-900">{{ $locationLabel }}</p>
                    @if ($addressLine1 || $addressLine2 || $addressLine3)
                        <div class="text-sm text-gray-600">
                            @if ($addressLine1)
                                <div>{{ $addressLine1 }}</div>
                            @endif
                            @if ($addressLine2)
                                <div>{{ $addressLine2 }}</div>
                            @endif
                            @if ($addressLine3)
                                <div>{{ $addressLine3 }}</div>
                            @endif
                        </div>
                    @endif
                    <div class="mt-2 rounded-lg border border-dashed border-gray-300 bg-gray-50 p-4 text-sm text-gray-500">
                        {{ __('calendar.event.map_coming') }}
                    </div>
                @else
                    <p class="text-sm text-gray-500">{{ __('calendar.event.no_location') }}</p>
                @endif
            </section>

            <section class="space-y-2">
                <p class="text-xs uppercase tracking-wide text-gray-400">{{ __('calendar.event.details') }}</p>
                <div class="grid grid-cols-1 gap-3 text-sm text-gray-700">
                    <div>
                        <span class="text-gray-500">{{ __('calendar.event.repeats') }}:</span>
                        @if ($rrule)
                            <span class="ml-1 font-mono text-gray-800">{{ $rrule }}</span>
                        @else
                            <span class="ml-1 text-gray-500">{{ __('calendar.event.does_not_repeat') }}</span>
                        @endif
                    </div>
                    <div>
                        <span class="text-gray-500">{{ __('calendar.event.category') }}:</span>
                        <span class="ml-1">{{ $meta->category ?? __('calendar.event.none') }}</span>
                    </div>
                    <div>
                        <span class="text-gray-500">{{ __('calendar.event.visibility') }}:</span>
                        <span class="ml-1">{{ ($meta->is_private ?? false) ? __('calendar.event.private') : __('calendar.event.default') }}</span>
                    </div>
                    <div>
                        <span class="text-gray-500">{{ __('calendar.event.all_day_handling') }}:</span>
                        <span class="ml-1">
                            {{ $allDay ? __('calendar.event.all_day') : __('calendar.event.timed') }}
                            <span class="text-gray-400">· {{ __('calendar.event.all_day_coming') }}</span>
                        </span>
                    </div>
                </div>
            </section>

            <section class="space-y-2">
                <p class="text-xs uppercase tracking-wide text-gray-400">{{ __('calendar.event.alerts') }}</p>
                @if (!is_null($meta->reminder_minutes))
                    <p class="text-sm text-gray-700">
                        {{ __('calendar.event.reminder') }}: {{ $meta->reminder_minutes }} {{ __('calendar.event.minutes_before') }}
                    </p>
                @else
                    <p class="text-sm text-gray-500">{{ __('calendar.event.alerts_coming') }}</p>
                @endif
            </section>

            <section class="space-y-2">
                <p class="text-xs uppercase tracking-wide text-gray-400">{{ __('calendar.event.invitees') }}</p>
                <p class="text-sm text-gray-500">{{ __('calendar.event.invitees_coming') }}</p>
            </section>

            <section class="space-y-2">
                <p class="text-xs uppercase tracking-wide text-gray-400">{{ __('calendar.event.attachments') }}</p>
                <p class="text-sm text-gray-500">{{ __('calendar.event.attachments_coming') }}</p>
            </section>

            <section class="space-y-2">
                <p class="text-xs uppercase tracking-wide text-gray-400">{{ __('calendar.event.notes') }}</p>
                @if ($meta->description)
                    <div class="prose prose-sm max-w-none text-gray-800">
                        {!! Str::markdown(nl2br(e($meta->description))) !!}
                    </div>
                @else
                    <p class="text-sm text-gray-500">{{ __('calendar.event.no_description') }}</p>
                @endif
            </section>
        </div>
    </x-modal.body>
</x-modal.content>