@extends('components.layout')

@section('body')
    <main x-data="{ sidebarOpen: false }">
        @include('partials.page-header')

        @if (isset($page->quick_exit_button) && $page->quick_exit_button === true)
            <div class="quick-exit-btn">
                <a href="https://google.com" class="btn btn-danger btn-xl">
                    Quick Exit
                </a>
            </div>
        @endif

        <div class="container">
            <button type="button"
                    class="mt-5 lg:hidden flex flex-row items-center justify-center gap-x-3 bg-primary-900 rounded-lg text-white font-bold text-center py-3 px-5 w-full"
                    @click="sidebarOpen = !sidebarOpen">
                <span>
                    <span x-html="sidebarOpen ? 'Close' : 'Open'"></span>
                    Side menu
                </span>

                <svg class="h-7 w-7 transition-all" x-bind:class="sidebarOpen ? 'rotate-180' : ''" viewBox="0 0 20 20"
                     fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd"
                          d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                          clip-rule="evenodd"></path>
                </svg>
            </button>
        </div>

        <div class="container py-5 lg:py-20">
            <div class="lg:grid lg:grid-cols-3 xl:grid-cols-4 gap-x-10">
                <div
                    x-show="sidebarOpen"
                    style="display: none;"
                    class="lg:!block print:hidden"
                    x-transition:enter="transition ease-out duration-100"
                    x-transition:enter-start="transform opacity-0 scale-95"
                    x-transition:enter-end="transform opacity-100 scale-100"
                    x-transition:leave="transition ease-in duration-75"
                    x-transition:leave-start="transform opacity-100 scale-100"
                    x-transition:leave-end="transform opacity-0 scale-95"
                >
                    @include('components.children-pages-sidebar')

                    @include('components.helpful-links')

                    @include('components.internal-ads')
                </div>

                <div class="lg:col-span-2 xl:col-span-3 content">
                    <div class="text-gray-400 mb-5 text-sm">
                        Last updated {{ $page->updated_at->format('j F Y') }}
                    </div>
                    <div class="block font-display text-3xl font-semibold [text-wrap:balance] sm:text-4xl">
                        {{ $page->title }}
                    </div>

                    
                    @if (count($tableOfContents) > 2)
                        <div class="mt-5 inline-block bg-gray-50 px-5 lg:px-10 py-5 lg:py-10">
                            <div class="font-semibold">
                                Table of Contents
                            </div>
                            <ul class="list-disc mt-3 ml-5 lg:ml-10 text-gray-800 space-y-2">
                                @foreach (Statamic::tag('toc')->depth(3)->context($__data)->field('content')->fetch() as $tag)
                                    <li>
                                        <a href="#{{ $tag['toc_id'] }}" class="hover:underline">
                                            {{ $tag['toc_title'] }}
                                        </a>

                                        @if ($tag['has_children'])
                                            <ul class="list-disc ml-5 mt-2 space-y-2">
                                                @foreach ($tag['children'] as $child)
                                                    <li>
                                                        <a href="#{{ $child['toc_id'] }}" class="hover:underline">
                                                            {{ $child['toc_title'] }}
                                                        </a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @endif
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="prose prose-a:text-blue-600 hover:prose-a:text-blue-500 max-w-none mt-8">
                        @foreach ($page->content as $content)
                            @include('partials.content-includes', [ 'content' => $content ])
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection
 ?>