<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ project_name }} - Auto-Generated Documentation</title>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2c3e50;
            --accent-color: #e74c3c;
            --light-bg: #f5f5f5;
            --dark-bg: #2c3e50;
            --text-color: #333;
            --light-text: #f5f5f5;
            --border-color: #ddd;
            --success-color: #2ecc71;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: #2c3e50;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        header {
            background-color: var(--dark-bg);
            color: var(--light-text);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .project-info {
            display: flex;
            flex-direction: column;
        }

        .project-title {
            font-size: 1.8rem;
            margin-bottom: 0.2rem;
        }

        .project-path {
            font-size: 0.9rem;
            opacity: 0.8;
        }

        .last-updated {
            font-size: 0.9rem;
            font-style: italic;
        }

        .main-content {
            display: flex;
            margin-top: 2rem;
        }

        /* Sidebar Navigation */
        .sidebar {
            width: 250px;
            position: sticky;
            top: 80px;
            height: calc(100vh - 80px);
            overflow-y: auto;
            padding-right: 20px;
        }

        .sidebar h2 {
            font-size: 1.2rem;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--border-color);
        }

        .nav-section {
            margin-bottom: 1.5rem;
        }

        .nav-title {
            font-weight: bold;
            margin-bottom: 0.5rem;
            color: var(--secondary-color);
        }

        .nav-items {
            list-style: none;
            margin-left: 1rem;
        }

        .nav-items li {
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }

        .nav-items a {
            text-decoration: none;
            color: var(--primary-color);
        }

        .nav-items a:hover {
            text-decoration: underline;
        }

        /* Main Documentation Area */
        .documentation {
            flex: 1;
            padding-left: 30px;
            border-left: 1px solid var(--border-color);
        }

        .section {
            margin-bottom: 2.5rem;
        }

        .section-title {
            font-size: 1.8rem;
            color: var(--secondary-color);
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--border-color);
        }

        /* Project Structure */
        .structure-tree {
            font-family: monospace;
            white-space: pre;
            background-color: var(--light-bg);
            padding: 1rem;
            border-radius: 5px;
            overflow-x: auto;
        }

        /* File Documentation */
        .file-item {
            margin-bottom: 2rem;
            padding: 1.5rem;
            background-color: #fff;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .file-path {
            font-size: 1.2rem;
            color: var(--secondary-color);
            font-weight: bold;
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }

        .file-icon {
            margin-right: 0.5rem;
            color: var(--primary-color);
        }

        .module-docstring {
            background-color: rgba(46, 204, 113, 0.1);
            border-left: 3px solid var(--success-color);
            padding: 0.8rem 1rem;
            margin: 1rem 0;
            font-style: italic;
            white-space: pre-wrap;
        }

        .file-section {
            margin-top: 1.5rem;
        }

        .file-section-title {
            font-size: 1.1rem;
            color: var(--secondary-color);
            margin-bottom: 0.8rem;
            padding-bottom: 0.3rem;
            border-bottom: 1px dashed var(--border-color);
        }

        /* Code Elements */
        .imports {
            font-family: monospace;
            background-color: var(--light-bg);
            padding: 0.8rem;
            border-radius: 4px;
            overflow-x: auto;
        }

        .function, .class {
            margin-bottom: 1.5rem;
            padding: 1rem;
            background-color: var(--light-bg);
            border-radius: 5px;
        }

        .item-name {
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

        .item-signature {
            font-family: monospace;
            background-color: #f5f5f5;
            padding: 8px;
            border-radius: 4px;
            margin-bottom: 8px;
        }

        .docstring {
            background-color: rgba(52, 152, 219, 0.1);
            border-left: 3px solid var(--primary-color);
            padding: 0.8rem;
            margin: 0.8rem 0;
            white-space: pre-wrap;
        }

        .methods {
            margin-left: 1.5rem;
            margin-top: 1rem;
        }

        .method {
            margin-bottom: 1rem;
            padding: 0.8rem;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 4px;
        }

        /* Meta Information */
        .meta-info {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 0.5rem;
        }

        .decorator {
            color: var(--accent-color);
            font-family: monospace;
            background-color: rgba(231, 76, 60, 0.1);
            padding: 0.1rem 0.3rem;
            border-radius: 3px;
            margin-right: 0.3rem;
        }

        /* Search */
        .search-container {
            margin-bottom: 1.5rem;
        }

        #search-input {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 0.9rem;
        }

        /* Statistics */
        .stats {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .stat-item {
            background-color: var(--light-bg);
            padding: 0.8rem;
            border-radius: 5px;
            flex: 1;
            text-align: center;
        }

        .stat-value {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary-color);
        }

        .stat-label {
            font-size: 0.9rem;
            color: var(--secondary-color);
        }

        /* Media Queries */
        @media (max-width: 900px) {
            .main-content {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                position: relative;
                top: 0;
                height: auto;
                margin-bottom: 2rem;
                padding-bottom: 2rem;
                border-bottom: 1px solid var(--border-color);
            }

            .documentation {
                padding-left: 0;
                border-left: none;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div class="project-info">
                <h1 class="project-title">{{ project_name }}</h1>
                <div class="project-path">{{ project_path }}</div>
            </div>
            <div class="last-updated">Last updated: {{ last_updated }}</div>
        </div>
    </header>

    <div class="container">
        <div class="main-content">
            <aside class="sidebar">
                <div class="search-container">
                    <input type="text" id="search-input" placeholder="Search documentation...">
                </div>

                <div class="stats">
                    <div class="stat-item">
                        <div class="stat-value">{{ total_files }}</div>
                        <div class="stat-label">Files</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{ total_classes }}</div>
                        <div class="stat-label">Classes</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{ total_functions }}</div>
                        <div class="stat-label">Functions</div>
                    </div>
                </div>

                <h2>Navigation</h2>

                <div class="nav-section">
                    <div class="nav-title">Project</div>
                    <ul class="nav-items">
                        <li><a href="#overview">Overview</a></li>
                        <li><a href="#structure">Structure</a></li>
                    </ul>
                </div>

                <div class="nav-section">
                    <div class="nav-title">Files</div>
                    <ul class="nav-items">
                        {% for file_path in files %}
                        <li><a href="#file-{{ file_path|slugify }}">{{ file_path }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
            </aside>

            <div class="documentation">
                <section id="overview" class="section">
                    <h2 class="section-title">Project Overview</h2>
                    <p>This documentation was automatically generated for <strong>{{ project_name }}</strong>.</p>
                    {% if project_description %}
                    <div class="module-docstring">{{ project_description }}</div>
                    {% endif %}
                </section>

                <section id="structure" class="section">
                    <h2 class="section-title">Project Structure</h2>
                    <div class="structure-tree">{{ structure_tree }}</div>
                </section>

                <section id="files" class="section">
                    <h2 class="section-title">Files</h2>
                    
                    {% for file_path, file_info in files_info.items() %}
                    <div id="file-{{ file_path|slugify }}" class="file-item">
                        <h3 class="file-path">
                            <span class="file-icon">📄</span> {{ file_path }}
                        </h3>

                        {% if file_info.module_docstring %}
                        <div class="module-docstring">{{ file_info.module_docstring }}</div>
                        {% endif %}

                        {% if file_info.imports %}
                        <div class="file-section">
                            <h4 class="file-section-title">Imports</h4>
                            <div class="imports">
                                {% for import_statement in file_info.imports %}
                                {{ import_statement }}<br>
                                {% endfor %}
                            </div>
                        </div>
                        {% endif %}

                        {% if file_info.classes %}
                        <div class="file-section">
                            <h4 class="file-section-title">Classes</h4>
                            
                            {% for class_name, class_info in file_info.classes.items() %}
                            <div class="class">
                                <div class="item-name">{{ class_name }}</div>
                                
                                {% if class_info.base_classes %}
                                <div class="meta-info">
                                    <strong>Inherits from:</strong> {{ class_info.base_classes|join(', ') }}
                                </div>
                                {% endif %}

                                {% if class_info.decorators %}
                                <div class="meta-info">
                                    {% for decorator in class_info.decorators %}
                                    <span class="decorator">@{{ decorator }}</span>
                                    {% endfor %}
                                </div>
                                {% endif %}

                                {% if class_info.docstring %}
                                <div class="docstring">{{ class_info.docstring }}</div>
                                {% endif %}

                                {% if class_info.methods %}
                                <div class="methods">
                                    <h5>Methods</h5>
                                    
                                    {% for method_name, method_info in class_info.methods.items() %}
                                    <div class="method">
                                        <div class="item-name">{{ method_name }}</div>
                                        
                                        <div class="item-signature">
                                            {% if method_info.is_async %}async {% endif %}def {{ method_name }}({{ method_info.params|join(', ') }})
                                            {% if method_info.return_type %} -> {{ method_info.return_type }}{% endif %}
                                        </div>
                                        
                                        {% if method_info.decorators %}
                                        <div class="meta-info">
                                            {% for decorator in method_info.decorators %}
                                            <span class="decorator">@{{ decorator }}</span>
                                            {% endfor %}
                                        </div>
                                        {% endif %}

                                        {% if method_info.docstring %}
                                        <div class="docstring">{{ method_info.docstring }}</div>
                                        {% endif %}
                                    </div>
                                    {% endfor %}
                                </div>
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>
                        {% endif %}

                        {% if file_info.functions %}
                        <div class="file-section">
                            <h4 class="file-section-title">Functions</h4>
                            
                            {% for func_name, func_info in file_info.functions.items() %}
                            <div class="function">
                                <div class="item-name">{{ func_name }}</div>
                                
                                <div class="item-signature">
                                    {% if func_info.is_async %}async {% endif %}def {{ func_name }}({{ func_info.params|join(', ') }})
                                    {% if func_info.return_type %} -> {{ func_info.return_type }}{% endif %}
                                </div>
                                
                                {% if func_info.decorators %}
                                <div class="meta-info">
                                    {% for decorator in func_info.decorators %}
                                    <span class="decorator">@{{ decorator }}</span>
                                    {% endfor %}
                                </div>
                                {% endif %}

                                {% if func_info.docstring %}
                                <div class="docstring">{{ func_info.docstring }}</div>
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </section>
            </div>
        </div>
    </div>

    <script>
        
        const searchInput = document.getElementById('search-input');
        
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            const fileItems = document.querySelectorAll('.file-item');
            
            fileItems.forEach(item => {
                const filePath = item.querySelector('.file-path').textContent.toLowerCase();
                const fileContent = item.textContent.toLowerCase();
                
                if (filePath.includes(searchTerm) || fileContent.includes(searchTerm)) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
        });

        
        const navLinks = document.querySelectorAll('.nav-items a');
        
        navLinks.forEach(link => {
            link.addEventListener('click', function() {
                navLinks.forEach(l => l.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80, 
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>
</html>