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

<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') }}">
            {{-- 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>
            <span>Mo</span>
            <span>Tu</span>
            <span>We</span>
            <span>Th</span>
            <span>Fr</span>
            <span>Sa</span>
            <span>Su</span>
        </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…) --}}
            <input type="hidden" name="view" value="{{ $view }}">

            @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['date'] === today()->toDateString() ? 'day--today' : '' }}">
                {{ $day['label'] }}
            </button>
            @endforeach
        </form>
    </nav>
</section>