{{-- <x-app-layout>
    <x-slot name="header">
        <div class="dark:bg-slate-800 dark:text-slate-300 pt-8">
            <h2 class="font-semibold text-xl dark:bg-slate-800 dark:text-slate-300 leading-tight pt-8">
                <ol class="list-none p-0 inline-flex text-sm sm:text-base dark:bg-slate-800 dark:text-slate-300">
                    <li class="flex items-center dark:text-slate-300 ml-1">
                        <a href="{{route('dashboard')}}"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                            </svg></a>
                        <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
                    </li>
                    <li class="flex items-center ml-1">
                        <span class="text-slate-800 dark:bg-slate-800 dark:text-slate-300"><a href="{{route('help.index')}}">{{ __('Help') }}</a></span>
                        <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
                    </li>
                    <li class="flex items-center ml-1">
                        <span class="text-slate-800 dark:bg-slate-800 dark:text-slate-300">{{ __('User Guide') }}</span>
                        <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
                    </li>
                </ol>
            </h2>
        </div>
    </x-slot>
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg dark:bg-slate-900">
            <div class="flex justify-center container">
                <div class="grid grid-cols-1 space-y-6 w-full">
                    <div class="card">
                        <div class="card-header">
                            <div class="text-2xl font-bold">Onsite Staff Guide</div>
                            <div class=""><a target="_blank" class="btn btn-blue" href="{{ asset('/documentation/onsite-staff-guide') }}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
    </svg>
    Download PDF</a></div>
                        </div>
                        <div class="card-body">
                            <div class="hidden sm:block">
                                <div class="w-full h-full">
                                    <iframe class="w-full" src ="{{ asset('/documentation/onsite-staff-guide') }}" height="780px"></iframe>
                                </div>
                            </div>
                            <div class="sm:hidden sm:block">
                                <div class="w-full h-full">
                                    <iframe class="w-full" src ="{{ asset('/documentation/onsite-staff-guide') }}" height="780px"></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout> --}}



<x-app-layout>
    <x-slot name="header">
        <div class="dark:bg-slate-800 dark:text-slate-300 pt-8">
            <h2 class="font-semibold text-xl dark:bg-slate-800 dark:text-slate-300 leading-tight pt-8">
                <ol class="list-none p-0 inline-flex text-sm sm:text-base dark:bg-slate-800 dark:text-slate-300">
                    <li class="flex items-center dark:text-slate-300 ml-1">
                        <a href="{{route('dashboard')}}"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                            </svg></a>
                        <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
                    </li>
                    <li class="flex items-center ml-1">
                        <span class="text-slate-800 dark:bg-slate-800 dark:text-slate-300"><a href="{{route('help.index')}}">{{ __('Help') }}</a></span>
                        <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
                    </li>
                    <li class="flex items-center ml-1">
                        <span class="text-slate-800 dark:bg-slate-800 dark:text-slate-300">{{ __('User Guide') }}</span>
                        <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
                    </li>
                </ol>
            </h2>
        </div>
    </x-slot>
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg dark:bg-slate-900">
            <div class="flex justify-center container">
                <div class="grid grid-cols-1 space-y-6 w-full">
                    <div class="card">
                        <div class="card-header">
                            <div class="text-2xl font-bold">Onsite Staff Guide</div>
                            <div class=""><a target="_blank" class="btn btn-blue" href="{{ asset('/documentation/onsite') }}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
    </svg>
    Download PDF</a></div>
                        </div>
                        <div class="card-body">
                            <div class="hidden sm:block">
                                <div class="w-full h-full">
                                    <iframe class="w-full" src ="{{ asset('/documentation/onsite') }}" height="780px"></iframe>
                                </div>
                            </div>
                            <div class="sm:hidden sm:block">
                                <div class="w-full h-full">
                                    <iframe class="w-full" src ="{{ asset('/documentation/onsite') }}" height="780px"></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pt-2">
                @livewire('footer-links')
            </div>
        </div>
    </div>
</x-app-layout>