@php
    $eventCalendar = $calendars->firstWhere('is_remote', false) ?? $calendars->first();
    $eventCalendarSlug = $eventCalendar['slug'] ?? null;
@endphp

<x-app-layout id="calendar">

    <x-slot name="aside">
        <h1>
            {{ __('common.calendar') }}
        </h1>
        <div class="content aside-inset">
            <form id="calendar-toggles"
                      class="drawers"
                      action="{{ route('calendar.index') }}"
                      method="get">
                <details open>
                    <summary>
                        <span>{{ __('calendar.mine') }}</span>
                        <a href="{{ route('calendar.settings.create') }}"
                           hx-get="{{ route('calendar.settings.create') }}"
                           hx-target="#modal"
                           hx-push-url="false"
                           hx-swap="innerHTML"
                           class="button button--icon button--sm">+</a>
                    </summary>
                    <ul class="content">
                        @foreach ($calendars->where('is_remote', false) as $cal)
                        <li class="calendar-toggle">
                            <x-input.checkbox-label
                                label="{{ $cal['name'] }}"
                                name="c[]"
                                value="{{ $cal['slug'] }}"
                                :checked="$cal['visible']"
                                checkclass="calendar-toggle"
                                style="--checkbox-color: {{ $cal['color'] }}"
                            />
                            <a href="{{ route('calendar.settings.calendars.show', $cal['slug']) }}"
                               aria-label="Manage calendar"
                               class="edit-link">Edit</a>
                        </li>
                        @endforeach
                    </ul>

                    {{-- fallback submit button for no-JS environments --}}
                    <noscript>
                        <button type="submit">{{ __('Apply') }}</button>
                    </noscript>
                </details>
                <details open>
                    <summary>
                        <span>{{ __('Other Calendars') }}</span>
                        <a href="{{ route('calendar.settings.subscribe') }}"
                           class="button button--icon button--sm">+</a>
                    </summary>
                    <ul class="content">
                        @foreach ($calendars->where('is_remote', true) as $cal)
                        <li class="calendar-toggle">
                            <x-input.checkbox-label
                                label="{{ $cal['name'] }}"
                                name="c[]"
                                value="{{ $cal['slug'] }}"
                                :checked="$cal['visible']"
                                checkclass="calendar-toggle"
                                style="--checkbox-color: {{ $cal['color'] }}"
                            />
                            <a href="{{ route('calendar.settings.calendars.show', $cal['slug']) }}"
                               aria-label="Manage calendar"
                               class="edit-link">Edit</a>
                        </li>
                        @endforeach
                    </ul>
                </details>
            </form>
        </div>
        <x-calendar.mini
            :mini="$mini"
            :nav="$mini_nav"
            :view="$view"
            :density="$density"
            :headers="$mini_headers"
            :daytime_hours="$daytime_hours"
            class="aside-inset"
        />
    </x-slot>

    <x-slot name="header">
        <h2>
            <strong>{{ $header['strong'] }}</strong>
            @if(!empty($header['span']))
            <span>{{ $header['span'] }}</span>
            @endif
            <button
                type="button"
                class="button button--icon button--sm calendar-expand-toggle"
                data-calendar-expand
                aria-label="{{ __('calendar.toggle_sidebar') }}"
            >
                <x-icon-collapse />
            </button>
        </h2>
        <menu>
            <li>
                <form id="calendar-nav"
                      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">

                    {{-- persist values from other forms --}}
                    <input type="hidden" name="view" value="{{ $view }}">
                    <input type="hidden" name="density" value="{{ $density['step'] }}">
                    <input type="hidden" name="daytime_hours" value="{{ (int) ($daytime_hours['enabled'] ?? 0) }}">

                    <nav class="button-group button-group--primary">
                        <x-button.group-button
                            type="submit"
                            name="date"
                            value="{{ $nav['prev'] }}"
                            class="button--icon"
                            aria-label="Go back 1 month">
                            <x-icon-chevron-left />
                        </x-button.group-button>
                        <x-button.group-button
                            type="submit"
                            name="date"
                            value="{{ $nav['today'] }}"
                            aria-label="Go to today">
                            Today
                        </x-button.group-button>
                        <x-button.group-button
                            type="submit"
                            name="date"
                            value="{{ $nav['next'] }}"
                            class="button--icon"
                            aria-label="Go forward 1 month">
                            <x-icon-chevron-right />
                        </x-button.group-button>
                    </nav>
                    <noscript>
                        {{-- not needed, buttons already submit the form --}}
                    </noscript>
                </form>
            </li>
            <li>
                <form id="calendar-view"
                      class="button-group button-group--primary"
                      method="get"
                      action="{{ route('calendar.index') }}"
                      hx-get="{{ route('calendar.index') }}"
                      hx-target="#calendar"
                      hx-select="#calendar"
                      hx-swap="outerHTML"
                      hx-push-url="true"
                      hx-include="#calendar-toggles">

                    {{-- persist data from density form --}}
                    <input type="hidden" name="density" value="{{ $density['step'] }}">
                    <input type="hidden" name="daytime_hours" value="{{ (int) ($daytime_hours['enabled'] ?? 0) }}">
                    <x-button.group-input value="day" :active="$view === 'day'">
                        <span class="lg:hidden">1</span>
                        <span class="hidden lg:inline">Day</span>
                    </x-button.group-input>
                    <x-button.group-input value="week" :active="$view === 'week'">
                        <span class="lg:hidden">7</span>
                        <span class="hidden lg:inline">Week</span>
                    </x-button.group-input>
                    <x-button.group-input value="month" :active="$view === 'month'">
                        <span class="lg:hidden">31</span>
                        <span class="hidden lg:inline">Month</span>
                    </x-button.group-input>
                    <x-button.group-input value="four" :active="$view === 'four'">
                        <span class="lg:hidden">4</span>
                        <span class="hidden lg:inline">4-day</span>
                    </x-button.group-input>
                    <noscript><button type="submit" class="button">Apply</button></noscript>
                </form>
            </li>
            <li class="gap-0 flex flex-row">
                <a class="button button--icon" href="{{ route('calendar.settings') }}">
                    <x-icon-settings />
                </a>
                @if($eventCalendarSlug)
                    <a class="button button--icon"
                       href="{{ route('calendar.event.create', $eventCalendarSlug) }}"
                       hx-get="{{ route('calendar.event.create', $eventCalendarSlug) }}"
                       hx-target="#modal"
                       hx-push-url="false"
                       hx-swap="innerHTML"
                       aria-label="{{ __('Create Event') }}">
                        <x-icon-plus-circle />
                    </a>
                @endif
            </li>
        </menu>
    </x-slot>

    <x-slot name="article">
    @switch($view)
        @case('week')
            <x-calendar.week
                class="week time"
                :grid="$grid"
                :calendars="$calendars"
                :events="$events_time"
                :all_day_events="$events_all_day"
                :has_all_day="$has_all_day"
                :slots="$slots"
                :timeformat="$time_format"
                :hgroup="$hgroup"
                :active="$active"
                :density="$density"
                :weekstart="$week_start"
                :daytime_hours="$daytime_hours"
                :timezone="$timezone"
                :now="$now"
            />
            @break
        @case('day')
            <x-calendar.day
                class="day time"
                :grid="$grid"
                :calendars="$calendars"
                :events="$events_time"
                :all_day_events="$events_all_day"
                :has_all_day="$has_all_day"
                :slots="$slots"
                :timeformat="$time_format"
                :hgroup="$hgroup"
                :active="$active"
                :density="$density"
                :daytime_hours="$daytime_hours"
                :timezone="$timezone"
                :now="$now"
            />
            @break
        @case('four')
            <x-calendar.four
                class="four time"
                :grid="$grid"
                :calendars="$calendars"
                :events="$events_time"
                :all_day_events="$events_all_day"
                :has_all_day="$has_all_day"
                :slots="$slots"
                :timeformat="$time_format"
                :hgroup="$hgroup"
                :active="$active"
                :density="$density"
                :daytime_hours="$daytime_hours"
                :timezone="$timezone"
                :now="$now"
            />
            @break
        @default
            <x-calendar.month
                class="month"
                :grid="$grid"
                :calendars="$calendars"
                :events="$events"
                :hgroup="$hgroup"
                :active="$active"
            />
    @endswitch
    </x-slot>

</x-app-layout>
