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

@php
    $enabled = (int) ($daytime_hours['enabled'] ?? 0) === 1;
@endphp

<form id="calendar-daytime-hours"
      method="get"
      class="inline-flex items-center gap-2 text-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'] ?? request('date') }}">
    <input type="hidden" name="density" value="{{ $density['step'] ?? 30 }}">

    {{-- unchecked checkboxes don't submit a value --}}
    <input type="hidden" name="daytime_hours" value="0">
    <x-input.checkbox-label
        name="daytime_hours"
        value="1"
        label="{{ __('Daytime hours') }}"
        :checked="$enabled"
    />

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