<html lang="en" class="h-full antialiased __variable_e66fe9 __variable_b436a8 light nbuofyfqi idc0_350"
    style="color-scheme: light;">

<head>
    <%- include('./Partials/Head.ejs', {
        enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
    }) %>
</head>

<body class="flex min-h-full bg-white">
    <div class="flex w-full flex-col">
        <%- include('./Partials/Header.ejs') %>
        <!-- Mobile top bar with menu button -->
        <div class="flex items-center justify-between lg:hidden border-b border-slate-200 px-4 py-2 gap-2">
            <button aria-label="Open navigation" data-mobile-menu-open class="inline-flex items-center gap-2 rounded-md border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-600 shadow-sm active:scale-[.97]">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
                Menu
            </button>
            <h1 class="text-sm font-semibold text-slate-700 truncate"><%- link.title %></h1>
        </div>
        <!-- Mobile nav overlay -->
        <div data-mobile-menu-overlay class="fixed inset-0 z-40 bg-slate-900/40 lg:hidden hidden"></div>
        <aside data-mobile-menu-drawer class="fixed inset-y-0 left-0 z-50 w-72 overflow-y-auto bg-white px-6 py-6 shadow-lg ring-1 ring-slate-900/10 lg:hidden transform transition ease-out duration-200 -translate-x-full hidden">
            <div class="flex items-center justify-between mb-4">
                <span class="text-sm font-semibold text-slate-700">Documentation</span>
                <button aria-label="Close navigation" data-mobile-menu-close class="rounded-md p-2 text-slate-500 hover:text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-500"><svg class="h-5 w-5" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
            </div>
            <%- include('./Partials/Nav.ejs') %>
        </aside>
        <div class="relative mx-auto flex w-full max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-12">
            <div class="hidden lg:relative lg:block lg:flex-none">
                <div class="absolute inset-y-0 right-0 w-[50vw] bg-slate-50"></div>
                <div class="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800"></div>
                <div class="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800"></div>
                <div class="sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-4.75rem)] w-64 overflow-y-auto overflow-x-hidden py-16 pl-0.5 pr-8 xl:w-72 xl:pr-16">
                    <%- include('./Partials/Nav.ejs') %>
                </div>
            </div>
            <div class="min-w-0 max-w-2xl flex-auto px-4 py-8 md:py-12 lg:py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
                <%- include('./Partials/Content.ejs', { category: category, link: link, content: content }) %>
                <%- include('./Partials/OpenSourceCommitment.ejs', { githubPath: githubPath }) %>
            </div>
        </div>
    </div>
    <!-- Mobile menu toggle (vanilla JS) -->
    <script>
        (function(){
            const openBtn = document.querySelector('[data-mobile-menu-open]');
            const closeBtn = document.querySelector('[data-mobile-menu-close]');
            const overlay = document.querySelector('[data-mobile-menu-overlay]');
            const drawer = document.querySelector('[data-mobile-menu-drawer]');
            if(!openBtn || !overlay || !drawer){ return; }
            function openMenu(){
                overlay.classList.remove('hidden');
                drawer.classList.remove('hidden');
                // trigger slide in
                requestAnimationFrame(()=>{
                    drawer.classList.remove('-translate-x-full');
                });
                document.body.classList.add('overflow-hidden');
            }
            function closeMenu(){
                drawer.classList.add('-translate-x-full');
                overlay.classList.add('hidden');
                document.body.classList.remove('overflow-hidden');
                // after transition hide drawer
                drawer.addEventListener('transitionend', function handler(e){
                    if(e.propertyName === 'transform'){
                        if(drawer.classList.contains('-translate-x-full')){
                            drawer.classList.add('hidden');
                        }
                        drawer.removeEventListener('transitionend', handler);
                    }
                });
            }
            openBtn.addEventListener('click', openMenu);
            overlay.addEventListener('click', closeMenu);
            closeBtn && closeBtn.addEventListener('click', closeMenu);
            // Close on escape
            document.addEventListener('keydown', (e)=>{ if(e.key==='Escape'){ closeMenu(); }});
        })();
    </script>
</body>

</html>