kithkin/resources/views/event/partials/details.blade.php

@php
    $meta = $event->meta;
    $title = $meta->title ?? '(no title)';
    $allDay = (bool) ($meta->all_day ?? false);
    $calendarName = $calendarName ?? $calendar->displayname ?? __('common.calendar');
    $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;
    $map = $map ?? ['enabled' => false, 'needs_key' => false, 'url' => null];
@endphp

<x-modal.content data-modal-kind="event" :class="$map['enabled'] ? 'with-map' : null">
    <x-modal.title class="gap-4">
        <span class="inline-block h-4 w-4 rounded-full" style="background: {{ $event->color }};"></span>
        <h2>{{ $title }}</h2>
    </x-modal.title>
    <x-modal.body>
        @if ($map['enabled'])
            <div class="event-map" style="--event-map: url('{{ trim($map['url']) }}');" aria-label="Map of event location">
                <!-- map tile is background image-->
                <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
                    <div class="h-3 w-3 rounded-full bg-magenta-500 ring-4 ring-magenta-500/20"></div>
                </div>
            </div>
        @endif
        <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
                @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>