<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ brand }} Docs</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <style>
        .help-shell {
            max-width: 860px;
            margin: 0 auto;
            padding: 1rem;
        }
        .help-content { line-height: 1.6; }
        .help-content h1 { font-size: 1.6rem; color: var(--accent); margin: 1.5rem 0 0.8rem; }
        .help-content h2 { font-size: 1.2rem; color: var(--accent); margin: 1.5rem 0 0.6rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; }
        .help-content h3 { font-size: 1rem; color: var(--text); margin: 1.2rem 0 0.4rem; }
        .help-content p { margin: 0.5rem 0; color: var(--text-dim); }
        .help-content strong { color: var(--text); }
        .help-content code {
            background: var(--surface-2);
            padding: 0.15rem 0.4rem;
            border-radius: 0.2rem;
            font-size: 0.85em;
        }
        .help-content pre {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 0.4rem;
            padding: 0.8rem;
            overflow-x: auto;
            font-size: 0.8rem;
            margin: 0.5rem 0;
        }
        .help-content pre code { background: none; padding: 0; }
        .help-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 0.5rem 0;
            font-size: 0.8rem;
        }
        .help-content th, .help-content td {
            border: 1px solid var(--border);
            padding: 0.4rem 0.6rem;
            text-align: left;
        }
        .help-content th { background: var(--surface); color: var(--accent); }
        .help-content td { color: var(--text-dim); }
        .help-content ul, .help-content ol { margin: 0.5rem 0; padding-left: 1.5rem; color: var(--text-dim); }
        .help-content li { margin: 0.2rem 0; }
        .help-content hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
        .help-content a { color: var(--accent); }

        .back-link {
            display: inline-block;
            margin-bottom: 1rem;
            color: var(--accent);
            text-decoration: none;
            font-size: 0.8rem;
        }
        .back-link:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <header>
        <div class="brand">{{ brand }}</div>
        <div class="header-links">
            <a href="/" class="help-link">Dashboard</a>
        </div>
    </header>

    <main class="help-shell">
        <a href="/" class="back-link">&larr; Back to Dashboard</a>
        <section class="help-content" id="help-content">
            <noscript>
                <pre>{{ content }}</pre>
            </noscript>
        </section>
    </main>

    <footer>
        <span>{{ brand }} &middot; v{{ version }} &middot; &copy; 2026 Komar Labs, LLC</span>
    </footer>

    <script>
        function renderMarkdown(text) {
            let html = text;
            html = html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
            html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => `<pre><code>${code.trim()}</code></pre>`);
            html = html.replace(/^(\|.+\|)\n(\|[-| :]+\|)\n((?:\|.+\|\n?)+)/gm, (match, header, sep, body) => {
                const headers = header.split('|').filter(c => c.trim()).map(c => `<th>${c.trim()}</th>`).join('');
                const rows = body.trim().split('\n').map(row => {
                    const cells = row.split('|').filter(c => c.trim()).map(c => `<td>${c.trim()}</td>`).join('');
                    return `<tr>${cells}</tr>`;
                }).join('');
                return `<table><thead><tr>${headers}</tr></thead><tbody>${rows}</tbody></table>`;
            });
            html = html.replace(/^---+$/gm, '<hr>');
            html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
            html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
            html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');
            html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
            html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
            html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
            html = html.replace(/^- (.+)$/gm, '<li>$1</li>');
            html = html.replace(/((?:<li>.+<\/li>\n?)+)/g, '<ul>$1</ul>');
            html = html.replace(/^(?!<[a-z])((?!<\/)[^\n]+)$/gm, '<p>$1</p>');
            html = html.replace(/<p>\s*<\/p>/g, '');
            return html;
        }

        const raw = {{ content | tojson }};
        document.getElementById('help-content').innerHTML = renderMarkdown(raw);
    </script>
</body>
</html>
