<!DOCTYPE html>
<html lang="en" class="scroll-smooth">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{DOCUMENT_TITLE}}</title>
    <meta name="description" content="{{META_DESCRIPTION}}">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --brand-color: #4f46e5;
            /* Indigo 600 */
            --brand-color-light: #eef2ff;
            /* Indigo 50 */
            --brand-color-dark: #3730a3;
            /* Indigo 800 */
            --text-primary: #1e293b;
            /* Slate 800 */
            --text-secondary: #475569;
            /* Slate 600 */
            --bg-main: #f8fafc;
            /* Slate 50 */
            --bg-card: #ffffff;
            --border-color: #e2e8f0;
            /* Slate 200 */
        }

        html {
            scroll-padding-top: 5rem;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-main);
            color: var(--text-secondary);
        }

        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        .prose-custom h1,
        .prose-custom h2,
        .prose-custom h3,
        .prose-custom h4 {
            color: var(--text-primary);
            font-weight: 700;
            scroll-margin-top: 6rem;
        }

        .prose-custom h2 {
            font-size: 1.875rem;
            line-height: 2.25rem;
            font-weight: 800;
            letter-spacing: -0.025em;
        }

        .prose-custom h3 {
            margin-top: 3.5rem;
            font-size: 1.5rem;
            line-height: 2rem;
            font-weight: 700;
        }

        .prose-custom h4 {
            margin-top: 2.5rem;
            font-size: 1.25rem;
            line-height: 1.75rem;
            font-weight: 600;
        }

        .prose-custom a {
            color: var(--brand-color);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s ease;
        }

        .prose-custom a:hover {
            color: var(--brand-color-dark);
            text-decoration: underline;
        }

        .prose-custom code:not(pre code) {
            color: #c026d3;
            /* Fuchsia 600 */
            background-color: #fdf4ff;
            /* Fuchsia 50 */
            padding: 0.2em 0.4em;
            margin: 0;
            font-size: 0.875em;
            font-weight: 500;
            border-radius: 6px;
            border: 1px solid #f5d0fe;
        }

        .prose-custom blockquote {
            border-left-color: var(--brand-color);
            background-color: var(--brand-color-light);
            color: #312e81;
            /* Indigo 900 */
            padding: 1rem;
            font-weight: 500;
        }

        .prose-custom blockquote p:first-of-type::before {
            content: none;
        }

        .prose-custom blockquote p:last-of-type::after {
            content: none;
        }

        /* Sidebar styles */
        .sidebar-link {
            transition: all 0.2s ease;
            border-left-width: 2px;
        }

        .sidebar-link.active {
            color: var(--brand-color);
            font-weight: 600;
            border-left-color: var(--brand-color);
        }

        .sidebar-link:not(.active):hover {
            color: var(--text-primary);
            border-left-color: #cbd5e1;
        }

        /* Code block styles */
        .code-container {
            background-color: #1e293b;
            /* Slate 800 */
            border-radius: 0.5rem;
            margin-top: 1.5em;
            margin-bottom: 2em;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        }

        .code-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 1rem;
            background-color: #334155;
            /* Slate 700 */
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
            border-bottom: 1px solid #475569;
        }

        .code-lang {
            font-size: 0.875rem;
            color: #cbd5e1;
            /* Slate 300 */
            font-weight: 500;
            text-transform: uppercase;
        }

        .copy-button {
            background-color: transparent;
            color: #94a3b8;
            /* Slate 400 */
            border: none;
            padding: 0.25rem 0.5rem;
            border-radius: 0.375rem;
            cursor: pointer;
            font-size: 0.875rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: color 0.2s ease;
        }

        .copy-button:hover {
            color: #e2e8f0;
            /* Slate 200 */
        }

        .prose-custom pre {
            background-color: transparent;
            margin: 0;
            padding: 1rem;
            color: #e2e8f0;
        }

        /* Section Separation */
        .prose-custom section+section {
            margin-top: 4rem;
            /* 64px */
            padding-top: 4rem;
            /* 64px */
            border-top: 1px solid var(--border-color);
        }

        /* Accordion for FAQ/Glossary */
        .accordion-item details {
            border-bottom: 1px solid var(--border-color);
        }

        .accordion-item summary {
            padding: 1rem 0.25rem;
            font-weight: 600;
            color: var(--text-primary);
            cursor: pointer;
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: color 0.2s ease;
        }

        .accordion-item summary:hover {
            color: var(--brand-color);
        }

        .accordion-item summary::after {
            content: '\f078';
            /* Font Awesome chevron-down */
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            transition: transform 0.3s ease;
            font-size: 0.875rem;
        }

        .accordion-item details[open]>summary::after {
            transform: rotate(180deg);
        }

        .accordion-content {
            padding-bottom: 1rem;
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }
    </style>
</head>

<body class="antialiased">

    <!-- Header -->
    <header class="bg-white/90 backdrop-blur-sm border-b border-slate-200 sticky top-0 z-40">
        <div class="max-w-8xl mx-auto px-4 sm:px-6 md:px-8">
            <div class="flex items-center justify-between h-20">
                <a href="#" class="flex items-center gap-3">
                    <img src="{{LOGO_URL}}" alt="Logo" class="h-10 w-auto">
                    <span class="text-xl font-bold text-slate-800">{{HEADER_TITLE}}</span>
                </a>
                <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-slate-500 hover:text-slate-600 hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 lg:hidden">
                    <span class="sr-only">Open main menu</span>
                    <i id="menu-open-icon" class="fas fa-bars h-6 w-6"></i>
                    <i id="menu-close-icon" class="fas fa-times h-6 w-6 hidden"></i>
                </button>
            </div>
        </div>
    </header>

    <div class="max-w-8xl mx-auto px-4 sm:px-6 md:px-8">
        <div class="flex">
            <!-- Sidebar Navigation -->
            <aside id="sidebar" class="hidden lg:block fixed z-30 inset-0 top-[5.05rem] left-[max(0px,calc(50%-44rem))] right-auto w-[18rem] pb-10 pl-8 pr-6 overflow-y-auto">
                <nav id="sidebar-nav" class="relative">
                    <!-- Auto-generated navigation will be inserted here -->
                </nav>
            </aside>

            <!-- Main Content -->
            <main class="lg:pl-[19.5rem] pt-10 pb-24">
                <article class="prose prose-custom max-w-3xl prose-slate">
                    {{MARKDOWN_HTML_CONTENT}}
                </article>
            </main>
        </div>
    </div>
    
    <!-- Footer -->
    <footer class="bg-slate-800 text-slate-400 mt-12">
        <div class="max-w-8xl mx-auto px-4 sm:px-6 md:px-8 py-6 text-center text-sm">
            &copy; {{CURRENT_YEAR}} {{ORGANIZATION_NAME}}. All rights reserved.
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // --- Copy to Clipboard for Code Blocks ---
            document.querySelectorAll('.copy-button').forEach(button => {
                button.addEventListener('click', () => {
                    const pre = button.closest('.code-container').querySelector('pre');
                    const code = pre.innerText;
                    navigator.clipboard.writeText(code).then(() => {
                        const originalText = button.innerHTML;
                        button.innerHTML = `<i class="fa-solid fa-check text-green-400"></i> <span>Copied!</span>`;
                        setTimeout(() => {
                            button.innerHTML = originalText;
                        }, 2000);
                    }).catch(err => {
                        console.error('Failed to copy text: ', err);
                    });
                });
            });

            // --- Mobile Menu Toggle ---
            const mobileMenuButton = document.getElementById('mobile-menu-button');
            const sidebar = document.getElementById('sidebar');
            const openIcon = document.getElementById('menu-open-icon');
            const closeIcon = document.getElementById('menu-close-icon');

            mobileMenuButton.addEventListener('click', () => {
                sidebar.classList.toggle('hidden');
                openIcon.classList.toggle('hidden');
                closeIcon.classList.toggle('hidden');
            });

            // --- Auto-generate Sidebar Navigation ---
            const navContainer = document.getElementById('sidebar-nav');
            const contentSections = document.querySelectorAll('article section[id]');
            
            if (contentSections.length > 0) {
                const navGroups = {
                    "Overview": [],
                    "Setup & Configuration": [],
                    "Resources": []
                };
                
                contentSections.forEach(section => {
                    const heading = section.querySelector('h2');
                    if (!heading) return;

                    let groupName = "Setup & Configuration"; // Default group
                    if (['Introduction', 'Prerequisites'].includes(heading.textContent)) groupName = "Overview";
                    if (['Frequently Asked Questions', 'Glossary of Terms', 'Related Links'].includes(heading.textContent)) groupName = "Resources";

                    if(navGroups[groupName]) {
                        navGroups[groupName].push({
                            id: section.id,
                            title: heading.textContent
                        });
                    }
                });

                Object.keys(navGroups).forEach(groupName => {
                    if (navGroups[groupName].length === 0) return;

                    const groupDiv = document.createElement('div');
                    groupDiv.className = 'mb-6';
                    
                    const groupTitle = document.createElement('h3');
                    groupTitle.className = 'font-semibold text-slate-800 mb-3';
                    groupTitle.textContent = groupName;
                    groupDiv.appendChild(groupTitle);

                    const list = document.createElement('ul');
                    list.className = 'space-y-2 border-l-2 border-slate-200';
                    
                    navGroups[groupName].forEach(item => {
                        const listItem = document.createElement('li');
                        const link = document.createElement('a');
                        link.href = `#${item.id}`;
                        link.textContent = item.title;
                        link.className = 'sidebar-link block pl-4 -ml-px border-transparent text-slate-600 hover:text-slate-800';
                        listItem.appendChild(link);
                        list.appendChild(listItem);
                    });
                    groupDiv.appendChild(list);
                    navContainer.appendChild(groupDiv);
                });
            }

            // Close mobile menu when a link is clicked
            navContainer.addEventListener('click', (e) => {
                if (e.target.tagName === 'A' && window.innerWidth < 1024) {
                    mobileMenuButton.click();
                }
            });

            // --- Active Link Highlighting on Scroll ---
            const sections = document.querySelectorAll('section[id]');
            const sidebarLinks = document.querySelectorAll('.sidebar-link');
            let scrollTimeout;

            function throttle(callback, delay = 50) {
                if (scrollTimeout) return;
                scrollTimeout = setTimeout(() => {
                    callback();
                    scrollTimeout = null;
                }, delay);
            }

            function updateActiveLink() {
                const activeLine = window.innerHeight * 0.33;
                let currentActiveSectionId = null;

                for (const section of sections) {
                    const rect = section.getBoundingClientRect();
                    if (rect.top <= activeLine) {
                        currentActiveSectionId = section.id;
                    }
                }

                sidebarLinks.forEach(link => {
                    const linkHref = link.getAttribute('href');
                    const sectionId = linkHref.substring(1);
                    if (sectionId === currentActiveSectionId) {
                        link.classList.add('active');
                    } else {
                        link.classList.remove('active');
                    }
                });
            }

            const throttledUpdate = () => throttle(updateActiveLink);
            window.addEventListener('scroll', throttledUpdate);
            updateActiveLink(); // Initial call
        });
    </script>
</body>

</html>
