@props([
    'day',              // required
    'events',
    'calendars' => [],  // calendar palette keyed by id
])

<li
    data-day-number="{{ $day['label'] }}"
    data-event-count="{{ count($day['events'] ?? []) }}"
    @class([
        'day',
        'day--with-events' => !empty($day['events']),
        'day--current'     =>  $day['in_month'],
        'day--outside'     => !$day['in_month'],
        'day--today'       =>  $day['is_today'],
])>
    @if(!empty($day['events']))
        @foreach (array_keys($day['events']) as $eventId)
            @php
                $event = $events[$eventId];
                $color = $event['color'] ?? '#999';
            @endphp
    <a class="event{{ $event['visible'] ? '' : ' hidden' }}"
       href="{{ route('calendar.events.show', [$event['calendar_slug'], $event['id']]) }}"
       hx-get="{{ route('calendar.events.show', [$event['calendar_slug'], $event['id']]) }}"
       hx-target="#modal"
       hx-push-url="false"
       hx-swap="innerHTML"
       style="--event-color: {{ $color }}"
       data-calendar="{{ $event['calendar_slug'] }}">
        <i class="indicator" aria-label="Calendar indicator"></i>
        <span class="title">{{ $event['title'] }}</span>
        <time>{{ $event['start_ui'] }}</time>
    </a>
        @endforeach
    @endif
</li>