@props([
    'density' => [],
    'view' => 'day',
    'daytime_hours' => [],
])

<form id="calendar-density"
      method="get"
      class="button-group button-group--primary button-group--sm"
      action="{{ route('calendar.index') }}"
      hx-get="{{ route('calendar.index') }}"
      hx-target="#calendar"
      hx-select="#calendar"
      hx-swap="outerHTML"
      hx-push-url="true"
      hx-trigger="change"
      hx-include="#calendar-toggles">

    {{-- preserve current view and anchor date --}}
    <input type="hidden" name="view" value="{{ $view }}">
    <input type="hidden" name="date" value="{{ $density['anchor'] }}">
    <input type="hidden" name="daytime_hours" value="{{ (int) ($daytime_hours['enabled'] ?? 0) }}">

    <x-button.group-input value="15" name="density" :active="(int)($density['step'] ?? 30) === 15">15m</x-button.group-input>
    <x-button.group-input value="30" name="density" :active="(int)($density['step'] ?? 30) === 30">30m</x-button.group-input>
    <x-button.group-input value="60" name="density" :active="(int)($density['step'] ?? 30) === 60">Hour</x-button.group-input>

    <noscript>
        <button type="submit" class="button">{{ __('Apply') }}</button>
    </noscript>
</form>