@isset($page)
        @if (request('preview')) 
            <div class="sticky top-0 z-20 w-full max-w-7xl">
                    <div class="font-semibold w-full bg-yellow-200 flex justify-center items-center">
                        <div class="px-2 hidden md:block">
                            <div class="w-8 h-6 grid place-items-center bg-color cp border border-color rounded" @click="openMobilePreview()"><fa-icon icon="fas fa-mobile-screen-button"></fa-icon></div>
                        </div>
                        <div class="">Draft Preview</div>
                        <div class="flex items-center px-2 mx-2 border border-color bg-color rounded cp" @click="closeWindow()" dusk="close-preview">
                            <div class="icon"><fa-icon icon="fas fa-times"></fa-icon></div>
                            <div class="pl-1">Close</div>
                        </div>
                    </div>
            </div>
        @endif 
    @endisset

    @env('local')
        <div class="fixed text-sm w-6 h-6 grid place-items-center border border-color rounded cp m-1 bg-highlight z-[100] bottom-0 right-0 print:hidden">
            <div class="" @click="toggleDebug()" dusk="debug"><fa-icon icon="fas fa-bug"></fa-icon></div>
        </div>
    @endenv

    <div class="sticky top-0 z-20 md:relative w-full max-w-7xl flex justify-center relative {{ request('preview') ? 'h-0 overflow-hidden pointer-events-none' : '' }} print:hidden">

        <div class="flex w-full relative max-w-7xl shadow header-container justify-between">

            <div class="min-w-[84px] {{ request('preview') ? 'hidden' : '' }}">
                <mobile-menu v-if="pageLoaded"></mobile-menu>
            </div>

            <div class="p-1 grid place-items-center">
                <a href="/" class=""><img fetchpriority="low" src="images/logo.svg" width="169" height="40" class="max-h-[30px] md:max-h-[40px]" alt="Brentwood College School Logo" /></a>
            </div>

            <div class="flex items-center py-1 md:min-w-[125px] justify-end">

	      @guest
               @if (request()->path() !== 'myschool')
                <login-button v-if="pageLoaded"></login-button>
               @endif
              @endguest


	    	@auth
                    @if (auth()->user()->hasRole('admin'))
                        <a class="mr-1" href="/hub?editing=false" dusk="go-to-hub">Hub</a>
                    @endif
                    <div class="min-w-[40px]">
                        <user-menu v-if="pageLoaded"></user-menu>
                    </div>
                    @if (isset($page))
                        @if ((auth()->user()->can('update', $page) && !request('preview')) || auth()->user()->editing)
                            <div class="min-w-[40px]">
                                <editing-button v-if="pageLoaded"></editing-button>
                            </div>
                        @endif
                    @endif
                @endauth

                <div class="min-w-[40px]">
                    <global-search paginator-id="header-search" v-if="pageLoaded"></global-search>
                </div>

            </div>

        </div>

    </div>

    <div class="w-full max-w-7xl sticky top-0 z-11 min-h-[37px] {{ request('preview') || editing() ? 'hidden' : 'hidden md:block' }} print:hidden">
        <top-menu v-if="pageLoaded"></top-menu>
    </div>

    @isset($page)

        @if ($page->type === 'page' && !editing() && $page->id > 1)

           @if ($page->visible_sub_menu)
                <div class="sticky top-9 z-10 max-w-7xl w-full sub-menu-container shadow rounded-br items-center hidden md:flex border-l-2 border-primary md:py-1 print:hidden">
                    <a href="{{ $page->parentPage->full_slug }}"
                        class="inline-flex text-color ml-2 items-center breadcrumb-link hidden"
                    >
                        <div class="pr-2 {{ $page->parentPage->version->parent_page_id === 1 && $page->parentPage->version->unlisted ? '' : '' }}">{{ $page->parentPage->name }}</div>
                    </a>
                    <div class="w-4 ml-2"><fa-icon icon="fas fa-angle-right"></fa-icon></div>
                    <div class="flex">
                        @foreach ($page->parentPage->sub_menu as $menu_page)
                                <a href="{{ $menu_page->full_slug }}"
                                    class="menu-sub-page-link inline-block pt-[2px] border-b border-transparent -mb-[2px] mx-3 px-2 {{ $menu_page->full_slug === request()->path() ? 'sub-page-active font-semibold border-primary' : '' }}"
                                >
                                    {{ $menu_page->version->name }}
                                </a>
				@endforeach

			<a href="https://www.brentwood.ca/news"
   class="menu-sub-page-link inline-block pt-[2px] border-b border-transparent -mb-[2px] mx-3 px-2 {{ request()->path() === 'news' ? 'sub-page-active font-semibold border-primary' : '' }}"
>
    News
</a>
                    </div>
                </div>
            @endif


            @if ($page->getBreadcrumbs()->count() > 1)
                <div class="sticky z-10 top-10 md:top-9 w-full max-w-7xl {{ $page->parentPage?->version?->show_sub_menu ? 'md:hidden' : '' }} {{ $page->parentPage?->version?->unlisted ? 'hidden' : '' }} print:hidden">
                    @include ('breadcrumbs')
                </div>
            @endif
        @endif

        @if (auth()->user()?->can('update', $page) && editing())
            <page-editor v-if="page"></page-editor>

            @if ($page->type !== 'page' && !request('preview'))

                <div class="flex justify-center w-full relative">
                    <div class="md:flex max-w-7xl w-full">
                        <div class="flex-2 flex flex-wrap items-center whitespace-nowrap py-1 breadcrumbs shadow px-2 bg-color border-t border-color">
                            <a class="breadcrumb whitespace-nowrap" href="{{ Illuminate\Support\Str::plural($page->type) }}-manage" dusk="link-{{ $page->type }}-listings">&lt; {{ Illuminate\Support\Str::title($page->type) }} Listings</a>
                        </div>
                    </div>
                </div>

            @endif

        @endif

    @endisset