<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
    {{pico}}
    {{katexCss}}
    {{copyTexCss}}
    {{katexJs}}
    {{copyTexJs}}
    {{autoRender}}
    <style>
        @page {
            margin: 1.5cm 1cm 1.5cm 2cm;
            @top-left { content: "{{title}}"; font-size: 10pt; color: #666; }
            @top-right { content: counter(page); font-size: 10pt; color: #666; }
            @bottom-left { content: "Powered by DocuTranslate"; font-size: 8pt; color: #999; }
            @bottom-right { content: counter(page) " / " counter(pages); font-size: 10pt; color: #666; }
        }

        @media print {
            html, main { padding: 0 !important; }
            #toc-panel, #toc-btn { display: none !important; }
        }

        html { font-size: 15px; }
        main { padding: 2vh 10vw; }

        /* 目录按钮 */
        #toc-btn {
            position: fixed;
            left: 0;
            top: 10px;
            width: 20px;
            height: 24px;
            background: #fff;
            border: 1px solid #ddd;
            border-left: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #666;
            box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
        }
        #toc-btn:hover { background: #f5f5f5; }

        /* 目录面板 */
        #toc-panel {
            position: fixed;
            left: 0;
            top: 0;
            width: 220px;
            height: 100vh;
            background: #fff;
            border-right: 1px solid #ddd;
            z-index: 9999;
            padding: 40px 12px 20px;
            box-sizing: border-box;
            overflow-y: auto;
            transform: translateX(-100%);
            transition: transform 0.2s ease;
        }
        #toc-panel.show { transform: translateX(0); }

        .toc-item { margin: 2px 0; }
        .toc-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 10px;
            color: #555;
            text-decoration: none;
            font-size: 13px;
            border-radius: 3px;
            cursor: pointer;
        }
        .toc-link:hover { background: #f5f5f5; }
        .toc-link.active { background: #007bff; color: #fff; }

        .toc-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .toc-expander {
            width: 18px;
            height: 18px;
            line-height: 16px;
            text-align: center;
            font-size: 12px;
            color: #999;
            cursor: pointer;
            flex-shrink: 0;
        }
        .toc-expander:hover { color: #333; }

        .toc-children { display: none; padding-left: 12px; }
        .toc-children.expanded { display: block; }

        .toc-item[data-level="1"] > .toc-link { font-weight: 500; }
        .toc-item[data-level="2"] > .toc-link { padding-left: 20px; }
        .toc-item[data-level="3"] > .toc-link { padding-left: 30px; }
        .toc-item[data-level="4"] > .toc-link { padding-left: 40px; }
        .toc-item[data-level="5"] > .toc-link { padding-left: 50px; }
    </style>
</head>
<body>
<div id="toc-panel"><ul class="toc-list" id="toc-list"></ul></div>
<button id="toc-btn" onclick="toggleToc()">☰</button>
<main>{{markdown}}</main>
</body>
{{renderMathInElement}}
{{mermaid}}
<script>
(function() {
    const panel = document.getElementById('toc-panel');
    const list = document.getElementById('toc-list');
    let headings = [];

    function init() {
        headings = Array.from(document.querySelectorAll('main h1, main h2, main h3, main h4, main h5, main h6'));
        if (headings.length === 0) return;

        headings.forEach((h, i) => { if (!h.id) h.id = 'h-' + i; });

        const root = { level: 0, children: [] };
        const stack = [root];
        headings.forEach(h => {
            const level = parseInt(h.tagName[1]);
            const item = { id: h.id, text: h.textContent.trim(), level, children: [] };
            while (stack.length > 1 && stack[stack.length - 1].level >= level) stack.pop();
            stack[stack.length - 1].children.push(item);
            stack.push(item);
        });
        render(root.children, list);
    }

    function render(items, parent) {
        items.forEach(item => {
            const li = document.createElement('li');
            li.className = 'toc-item';
            li.dataset.level = item.level;

            const div = document.createElement('div');
            div.className = 'toc-link';
            div.innerHTML = `<span class="toc-text">${item.text}</span>`;

            if (item.children.length) {
                const expander = document.createElement('span');
                expander.className = 'toc-expander';
                expander.textContent = '+';
                expander.onclick = function(e) { e.stopPropagation(); toggle(this); };
                div.appendChild(expander);
            }

            div.onclick = function() { scrollTo(item.id); };
            li.appendChild(div);

            if (item.children.length) {
                const ul = document.createElement('ul');
                ul.className = 'toc-children';
                render(item.children, ul);
                li.appendChild(ul);
                if (item.level === 1) {
                    ul.classList.add('expanded');
                    expander.textContent = '-';
                }
            }
            parent.appendChild(li);
        });
    }

    function toggle(btn) {
        const ul = btn.closest('li').querySelector('.toc-children');
        ul.classList.toggle('expanded');
        btn.textContent = ul.classList.contains('expanded') ? '-' : '+';
    }

    function scrollTo(id) {
        const el = document.getElementById(id);
        if (el) el.scrollIntoView({ behavior: 'smooth' });
    }

    window.toggleToc = function() { panel.classList.toggle('show'); };

    init();
})();

setTimeout(() => {
    for (const e of document.getElementsByClassName('katex-error')) e.innerHTML = e.title;
}, 200);

mermaid.initialize({ securityLevel: 'loose', startOnLoad: true });
</script>
</html>
