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

<head>
    <%- include('./Partials/Head.ejs', {
        enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
    }) %>
    <style>
        /* Custom scrollbar for sidebar */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: transparent;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #e2e8f0;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #cbd5e1;
        }

        /* Code block copy button */
        .code-block-wrapper {
            position: relative;
        }
        .copy-button {
            position: absolute;
            top: 8px;
            right: 8px;
            padding: 6px 10px;
            font-size: 12px;
            font-weight: 500;
            color: #94a3b8;
            background: #1e293b;
            border: 1px solid #334155;
            border-radius: 6px;
            cursor: pointer;
            opacity: 0;
            transition: all 0.15s ease;
            z-index: 10;
        }
        .code-block-wrapper:hover .copy-button {
            opacity: 1;
        }
        .copy-button:hover {
            color: #f1f5f9;
            background: #334155;
            border-color: #475569;
        }
        .copy-button.copied {
            color: #a5b4fc;
            border-color: #a5b4fc;
        }

        /* Smooth transitions */
        * {
            scroll-behavior: smooth;
        }

        /* Better focus styles */
        a:focus-visible, button:focus-visible {
            outline: 2px solid #6366f1;
            outline-offset: 2px;
            border-radius: 4px;
        }
    </style>
</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/80 px-4 py-3 bg-slate-50/50">
            <button aria-label="Open navigation"
                    data-mobile-menu-open
                    class="inline-flex items-center gap-2 rounded-lg bg-white px-3 py-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50 hover:ring-slate-300 active:scale-[.98] transition-all">
                <svg class="h-5 w-5 text-slate-500" 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-medium text-slate-600 truncate max-w-[200px]"><%- link.title %></h1>
        </div>

        <!-- Mobile nav overlay -->
        <div data-mobile-menu-overlay class="fixed inset-0 z-40 bg-slate-900/50 backdrop-blur-sm lg:hidden hidden transition-opacity"></div>

        <!-- Mobile nav drawer -->
        <aside data-mobile-menu-drawer
               class="fixed inset-y-0 left-0 z-50 w-80 max-w-[calc(100vw-3rem)] overflow-y-auto bg-white px-6 py-6 shadow-2xl ring-1 ring-slate-900/10 lg:hidden transform transition-transform ease-out duration-300 -translate-x-full">
            <div class="flex items-center justify-between mb-6 pb-4 border-b border-slate-200">
                <span class="text-base font-semibold text-slate-900">Documentation</span>
                <button aria-label="Close navigation"
                        data-mobile-menu-close
                        class="rounded-lg p-2 text-slate-500 hover:text-slate-700 hover:bg-slate-100 transition-colors">
                    <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>

        <!-- Main content area -->
        <div class="relative mx-auto flex w-full max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-12">
            <!-- Desktop sidebar -->
            <div class="hidden lg:relative lg:block lg:flex-none">
                <div class="absolute inset-y-0 right-0 w-[50vw] bg-gradient-to-r from-slate-50 to-slate-50/0"></div>
                <div class="sticky top-[3.5rem] -ml-0.5 h-[calc(100vh-3.5rem)] w-64 overflow-y-auto overflow-x-hidden py-12 pl-0.5 pr-8 xl:w-72 xl:pr-12 custom-scrollbar">
                    <%- include('./Partials/Nav.ejs') %>
                </div>
            </div>

            <!-- Article content -->
            <div class="min-w-0 max-w-2xl flex-auto px-4 py-8 md:py-10 lg:py-12 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 }) %>

                <!-- Footer spacing -->
                <div class="h-16"></div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script>
        // Mobile menu toggle
        (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');
                requestAnimationFrame(()=>{
                    drawer.classList.remove('-translate-x-full');
                    overlay.classList.add('opacity-100');
                });
                document.body.classList.add('overflow-hidden');
            }

            function closeMenu(){
                drawer.classList.add('-translate-x-full');
                overlay.classList.remove('opacity-100');
                document.body.classList.remove('overflow-hidden');
                drawer.addEventListener('transitionend', function handler(e){
                    if(e.propertyName === 'transform'){
                        if(drawer.classList.contains('-translate-x-full')){
                            drawer.classList.add('hidden');
                            overlay.classList.add('hidden');
                        }
                        drawer.removeEventListener('transitionend', handler);
                    }
                });
            }

            openBtn.addEventListener('click', openMenu);
            overlay.addEventListener('click', closeMenu);
            closeBtn && closeBtn.addEventListener('click', closeMenu);
            document.addEventListener('keydown', (e)=>{ if(e.key==='Escape'){ closeMenu(); }});
        })();

        // Add copy buttons to code blocks
        (function(){
            document.querySelectorAll('pre').forEach(function(pre){
                // Skip if already has wrapper
                if(pre.parentElement.classList.contains('code-block-wrapper')) return;

                // Create wrapper
                const wrapper = document.createElement('div');
                wrapper.className = 'code-block-wrapper';
                pre.parentNode.insertBefore(wrapper, pre);
                wrapper.appendChild(pre);

                // Create copy button
                const button = document.createElement('button');
                button.className = 'copy-button';
                button.textContent = 'Copy';
                button.setAttribute('aria-label', 'Copy code to clipboard');
                wrapper.appendChild(button);

                // Copy functionality
                button.addEventListener('click', async function(){
                    const code = pre.querySelector('code');
                    const text = code ? code.textContent : pre.textContent;

                    try {
                        await navigator.clipboard.writeText(text);
                        button.textContent = 'Copied!';
                        button.classList.add('copied');
                        setTimeout(()=>{
                            button.textContent = 'Copy';
                            button.classList.remove('copied');
                        }, 2000);
                    } catch(err) {
                        button.textContent = 'Failed';
                        setTimeout(()=>{ button.textContent = 'Copy'; }, 2000);
                    }
                });
            });
        })();
    </script>
</body>

</html>