{{ define "base" }}
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.app_name}}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        'obsidian': {
                            '50': '#f8fafc',
                            '100': '#f1f5f9',
                            '200': '#e2e8f0',
                            '300': '#cbd5e1',
                            '400': '#94a3b8',
                            '500': '#64748b',
                            '600': '#475569',
                            '700': '#334155',
                            '800': '#1e293b',
                            '900': '#0f172a',
                        }
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/markdown.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/json.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/yaml.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/sql.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
    <style>
        /* Custom scrollbar for dark theme */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #1e293b;
        }
        ::-webkit-scrollbar-thumb {
            background: #475569;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }

        /* Content markdown styles */
        .prose-dark {
            color: #d1d5db;
        }
        .prose-dark h1, .prose-dark h2, .prose-dark h3, .prose-dark h4, .prose-dark h5, .prose-dark h6 {
            color: white;
        }
        .prose-dark a {
            color: #60a5fa;
        }
        .prose-dark a:hover {
            color: #93c5fd;
        }
        .prose-dark code {
            background-color: #1f2937;
            color: #10b981;
            padding: 0.125rem 0.25rem;
            border-radius: 0.25rem;
        }
        .prose-dark pre {
            background-color: #111827;
            border: 1px solid #374151;
        }
        .prose-dark blockquote {
            border-left: 4px solid #3b82f6;
            background-color: #1f2937;
            padding-left: 1rem;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            margin: 1rem 0;
            font-style: italic;
        }
        .prose-dark table {
            border-collapse: collapse;
            border: 1px solid #4b5563;
        }
        .prose-dark th, .prose-dark td {
            border: 1px solid #4b5563;
            padding: 0.75rem;
        }
        .prose-dark th {
            background-color: #1f2937;
            font-weight: 600;
        }
        .prose-dark img {
            max-width: 100%;
            height: auto;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }

        /* Sidebar styles */
        .sidebar-item {
            display: flex;
            align-items: center;
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
            transition: background-color 0.2s;
            cursor: pointer;
        }
        .sidebar-item:hover {
            background-color: #374151;
        }
        .sidebar-item.active {
            background-color: #2563eb;
            color: white;
        }

        /* Custom button styles */
        .btn-primary {
            background-color: #2563eb;
            color: white;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            transition: background-color 0.2s;
            text-decoration: none;
            display: inline-block;
        }
        .btn-primary:hover {
            background-color: #1d4ed8;
        }
        .btn-secondary {
            background-color: #4b5563;
            color: white;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            transition: background-color 0.2s;
            text-decoration: none;
            display: inline-block;
        }
        .btn-secondary:hover {
            background-color: #374151;
        }
        .btn-danger {
            background-color: #dc2626;
            color: white;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            transition: background-color 0.2s;
            text-decoration: none;
            display: inline-block;
        }
        .btn-danger:hover {
            background-color: #b91c1c;
        }

        /* Sidebar collapse behavior */
        #sidebar.collapsed {
            width: 2.5rem !important; /* 10px * 10 = 2.5rem */
            border-right: none;
        }
        #sidebar.collapsed .sidebar-title,
        #sidebar.collapsed .sidebar-actions,
        #sidebar.collapsed .sidebar-content {
            display: none;
        }
        #sidebar .toggle-btn {
            background: transparent;
            color: #cbd5e1;
            padding: 0.25rem;
            border-radius: 0.375rem;
        }
        #sidebar .toggle-btn:hover {
            background: #374151;
        }

        /* Modal styles */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 50;
        }
        .modal-content {
            background-color: #1f2937;
            border-radius: 0.5rem;
            padding: 1.5rem;
            max-width: 32rem;
            width: 100%;
            margin: 1rem;
            max-height: 24rem;
            overflow-y: auto;
        }

        /* Editor styles */
        .editor-textarea {
            width: 100%;
            min-height: 24rem;
            background-color: #1f2937;
            color: #d1d5db;
            border: 1px solid #4b5563;
            border-radius: 0.5rem;
            padding: 1rem;
            font-family: monospace;
            font-size: 0.875rem;
            resize: vertical;
        }
        .editor-textarea:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
        }

        /* Form input styles */
        .form-input, .form-textarea {
            width: 100%;
            background-color: #374151;
            border: 1px solid #4b5563;
            border-radius: 0.5rem;
            padding: 0.5rem 0.75rem;
            color: white;
        }
        .form-input:focus, .form-textarea:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
        }

        .hidden {
            display: none;
        }

        .rotate-90 {
            transform: rotate(90deg);
        }
    </style>
</head>
<body class="bg-slate-900 text-gray-300 min-h-screen">
    <div class="flex h-screen">
        <!-- Sidebar -->
        {{if not .NoSidebar}}
        <div id="sidebar" class="w-80 bg-slate-800 border-r border-gray-700 flex flex-col">
            <!-- Header -->
            <div class="p-4 border-b border-gray-700">
                <div class="flex items-center justify-between">
                    <a href="{{url "/"}}" class="sidebar-title text-xl font-bold text-white hover:text-blue-300" title="Home">
                        {{.app_name}}
                    </a>
                    <div class="flex items-center space-x-2 items-center">
                        <div class="sidebar-actions flex items-center space-x-3">
                            <button id="open-search" class="text-gray-400 hover:text-white transition-colors" title="Search" aria-label="Search">
                                <i class="fas fa-magnifying-glass"></i>
                            </button>
                            {{if .Authenticated}}
                                {{if .IsAdmin}}
                                    <a href="{{url "/editor/admin"}}" class="text-gray-400 hover:text-white transition-colors" title="Admin">
                                        <i class="fas fa-user-shield"></i>
                                    </a>
                                {{end}}
                                <a href="{{url "/editor/profile"}}" class="text-gray-400 hover:text-white transition-colors" title="Profile">
                                    <i class="fas fa-user"></i>
                                </a>
                                <a href="{{url "/editor/settings"}}" class="text-gray-400 hover:text-white transition-colors" title="Settings">
                                    <i class="fas fa-gear"></i>
                                </a>
                            {{end}}
                            {{if .Authenticated}}
                                <button id="logout-btn" class="text-gray-400 hover:text-white transition-colors" title="Logout">
                                    <i class="fas fa-right-from-bracket"></i>
                                </button>
                            {{else}}
                                <a href="{{url "/editor/login"}}" class="text-gray-400 hover:text-white transition-colors" title="Login">
                                    <i class="fas fa-right-to-bracket"></i>
                                </a>
                            {{end}}
                        </div>
                        <button id="sidebar-toggle" class="toggle-btn" title="Toggle sidebar" aria-label="Toggle sidebar">
                            <i id="sidebar-toggle-icon" class="fas fa-chevron-left"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Navigation -->
            <div class="sidebar-content px-4 py-4">
                {{if .Authenticated}}
                    <a href="{{url "/editor/create"}}" class="btn-primary text-sm w-full text-center">
                        <i class="fas fa-plus mr-2"></i>New Note
                    </a>
                {{end}}
            </div>

            <!-- File Tree -->
            <div id="sidebar-tree" class="sidebar-content flex-1 overflow-y-auto px-4 pb-4">
                {{if .notes_tree}}
                    {{/* Render only children of the root to hide root folder label */}}
                    {{range .notes_tree.Children}}
                        {{template "tree_node" dict "node" . "active_path" $.active_path "current_note" $.current_note}}
                    {{end}}
                {{end}}
            </div>
        </div>
        {{end}}

        <!-- Main Content -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- Breadcrumbs -->
            {{if .breadcrumbs}}
            <div class="bg-slate-800 border-b border-gray-700 px-6 py-3">
                <nav class="flex items-center space-x-2 text-sm">
                    {{range $i, $crumb := .breadcrumbs}}
                        {{if $i}}<i class="fas fa-chevron-right text-gray-500 text-xs"></i>{{end}}
                        {{if $crumb.URL}}
                            <a href="{{url $crumb.URL}}" class="text-blue-400 hover:text-blue-300 transition-colors">{{$crumb.Name}}</a>
                        {{else}}
                            <span class="text-gray-300">{{$crumb.Name}}</span>
                        {{end}}
                    {{end}}
                </nav>
            </div>
            {{end}}

            <!-- Content Area -->
            <div class="flex-1 overflow-y-auto">
                {{if eq .Page "folder"}}
                    {{template "folder_content" .}}
                {{else if eq .Page "note"}}
                    {{template "note_content" .}}
                {{else if eq .Page "view_text"}}
                    {{template "view_text_content" .}}
                {{else if eq .Page "edit_text"}}
                    {{template "edit_text_content" .}}
                {{else if eq .Page "create"}}
                    {{template "create_content" .}}
                {{else if eq .Page "edit"}}
                    {{template "edit_content" .}}
                {{else if eq .Page "settings"}}
                    {{template "settings_content" .}}
                {{else if eq .Page "admin"}}
                    {{template "admin_content" .}}
                {{else if eq .Page "admin_logs"}}
                    {{template "admin_logs_content" .}}
                {{else if eq .Page "profile"}}
                    {{template "profile_content" .}}
                {{else if eq .Page "error"}}
                    {{template "error_content" .}}
                {{else if eq .Page "login"}}
                    {{template "login_content" .}}
                {{else if eq .Page "mfa"}}
                    {{template "mfa_content" .}}
                {{else if eq .Page "mfa_setup"}}
                    {{template "mfa_setup_content" .}}
                {{end}}
            </div>
        </div>
    </div>

    <!-- Search Modal -->
    <div id="search-modal" class="modal-overlay hidden">
        <div class="modal-content w-full max-w-3xl">
            <div class="flex items-center mb-3">
                <div class="relative flex-1">
                    <i class="fas fa-magnifying-glass absolute left-3 top-3 text-gray-400"></i>
                    <input id="search-input" type="text" placeholder="Search notes..." class="form-input pl-9 w-full" />
                </div>
                <button id="clear-search" class="ml-2 px-3 py-2 rounded bg-red-600 hover:bg-red-700 text-white" title="Clear">
                    Clear
                </button>
                <button id="close-search" class="btn-secondary ml-2" title="Close">
                    <i class="fas fa-xmark"></i>
                </button>
            </div>
            <div id="search-status" class="text-sm text-gray-400 mb-2"></div>
            <div id="search-results" class="space-y-3"></div>
        </div>
    </div>

    <!-- Scripts -->
    <script>
        // Initialize syntax highlighting
        hljs.highlightAll();

        // Base URL prefix from server
        window.BASE = '{{base}}';
        window.prefix = function(p) {
            var b = window.BASE || '';
            if (!b) {
                if (!p) return '';
                return p[0] === '/' ? p : '/' + p;
            }
            if (!p || p === '/') return b + '/';
            return p[0] === '/' ? (b + p) : (b + '/' + p);
        };

        // Tree functionality
        document.addEventListener('click', function(e) {
            if (e.target.closest('.tree-toggle')) {
                const toggle = e.target.closest('.tree-toggle');
                const children = toggle.nextElementSibling;
                const chevron = toggle.querySelector('.tree-chevron');
                
                if (children && children.classList.contains('tree-children')) {
                    children.classList.toggle('hidden');
                    if (chevron) {
                        chevron.classList.toggle('rotate-90');
                    }
                }
            }
        });

        // Right-click on folder in sidebar opens folder view in current page
        document.addEventListener('contextmenu', function(e) {
            const toggle = e.target.closest('.tree-toggle');
            if (!toggle) return;
            e.preventDefault();
            const path = toggle.getAttribute('data-path') || '';
            const url = window.prefix('/folder/' + path);
            window.location.href = url;
        });

        // Auto-expand active path
        function expandActivePath() {
            const activeItem = document.querySelector('.sidebar-item.active');
            if (activeItem) {
                let parent = activeItem.parentElement;
                while (parent) {
                    if (parent.classList.contains('tree-children')) {
                        parent.classList.remove('hidden');
                        const toggle = parent.previousElementSibling;
                        if (toggle && toggle.classList.contains('tree-toggle')) {
                            const chevron = toggle.querySelector('.tree-chevron');
                            if (chevron) {
                                chevron.classList.add('rotate-90');
                            }
                        }
                    }
                    parent = parent.parentElement;
                }
            }
        }

        // Notification system
        function showNotification(message, type = 'info', duration = 3000) {
            const notification = document.createElement('div');
            notification.className = `fixed top-4 right-4 z-50 px-6 py-3 rounded-lg shadow-lg max-w-sm`;
            
            if (type === 'success') {
                notification.className += ' bg-green-600 text-white';
            } else if (type === 'error') {
                notification.className += ' bg-red-600 text-white';
            } else {
                notification.className += ' bg-blue-600 text-white';
            }
            
            notification.innerHTML = `
                <div class="flex items-center justify-between">
                    <span>${message}</span>
                    <button class="ml-4 text-white hover:text-gray-300" onclick="this.closest('div').remove()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            `;
            
            document.body.appendChild(notification);
            
            setTimeout(() => {
                if (notification.parentElement) {
                    notification.remove();
                }
            }, duration);
        }

        // Sidebar toggle persistence
        function applySidebarState(collapsed) {
            const sidebar = document.getElementById('sidebar');
            const icon = document.getElementById('sidebar-toggle-icon');
            if (!sidebar || !icon) return;
            if (collapsed) {
                sidebar.classList.add('collapsed');
                icon.classList.remove('fa-chevron-left');
                icon.classList.add('fa-chevron-right');
            } else {
                sidebar.classList.remove('collapsed');
                icon.classList.remove('fa-chevron-right');
                icon.classList.add('fa-chevron-left');
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Restore sidebar state
            const collapsed = localStorage.getItem('sidebarCollapsed') === 'true';
            applySidebarState(collapsed);

            // Wire toggle button
            const toggleBtn = document.getElementById('sidebar-toggle');
            if (toggleBtn) {
                toggleBtn.addEventListener('click', function() {
                    const currentlyCollapsed = document.getElementById('sidebar').classList.contains('collapsed');
                    const next = !currentlyCollapsed;
                    localStorage.setItem('sidebarCollapsed', String(next));
                    applySidebarState(next);
                });
            }

            // Expand active path in tree
            expandActivePath();

            // Sidebar tree fallback: if server didn't render any tree nodes (e.g., error pages), fetch and render via API
            (function ensureSidebarTree() {
                const container = document.getElementById('sidebar-tree');
                if (!container) return;
                const hasTree = container.querySelector('.tree-node, .sidebar-item');
                if (hasTree) return; // already populated

                // Fetch tree
                fetch(window.prefix('/api/tree'))
                    .then(r => r.json())
                    .then(data => {
                        if (!data || !Array.isArray(data.children)) return;
                        // Clear container
                        container.innerHTML = '';
                        data.children.forEach(child => {
                            container.appendChild(renderTreeNode(child));
                        });
                        // Re-apply expanded state and active path if any
                        expandActivePath();
                    })
                    .catch(() => {/* ignore */});

                function renderTreeNode(node) {
                    const wrapper = document.createElement('div');
                    wrapper.className = 'tree-node';
                    if (node.children && node.children.length) {
                        const toggle = document.createElement('div');
                        toggle.className = 'tree-toggle flex items-center py-1 hover:bg-gray-700 rounded px-2 cursor-pointer';
                        toggle.setAttribute('data-path', node.path || '');
                        toggle.innerHTML = '<i class="fas fa-chevron-right transform transition-transform duration-200 mr-2 text-xs tree-chevron"></i>' +
                                          '<span class="mr-2">📁</span>' +
                                          `<span class="flex-1">${escapeHTML(node.name || '')}</span>`;
                        const children = document.createElement('div');
                        children.className = 'tree-children ml-4 hidden';
                        (node.children || []).forEach(ch => {
                            children.appendChild(renderTreeNode(ch));
                        });
                        wrapper.appendChild(toggle);
                        wrapper.appendChild(children);
                    } else {
                        let href = window.prefix('/view_text/' + (node.path || ''));
                        let icon = '📄';
                        if ((node.type || '').toLowerCase() === 'md') {
                            href = window.prefix('/note/' + (node.path || ''));
                            icon = '📝';
                        } else if ((node.type || '').toLowerCase() === 'image') {
                            href = window.prefix('/serve_attached_image/' + (node.path || ''));
                            icon = '🖼️';
                        }
                        const a = document.createElement('a');
                        a.href = href;
                        a.className = 'sidebar-item';
                        a.innerHTML = `<span class="mr-2">${icon}</span><span>${escapeHTML(node.name || '')}</span>`;
                        if ((node.type || '').toLowerCase() === 'image') a.target = '_blank';
                        wrapper.appendChild(a);
                    }
                    return wrapper;
                }
                function escapeHTML(str) {
                    return String(str).replace(/[&<>"']/g, s => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;','\'':'&#39;'}[s]));
                }
            })();

            // Search modal wiring
            const searchModal = document.getElementById('search-modal');
            const openSearchBtn = document.getElementById('open-search');
            const closeSearchBtn = document.getElementById('close-search');
            const clearSearchBtn = document.getElementById('clear-search');
            const searchInput = document.getElementById('search-input');
            const searchResults = document.getElementById('search-results');
            const searchStatus = document.getElementById('search-status');

            const LS_KEY_QUERY = 'globalSearch:query';

            function openSearch() {
                if (!searchModal) return;
                searchModal.classList.remove('hidden');
                setTimeout(() => searchInput && searchInput.focus(), 0);
                const lastQuery = localStorage.getItem(LS_KEY_QUERY) || '';
                if (searchInput) {
                    searchInput.value = lastQuery;
                    if (lastQuery) doSearch(lastQuery);
                }
            }
            function closeSearch() {
                if (!searchModal) return;
                searchModal.classList.add('hidden');
            }
            function clearSearch() {
                if (!searchInput) return;
                searchInput.value = '';
                localStorage.removeItem(LS_KEY_QUERY);
                renderResults({ query: '', results: [] });
            }

            let debounceTimer = null;
            function debounce(fn, delay) {
                return function(...args) {
                    clearTimeout(debounceTimer);
                    debounceTimer = setTimeout(() => fn.apply(this, args), delay);
                }
            }

            function escapeHTML(str) {
                return str.replace(/[&<>"']/g, s => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;','\'':'&#39;'}[s]));
            }

            function renderResults(data) {
                if (!searchResults || !searchStatus) return;
                searchResults.innerHTML = '';
                if (!data || !data.results) {
                    searchStatus.textContent = '';
                    return;
                }
                searchStatus.textContent = `${data.results.length} result(s)`;
                data.results.forEach(r => {
                    const item = document.createElement('div');
                    item.className = 'p-3 bg-slate-700 rounded border border-slate-600';
                    const title = document.createElement('div');
                    title.className = 'flex items-center justify-between text-sm text-blue-300 hover:text-blue-200 cursor-pointer';
                    title.innerHTML = `<span><i class="fas ${r.type === 'md' ? 'fa-file-lines' : 'fa-file'} mr-2"></i>${escapeHTML(r.path)}</span>`;
                    title.addEventListener('click', () => {
                        const url = r.path.endsWith('.md') ? window.prefix(`/note/${r.path}`) : window.prefix(`/view_text/${r.path}`);
                        // remember query
                        if (searchInput) localStorage.setItem(LS_KEY_QUERY, searchInput.value.trim());
                        window.location.href = url;
                    });
                    item.appendChild(title);

                    (r.snippets || []).forEach(snip => {
                        const pre = document.createElement('pre');
                        pre.className = 'mt-2 bg-slate-800 p-2 rounded text-xs whitespace-pre-wrap border border-slate-600';
                        pre.textContent = `Line ${snip.line}:\n` + snip.preview;
                        item.appendChild(pre);
                    });
                    searchResults.appendChild(item);
                });
            }

            const doSearch = debounce(async function(q) {
                const query = (q || '').trim();
                if (!query) {
                    renderResults({ query: '', results: [] });
                    return;
                }
                try {
                    searchStatus.textContent = 'Searching...';
                    const res = await fetch(window.prefix(`/api/search?q=${encodeURIComponent(query)}`));
                    const data = await res.json();
                    if (res.ok) {
                        localStorage.setItem(LS_KEY_QUERY, query);
                        renderResults(data);
                    } else {
                        searchStatus.textContent = data.error || 'Search failed';
                    }
                } catch (e) {
                    searchStatus.textContent = 'Search failed';
                }
            }, 250);

            if (openSearchBtn) openSearchBtn.addEventListener('click', openSearch);
            if (closeSearchBtn) closeSearchBtn.addEventListener('click', closeSearch);
            if (clearSearchBtn) clearSearchBtn.addEventListener('click', clearSearch);
            if (searchInput) searchInput.addEventListener('input', (e) => doSearch(e.target.value));

            // Close modal on overlay click (but not when clicking inside content)
            if (searchModal) {
                searchModal.addEventListener('click', (e) => {
                    if (e.target === searchModal) closeSearch();
                });
                document.addEventListener('keydown', (e) => {
                    if (e.key === 'Escape' && !searchModal.classList.contains('hidden')) closeSearch();
                });
            }

            // Logout handler (CSRF protected)
            const logoutBtn = document.getElementById('logout-btn');
            if (logoutBtn) {
                logoutBtn.addEventListener('click', async () => {
                    try {
                        const m = document.cookie.match(/(?:^|; )csrf_token=([^;]+)/);
                        const csrf = m && m[1] ? decodeURIComponent(m[1]) : '';
                        const res = await fetch(window.prefix('/editor/logout'), {
                            method: 'POST',
                            headers: csrf ? { 'X-CSRF-Token': csrf } : {},
                        });
                        if (res.ok) {
                            window.location.href = window.prefix('/editor/login');
                        } else {
                            const data = await res.json().catch(() => ({}));
                            showNotification('Logout failed: ' + (data.error || res.statusText), 'error');
                        }
                    } catch (e) {
                        showNotification('Logout error: ' + e.message, 'error');
                    }
                });
            }
        });
    </script>
    
    {{if eq .Page "folder"}}
        {{template "folder_scripts" .}}
    {{else if eq .Page "note"}}
        {{template "note_scripts" .}}
    {{else if eq .Page "view_text"}}
        {{template "view_text_scripts" .}}
    {{else if eq .Page "edit_text"}}
        {{template "edit_text_scripts" .}}
    {{else if eq .Page "create"}}
        {{template "create_scripts" .}}
    {{else if eq .Page "edit"}}
        {{template "edit_scripts" .}}
    {{else if eq .Page "settings"}}
        {{template "settings_scripts" .}}
    {{else if eq .Page "admin"}}
        {{template "admin_scripts" .}}
    {{else if eq .Page "admin_logs"}}
        {{template "admin_logs_scripts" .}}
    {{else if eq .Page "profile"}}
        {{template "profile_scripts" .}}
    {{else if eq .Page "error"}}
        {{template "error_scripts" .}}
    {{else if eq .Page "login"}}
        {{template "login_scripts" .}}
    {{else if eq .Page "mfa"}}
        {{template "mfa_scripts" .}}
    {{else if eq .Page "mfa_setup"}}
        {{template "mfa_setup_scripts" .}}
    {{end}}
</body>
</html>
{{end}}
<!-- Tree Node Template -->
{{define "tree_node"}}
<div class="tree-node">
    {{if .node.Children}}
        <div class="tree-toggle flex items-center py-1 hover:bg-gray-700 rounded px-2 cursor-pointer" data-path="{{.node.Path}}">
            <i class="fas fa-chevron-right transform transition-transform duration-200 mr-2 text-xs tree-chevron"></i>
            <span class="mr-2">📁</span>
            <span class="flex-1">{{.node.Name}}</span>
        </div>
        <div class="tree-children ml-4 hidden">
            {{range .node.Children}}
                {{template "tree_node" dict "node" . "active_path" $.active_path "current_note" $.current_note}}
            {{end}}
        </div>
    {{else}}
        {{if eq .node.Type "md"}}
            <a href="{{url (print "/note/" .node.Path)}}" class="sidebar-item {{if eq .current_note .node.Path}}active{{end}}">
                <span class="mr-2">📝</span>
                <span>{{.node.Name}}</span>
            </a>
        {{else if eq .node.Type "image"}}
            <a href="{{url (print "/serve_attached_image/" .node.Path)}}" target="_blank" class="sidebar-item" title="View image in new tab">
                <span class="mr-2">🖼️</span>
                <span>{{.node.Name}}</span>
            </a>
        {{else}}
            <a href="{{url (print "/view_text/" .node.Path)}}" class="sidebar-item">
                <span class="mr-2">📄</span>
                <span>{{.node.Name}}</span>
            </a>
        {{end}}
    {{end}}
</div>
{{end}}