@props([
    'grid' => [],
    'calendars' => [],
    'events' => [],
    'class' => '',
    'slots' => [],
    'timeformat' => '',
    'hgroup' => [],
    'active' => [],
    'density' => '30',
    'now' => [],
    'daytime_hours' => [],
    'timezone' => 'UTC',
])

<section
    class="calendar {{ $class }}" data-density="{{ $density['step'] }}"
    style=
       "--now-row: {{ (int) $now['row'] }};
        --now-offset: {{ $now['offset'] ?? 0 }};
        --now-col-start: {{ (int) $now['col_start'] }};
        --now-col-end: {{ (int) $now['col_end'] }};
        --grid-rows: {{ $daytime_hours['rows'] ?? 96 }};"
>
    <hgroup>
        @foreach ($hgroup as $h)
        @php
            $dayParams = [
                'view' => 'day',
                'date' => $h['date'],
                'density' => $density['step'],
                'daytime_hours' => (int) ($daytime_hours['enabled'] ?? 0),
            ];
        @endphp
        <div data-date="{{ $h['date'] }}" @class(['day-header', 'active' => $h['is_today'] ?? false])>
            <span class="name">{{ $h['dow'] }}</span>
            <a class="number"
               href="{{ route('calendar.index', $dayParams) }}"
               hx-get="{{ route('calendar.index', $dayParams) }}"
               hx-target="#calendar"
               hx-select="#calendar"
               hx-swap="outerHTML"
               hx-push-url="true"
               hx-include="#calendar-toggles">
                {{ $h['day'] }}
            </a>
        </div>
        @endforeach
    </hgroup>
    <ol class="time" aria-label="{{ __('Times') }}">
        @foreach ($slots as $slot)
        <li>
            <time datetime="{{ $slot['iso'] }}">{{ $slot['label'] }}</time>
        </li>
        @endforeach
    </ol>
    <ol class="events" aria-label="{{ __('Events') }}">
        @foreach ($events as $event)
        <x-calendar.time.event :event="$event" />
        @endforeach
        @if ($now['show'])
        <li class="now-indicator" aria-hidden="true"></li>
        @endif
    </ol>
    <footer>
        <div class="left">
            <a href="{{ route('account.locale') }}" class="timezone">{{ $timezone }}</a>
        </div>
        <div class="right">
            <x-calendar.time.daytime-hours view="four" :density="$density" :daytime_hours="$daytime_hours" />
            <x-calendar.time.density view="four" :density="$density" :daytime_hours="$daytime_hours" />
        </div>
    </footer>
</section>