<!DOCTYPE html>
<html lang="en">
<head>
    @include ('head')
    @include('partials.facebook-pixel')
</head>

<body class="relative h-full flex flex-col {{ isset($page) ? $page->version?->theme : '' }} print:block min-h-[100vh] {{ auth()->user()?->dark_mode ? 'dark' : '' }}">
       

        @include('partials.facebook-pixel-noscript')

        <!-- Google Tag Manager (noscript) -->
        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W76R78HW"
        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
        <!-- End Google Tag Manager (noscript) -->

      <div id="app" class="relative flex-1 flex lg:justify-center print:block {{ request('preview') ? 'border-4 md:border-8 border-yellow-300' : '' }}">

        <page-setter :paginate-count="{{ session()->get('paginate_count', 10) }}"
            @if (auth()->user()?->hasRole('pages-editor') && editing())
                :expanded-page-ids='@json(session()->get("expanded_page_ids")?->values())'
            @endif
            @isset($page)
                @if ($page->parentPageIds)
                    :parent-page-ids="{{ $page->parentPageIds }}"
                @endif
            @endisset
            @isset($slug)
                slug="{{ $slug }}"
            @endisset
        ></page-setter>

        @auth
            @if (editing() && !request('preview') && auth()->user()?->hasRole('pages-editor'))
                <page-side-menu> </page-side-menu>
            @endif
        @endauth

        <div id="main" class="relative flex-1 flex flex-col print:block items-center w-full max-w-[1920px]">

            <div class="sticky top-0 z-50 w-full max-w-7xl" id="feedback-container">
                <div class="absolute w-full flex justify-center">
                    <div class="w-full relative">
                        <feedback 
                            v-if="pageLoaded"
                            :errors='@json($errors)' 
                            :error='@json(isset($error) ? $error : session("error"))' 
                            :success='@json(isset($success) ? $success : session("success"))'
                            :class="editing ? 'mt-16 md:mt-24' : 'mt-16'"
                        ></feedback>
                    </div>
                </div>
            </div>

            <div class="hidden print:grid grid-cols-2 items-center py-2 mx-4 mt-2 mb-4 border-b border-gray-300">
                <a href="/"><img src="images/logo.svg" class="h-10" alt="Brentwood College School Logo" /></a>
                <div class="text-right"><a href="/" class="text-primary">www.brentwood.ca</a></div>
            </div>
            
            <div class="absolute h-full w-full max-w-7xl shadow-lg print:hidden"></div>

            @if (isset($page))
                @if (request('preview') && $page->version?->redirect)
                    <div class="z-10 relative border-b-2 border-primary bg-highlight w-full max-w-7xl px-4 grid place-items-center print:hidden">
                        <div class="">Redirects to: <a href="{{ $page->version->redirect }}" target="_blank">{{ $page->version->redirect }}</a></div>
                    </div>
                @endif
            @endif

            @include('header') 

            <div class="md:items-center flex-1 flex flex-col relative print:block w-full" id="content-container" @click="showMenu = false">

                <div class="main-bg absolute z-0 w-full max-w-7xl h-full"></div>

                <div class="flex flex-1 flex-col items-center w-full relative print:block">

                    @isset($page)
                        @if (!$page?->version?->randomize)
                            <div class="absolute max-w-6xl w-full h-full">
                                <div class="border-r-4 border-primary absolute top-0 h-full md:ml-33p z-2 red-line"></div>
                            </div>
                        @endif
                    @endisset

                    <div id="content" class="flex-1 flex flex-col relative print:block w-full items-center 
                        {{ isset($page) ? ($page?->version?->randomize && (!editing() || request('preview')) ? 'md:grid md:grid-cols-4 md:max-w-7xl md:grid-flow-dense md:p-8' : '') : '' }}
                    ">

                        @yield ('content')

                        @if (isset($page) && !editing())
                            @if ($page->type === 'blog' || $page->type === 'announcement')
                                @include ('publications-nav')
                            @endif
                        @endif

                        @if (isset($page) && (!editing() || request('preview')))
                            @if ($page->type === 'page' && $page->version?->sibling_nav)
                                <sibling-nav></sibling-nav>
                            @endif
                        @endif

                    </div>

                </div>

            </div>

            @include ('footer') 

        </div>

        <photo-viewer v-if="pageLoaded"></photo-viewer>

        @auth
            <email-confirmer v-if="pageLoaded"></email-confirmer>
            <timeout-check v-if="false"></timeout-check>
            <photo-tags v-if="pageLoaded"></photo-tags>
        @endauth

        <div class="hidden print:block p-4 max-w-7xl">
            <div class="border-t-4 border-primary pt-4 text-center w-full">
                <div class="text-center inline"><a href="https://www.brentwood.ca">www.brentwood.ca</a></div>
                <div class="text-center inline px-8"><a href="tel:2507435521">250.743.5521</a></div>
                <div class="text-center inline"><a href="mailto:info@brentwood.ca">info@brentwood.ca</a></div>
            </div>
            <div class="w-full text-center pt-1">2735 Mount Baker Road, Mill Bay, BC, Canada VOR 2P1</div>

            <div class="w-full text-center italic text-sm text-gray-500 pt-4">{{ request()->url() }}</div>

            <div class="w-full text-center italic text-sm text-gray-500 pt-1">
                @isset($page)
                    @if ($page->version)
                        <span class="mr-8">{{ $page->version->title ? $page->version->title.' - ' : '' }} Version ID: {{ $page->id }}-{{ $page->version->id }}</span>
                    @endif
                @endisset
                <span class="">Printed at <date-time date-time="{{ now()->toISOString() }}" :seconds="true"></date-time></span>
            </div>
        </div>

    </div>

    <!-- vue uses the <teleport to="#modal"></teleport> wrapper to send stuff here, we should try and remove this and just use body as the teleport target -->
    <div id="modal"></div>

<script async src="//www.instagram.com/embed.js"></script>
 <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-819887853"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'AW-819887853');
</script>
</body>
</html>
