@props([
    'mini',
    'view',
    'nav',
    'class' => '',
    'density' => [],
    'headers' => [],
    'business_hours' => [],
])

<section id="mini" class="mini mini--month {{ $class }}">
    <header>
        <span>{{ $nav['label'] }}</span>
        <form
            action="{{ route('calendar.index') }}"
            method="get"
            class="flex flex-row gap-1 items-center"
            hx-get="{{ route('calendar.index') }}"
            hx-target="#mini"
            hx-select="#mini"
            hx-swap="outerHTML"
            hx-push-url="true">
            {{-- preserve main calendar context for full-reload fallback --}}
            <input type="hidden" name="view" value="{{ $view }}">
            <input type="hidden" name="date" value="{{ request('date') }}">
            <input type="hidden" name="business_hours" value="{{ (int) ($business_hours['enabled'] ?? 0) }}">
            {{-- nav buttons --}}
            <button type="submit" name="mini" class="button--icon button--sm" value="{{ $nav['prev'] }}" aria-label="Go back 1 month">
                <x-icon-chevron-left />
            </button>
            {{-- <!--<button type="submit" name="mini" class="button--sm" value="{{ $nav['today'] }}">Today</button>--> --}}
            <button type="submit" name="mini" class="button--icon button--sm" value="{{ $nav['next'] }}" aria-label="Go forward 1 month">
                <x-icon-chevron-right />
            </button>
        </form>
    </header>
    <nav>
        <hgroup>
            @foreach ($headers as $h)
            <span class="capitalize">{{ substr($h['label'], 0, 2) }}</span>
            @endforeach
        </hgroup>
        {{-- form drives the main calendar --}}
        <form action="{{ route('calendar.index') }}"
              method="get"
              hx-get="{{ route('calendar.index') }}"
              hx-target="#calendar"
              hx-select="#calendar"
              hx-swap="outerHTML"
              hx-push-url="true"
              hx-include="#calendar-toggles">

            {{-- stay on the same view (month/week/etc --}}
            <input type="hidden" name="view" value="{{ $view }}">
            <input type="hidden" name="density" value="{{ $density['step'] }}">
            <input type="hidden" name="business_hours" value="{{ (int) ($business_hours['enabled'] ?? 0) }}">

            @foreach ($mini['days'] as $day)
            <button
                type="submit"
                name="date"
                value="{{ $day['date'] }}"
                data-event-count="{{ count($day['events']) }}"
                class="day
                    {{ count($day['events']) ? 'day--with-events' : '' }}
                    {{ $day['in_month'] ? '' : 'day--outside' }}
                    {{ $day['is_today'] ? 'day--today' : '' }}">
                {{ $day['label'] }}
            </button>
            @endforeach
        </form>
    </nav>
</section>