{% extends 'base.html' %}

{% block title %}Documentation - TernoDBI{% endblock %}

{% block extra_head %}
<style>
    .docs-layout {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: 3rem;
        margin-top: 0;
        min-height: calc(100vh - 80px);
    }

    .docs-sidebar {
        position: sticky;
        top: 80px;
        height: calc(100vh - 80px);
        padding: 2rem 0 2rem 1.5rem;
        border-right: 1px solid var(--border);
        overflow-y: auto;
    }

    .docs-sidebar h3 {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-secondary);
        margin-bottom: 1rem;
        padding-left: 0.5rem;
    }

    .docs-nav {
        list-style: none;
    }

    .docs-nav li {
        margin-bottom: 0.25rem;
    }

    .docs-nav a {
        display: block;
        padding: 0.6rem 0.75rem;
        border-radius: 0.375rem;
        color: var(--text-secondary);
        text-decoration: none;
        transition: all 0.15s;
        font-size: 0.9rem;
        border-left: 2px solid transparent;
    }

    .docs-nav a:hover {
        color: var(--text-primary);
        background: rgba(99, 102, 241, 0.05);
    }

    .docs-nav a.active {
        color: var(--accent-primary);
        background: rgba(99, 102, 241, 0.1);
        border-left-color: var(--accent-primary);
        font-weight: 500;
    }

    .docs-content {
        padding: 2rem 3rem 4rem 2rem;
        max-width: 900px;
    }

    /* Markdown Styles */
    .docs-content h1 {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
        border-bottom: 1px solid var(--border);
        padding-bottom: 1rem;
    }

    .docs-content h2 {
        font-size: 1.8rem;
        margin: 2rem 0 1rem;
    }

    .docs-content h3 {
        font-size: 1.4rem;
        margin: 1.5rem 0 1rem;
    }

    .docs-content p {
        margin-bottom: 1rem;
        line-height: 1.8;
        max-width: 80ch;
    }

    .docs-content ul,
    .docs-content ol {
        margin-bottom: 1rem;
        padding-left: 1.5rem;
    }

    .docs-content li {
        margin-bottom: 0.5rem;
    }

    .docs-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 1.5rem 0;
    }

    .docs-content th,
    .docs-content td {
        border: 1px solid var(--border);
        padding: 0.75rem;
        text-align: left;
    }

    .docs-content th {
        background: var(--bg-tertiary);
    }

    /* Code Block Styling */
    .docs-content pre {
        position: relative;
        background: #0d1117;
        border: 1px solid rgba(99, 102, 241, 0.2);
        border-radius: 8px;
        padding: 1rem 1.25rem;
        margin: 1rem 0;
        overflow-x: auto;
    }

    .docs-content pre code {
        background: transparent;
        color: #e6edf3;
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .docs-content code {
        background: rgba(99, 102, 241, 0.15);
        color: var(--accent-primary);
        padding: 0.2rem 0.4rem;
        border-radius: 4px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.85rem;
    }

    .code-copy-btn {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        background: rgba(99, 102, 241, 0.3);
        border: none;
        border-radius: 4px;
        padding: 0.4rem 0.6rem;
        color: #fff;
        cursor: pointer;
        font-size: 0.75rem;
        opacity: 0;
        transition: opacity 0.2s, background 0.2s;
    }

    .docs-content pre:hover .code-copy-btn {
        opacity: 1;
    }

    .code-copy-btn:hover {
        background: var(--accent-primary);
    }

    .code-copy-btn.copied {
        background: #10b981;
    }
</style>
{% endblock %}

{% block content %}
<div class="docs-layout">
    <aside class="docs-sidebar">
        <h3>Documentation</h3>
        <ul class="docs-nav">
            <li><a href="/docs/setup/" class="{% if current_page == 'setup' %}active{% endif %}">Setup &
                    Installation</a></li>
            <li><a href="/docs/architecture/"
                    class="{% if current_page == 'architecture' %}active{% endif %}">Architecture</a></li>
            <li><a href="/docs/mcp-guide/" class="{% if current_page == 'mcp-guide' %}active{% endif %}">MCP
                    Integration</a></li>
            <li><a href="/docs/security/" class="{% if current_page == 'security' %}active{% endif %}">Security &
                    Tokens</a></li>
            <li><a href="/docs/api/" class="{% if current_page == 'api' %}active{% endif %}">API Reference</a></li>
        </ul>
    </aside>

    <article class="docs-content">
        {{ content|safe }}
    </article>
</div>
{% endblock %}

{% block extra_js %}
<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';

    // Configure mermaid
    mermaid.initialize({
        startOnLoad: false,
        theme: 'dark',
        securityLevel: 'loose',
    });

    document.addEventListener('DOMContentLoaded', async () => {
        // Find all mermaid code blocks (rendered by python-markdown as code.language-mermaid)
        const mermaidBlocks = document.querySelectorAll('code.language-mermaid');

        for (const block of mermaidBlocks) {
            const pre = block.parentElement;
            const content = block.textContent;

            // Create a new div for mermaid to render into
            const div = document.createElement('div');
            div.className = 'mermaid';
            div.textContent = content;
            div.style.background = 'transparent';
            div.style.display = 'flex';
            div.style.justifyContent = 'center';

            // Replace the <pre><code>...</code></pre> with the div
            pre.replaceWith(div);
        }

        // Render all the .mermaid divs
        await mermaid.run({
            querySelector: '.mermaid'
        });

        // Add copy buttons to all code blocks
        const preBlocks = document.querySelectorAll('.docs-content pre');
        preBlocks.forEach(pre => {
            // Skip mermaid blocks (already replaced)
            if (pre.querySelector('code.language-mermaid')) return;

            const btn = document.createElement('button');
            btn.className = 'code-copy-btn';
            btn.textContent = 'Copy';
            btn.addEventListener('click', async () => {
                const code = pre.querySelector('code');
                if (code) {
                    await navigator.clipboard.writeText(code.textContent);
                    btn.textContent = 'Copied!';
                    btn.classList.add('copied');
                    setTimeout(() => {
                        btn.textContent = 'Copy';
                        btn.classList.remove('copied');
                    }, 2000);
                }
            });
            pre.appendChild(btn);
        });
    });
</script>
{% endblock %}