<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"
            class="aside-inset"
        />
    </x-slot>

    <x-slot name="header">
        <h2>
            <strong>{{ $header['strong'] }}</strong>
            @if(!empty($header['span']))
            <span>{{ $header['span'] }}</span>
            @endif
        </h2>
        <menu>
            <li>
                <a class="button button--icon" href="{{ route('calendar.settings') }}">
                    <x-icon-settings />
                </a>
            </li>
            <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'] }}">

                    <nav class="button-group button-group--primary">
                        <x-button.group-button
                            type="submit"
                            name="date"
                            value="{{ $nav['prev'] }}"
                            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'] }}"
                            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'] }}">
                    <x-button.group-input value="day" :active="$view === 'day'">Day</x-button.group-input>
                    <x-button.group-input value="week" :active="$view === 'week'">Week</x-button.group-input>
                    <x-button.group-input value="month" :active="$view === 'month'">Month</x-button.group-input>
                    <x-button.group-input value="four" :active="$view === 'four'">3-Up</x-button.group-input>
                    <noscript><button type="submit" class="button">Apply</button></noscript>
                </form>
            <li>
                <a class="button button--primary" href="{{ route('calendar.create') }}">
                    <x-icon-plus-circle /> Create
                </a>
            </li>
        </menu>
    </x-slot>

    <x-slot name="article">
    @switch($view)
        @case('week')
            <x-calendar.week
                class="week time"
                :grid="$grid"
                :calendars="$calendars"
                :events="$events"
                :slots="$slots"
                :timeformat="$time_format"
                :hgroup="$hgroup"
                :active="$active"
                :density="$density"
                :weekstart="$week_start"
                :now="$now"
            />
            @break
        @case('day')
            <x-calendar.day
                class="day time"
                :grid="$grid"
                :calendars="$calendars"
                :events="$events"
                :slots="$slots"
                :timeformat="$time_format"
                :hgroup="$hgroup"
                :active="$active"
                :density="$density"
                :now="$now"
            />
            @break
        @case('four')
            <x-calendar.four
                class="four time"
                :grid="$grid"
                :calendars="$calendars"
                :events="$events"
                :slots="$slots"
                :timeformat="$time_format"
                :hgroup="$hgroup"
                :active="$active"
                :density="$density"
                :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>
