@props([
    'event' => [],
])

<li class="event"
    data-event-id="{{ $event['occurrence_id'] ?? $event['id'] }}"
    data-calendar-id="{{ $event['calendar_slug'] }}"
    data-start="{{ $event['start_ui'] }}"
    data-duration="{{ $event['duration'] }}"
    data-span="{{ $event['row_span'] }}"
    style="
        --event-row: {{ $event['start_row'] }};
        --event-end: {{ $event['end_row'] }};
        --event-col: {{ $event['start_col'] }};
        --event-bg: {{ $event['color'] }};
        --event-fg: {{ $event['color_fg'] }};
        --event-overlap-count: {{ $event['overlap_count'] ?? 1 }};
        --event-overlap-index: {{ $event['overlap_index'] ?? 0 }};
        --event-overlap-width: {{ $event['overlap_width'] ?? 100 }}%;
        --event-overlap-offset: {{ $event['overlap_offset'] ?? 0 }}%;
        --event-z: {{ $event['overlap_z'] ?? 1 }};
    ">
    @php
        $showParams = [$event['calendar_slug'], $event['id']];
        if (!empty($event['occurrence'])) {
            $showParams['occurrence'] = $event['occurrence'];
        }
    @endphp
       <a class="event{{ $event['visible'] ? '' : ' hidden' }}"
           href="{{ route('calendar.event.show', $showParams) }}"
           hx-get="{{ route('calendar.event.show', $showParams) }}"
           hx-target="#modal"
       hx-push-url="true"
           hx-swap="innerHTML"
           data-calendar="{{ $event['calendar_slug'] }}"
    >
        <span>{{ $event['title'] }}</span>
        <time datetime="{{ $event['start'] }}">{{ $event['start_ui'] }} - {{ $event['end_ui'] }}</time>
    </a>
</li>
