{% extends "base.html" %}

{% block extra_styles %}
<style>
    .layout {
        display: flex;
        min-height: calc(100vh - var(--header-height));
    }

    .sidebar {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: var(--sidebar-width);
        height: calc(100vh - var(--header-height));
        padding: var(--space-6) var(--space-4);
        background-color: var(--color-bg-secondary);
        border-right: 1px solid var(--color-border);
        overflow-y: auto;
        z-index: 10;
    }

    .sidebar-section {
        margin-bottom: var(--space-6);
    }

    .sidebar-title {
        font-size: var(--text-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-muted);
        margin: 0 0 var(--space-2) 0;
        padding: 0 var(--space-2);
    }

    .sidebar-nav {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .sidebar-nav li {
        margin: 0;
    }

    .sidebar-link {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2);
        font-size: var(--text-sm);
        color: var(--color-text);
        border-radius: var(--radius-md);
        transition: background-color var(--transition-fast), color var(--transition-fast);
    }

    .sidebar-link:hover {
        background-color: var(--color-bg-tertiary);
        text-decoration: none;
    }

    .sidebar-link.active {
        background-color: var(--color-primary);
        color: var(--color-text-inverse);
    }

    .sidebar-link .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.25rem;
        height: 1.25rem;
        padding: 0 var(--space-1);
        font-size: var(--text-xs);
        font-weight: 500;
        border-radius: 9999px;
        background-color: var(--color-bg-tertiary);
        color: var(--color-text-muted);
    }

    .sidebar-link.active .badge {
        background-color: rgba(255,255,255,0.2);
        color: var(--color-text-inverse);
    }

    .content-area {
        flex: 1;
        min-width: 0;
        padding: var(--space-8);
        max-width: var(--content-max-width);
        margin-left: var(--sidebar-width);
    }

    /* Mobile menu toggle */
    .mobile-menu-toggle {
        display: none;
        position: fixed;
        bottom: var(--space-6);
        right: var(--space-6);
        width: 48px;
        height: 48px;
        border: none;
        border-radius: 50%;
        background-color: var(--color-primary);
        color: var(--color-text-inverse);
        box-shadow: var(--shadow-lg);
        cursor: pointer;
        z-index: 100;
    }

    .mobile-menu-toggle svg {
        width: 24px;
        height: 24px;
    }

    /* Mobile styles */
    @media (max-width: 768px) {
        .sidebar {
            position: fixed;
            left: 0;
            top: 0;
            height: 100vh;
            z-index: 50;
            transform: translateX(-100%);
            transition: transform var(--transition-base);
        }

        .sidebar.open {
            transform: translateX(0);
        }

        .sidebar-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 40;
        }

        .sidebar-backdrop.open {
            display: block;
        }

        .content-area {
            padding: var(--space-4);
            margin-left: 0;
        }

        .mobile-menu-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
</style>
{% block page_styles %}{% endblock %}
{% endblock %}

{% block body_content %}
<div class="layout">
    <div class="sidebar-backdrop" onclick="toggleSidebar()"></div>

    <aside class="sidebar">
        {% block sidebar %}
        <nav class="sidebar-section">
            <h2 class="sidebar-title">Navigation</h2>
            <ul class="sidebar-nav">
                <li><a href="#overview" class="sidebar-link active">Overview</a></li>
                <li><a href="#namespaces" class="sidebar-link">Namespaces</a></li>
            </ul>
        </nav>

        <nav class="sidebar-section">
            <h2 class="sidebar-title">Classes</h2>
            <ul class="sidebar-nav">
                {% block sidebar_classes %}{% endblock %}
            </ul>
        </nav>

        <nav class="sidebar-section">
            <h2 class="sidebar-title">Properties</h2>
            <ul class="sidebar-nav">
                {% block sidebar_properties %}{% endblock %}
            </ul>
        </nav>
        {% endblock %}
    </aside>

    <main class="content-area">
        {% block main_content %}{% endblock %}
    </main>

    <button class="mobile-menu-toggle" onclick="toggleSidebar()" aria-label="Toggle navigation">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
    </button>
</div>

<script>
    function toggleSidebar() {
        document.querySelector('.sidebar').classList.toggle('open');
        document.querySelector('.sidebar-backdrop').classList.toggle('open');
    }

    // Close sidebar when clicking a link on mobile
    document.querySelectorAll('.sidebar-link').forEach(link => {
        link.addEventListener('click', () => {
            if (window.innerWidth <= 768) {
                toggleSidebar();
            }
        });
    });

    // Scroll spy: highlight sidebar link for the visible section
    (function() {
        const sections = document.querySelectorAll('section[id], .metadata-card[id]');
        const sidebarLinks = document.querySelectorAll('.sidebar-link');

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const id = entry.target.id;
                    sidebarLinks.forEach(link => {
                        link.classList.toggle('active', link.getAttribute('href') === '#' + id);
                    });
                }
            });
        }, {
            rootMargin: '-80px 0px -75% 0px'
        });

        sections.forEach(section => observer.observe(section));
    })();
</script>
{% endblock %}