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

<li class="event"
    data-event-id="{{ $event['id'] }}"
    data-calendar-id="{{ $event['calendar_slug'] }}"
    data-start="{{ $event['start_ui'] }}"
    data-duration="{{ $event['duration'] }}"
    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'] }};
    ">
    <a class="event{{ $event['visible'] ? '' : ' hidden' }}"
       href="{{ route('calendar.event.show', [$event['calendar_slug'], $event['id']]) }}"
       hx-get="{{ route('calendar.event.show', [$event['calendar_slug'], $event['id']]) }}"
       hx-target="#modal"
       hx-push-url="false"
       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>