{# Wiki: TOC (all pages), reader, editor — wiki_modals.js #}
<div id="wiki-toc-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[110] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/40 modal-transition z-[109]"></div>
    <div
        class="modal-content glass-modal w-full max-w-lg max-h-[85vh] flex flex-col modal-content-transition relative z-[110] border border-white/10 rounded-2xl overflow-hidden">
        <div class="p-6 pb-3 flex-shrink-0 border-b border-white/10">
            <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                <div class="min-w-0 flex-1">
                    <h3 class="text-lg font-bold text-white">Wiki — All pages</h3>
                    <p class="text-xs text-zinc-500 mt-0.5">Drag to reorder · Star the default page</p>
                </div>
                <div class="flex items-center gap-2 shrink-0 self-end sm:self-start">
                    {% if repo and (repo.can_write or repo.is_owner) %}
                    <button type="button" id="wiki-toc-new-page"
                        class="glass-button-primary px-3 py-2 rounded-xl text-xs font-bold shadow-lg inline-flex items-center gap-1.5">
                        <i data-lucide="plus" class="h-3.5 w-3.5"></i>
                        New page
                    </button>
                    {% endif %}
                    <button type="button" id="wiki-toc-close"
                        class="p-2 rounded-xl hover:bg-white/10 text-zinc-400 hover:text-white transition-colors">
                        <i data-lucide="x" class="h-5 w-5"></i>
                    </button>
                </div>
            </div>
        </div>
        <div id="wiki-toc-loading" class="flex justify-center py-12 flex-shrink-0">
            <div class="w-8 h-8 border-2 border-white/20 border-t-orange-500 rounded-full animate-spin"></div>
        </div>
        <div id="wiki-toc-body" class="hidden flex-1 flex flex-col min-h-0">
            <div id="wiki-toc-list" class="flex-1 overflow-y-auto px-4 py-3 space-y-1 custom-scrollbar">
            </div>
            <div id="wiki-toc-footer" class="hidden flex-shrink-0 p-4 border-t border-white/10">
                <button type="button" id="wiki-toc-save-order"
                    class="w-full glass-button-primary py-2.5 rounded-xl text-sm font-bold">Save order</button>
            </div>
        </div>
    </div>
</div>

<div id="wiki-reader-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[111] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/40 modal-transition z-[110]"></div>
    <div
        class="modal-content glass-modal w-full max-w-3xl max-h-[88vh] min-h-0 flex flex-col modal-content-transition relative z-[111] border border-white/10 rounded-2xl overflow-hidden">
        <div class="p-6 pb-4 flex-shrink-0 border-b border-white/10 flex items-start justify-between gap-4">
            <div class="min-w-0 flex-1">
                <h3 id="wiki-reader-title" class="text-xl font-bold text-white truncate"></h3>
                <p id="wiki-reader-slug" class="text-xs text-zinc-500 font-mono mt-1 truncate"></p>
            </div>
            <div class="flex items-center gap-2 flex-shrink-0">
                <button type="button" id="wiki-reader-all-pages"
                    class="glass-button px-3 py-2 rounded-lg text-xs font-semibold text-zinc-300 border border-white/10">All pages</button>
                <button type="button" id="wiki-reader-edit" class="hidden glass-button-primary px-3 py-2 rounded-lg text-xs font-bold">Edit</button>
                <button type="button" id="wiki-reader-close"
                    class="p-2 rounded-xl hover:bg-white/10 text-zinc-400 hover:text-white transition-colors">
                    <i data-lucide="x" class="h-5 w-5"></i>
                </button>
            </div>
        </div>
        <div id="wiki-reader-loading" class="flex justify-center py-16">
            <div class="w-8 h-8 border-2 border-white/20 border-t-orange-500 rounded-full animate-spin"></div>
        </div>
        <div id="wiki-reader-content-wrap" class="hidden flex-1 min-h-0 overflow-y-auto px-6 py-5 custom-scrollbar overscroll-contain">
            <article id="wiki-reader-body" class="wiki-markdown markdown-body"></article>
        </div>
    </div>
</div>

<div id="wiki-editor-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[112] p-2 sm:p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/40 modal-transition z-[111]"></div>
    <div
        class="modal-content glass-modal wiki-editor-modal-shell w-full max-w-6xl min-h-0 flex flex-col modal-content-transition relative z-[112] border border-white/10 rounded-2xl overflow-hidden">
        <div class="p-6 pb-3 flex-shrink-0 border-b border-white/10 flex items-center justify-between gap-3">
            <h3 id="wiki-editor-heading" class="text-lg font-bold text-white">Edit page</h3>
            <div class="flex items-center gap-2">
                <button type="button" id="wiki-editor-preview-toggle"
                    class="glass-button px-3 py-2 rounded-lg text-xs font-semibold border border-white/10 text-zinc-300">Preview</button>
                <button type="button" id="wiki-editor-close"
                    class="p-2 rounded-xl hover:bg-white/10 text-zinc-400 hover:text-white transition-colors">
                    <i data-lucide="x" class="h-5 w-5"></i>
                </button>
            </div>
        </div>
        <div id="wiki-editor-loading" class="hidden flex justify-center py-12">
            <div class="w-8 h-8 border-2 border-white/20 border-t-orange-500 rounded-full animate-spin"></div>
        </div>
        <div id="wiki-editor-form" class="flex-1 flex flex-col min-h-0 overflow-hidden p-6 pt-4 gap-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 flex-shrink-0">
                <div class="space-y-1.5">
                    <label class="block text-xs font-bold uppercase tracking-widest text-zinc-500">Title</label>
                    <input type="text" id="wiki-editor-title"
                        class="w-full glass-search-input rounded-xl py-2.5 px-3 text-sm text-white border border-white/10 bg-black/20 focus:ring-2 focus:ring-[rgb(var(--theme-r),var(--theme-g),var(--theme-b))]/40 outline-none" />
                </div>
                <div class="space-y-1.5">
                    <label class="block text-xs font-bold uppercase tracking-widest text-zinc-500">Link name</label>
                    <input type="text" id="wiki-editor-slug"
                        class="w-full glass-search-input rounded-xl py-2.5 px-3 text-sm text-white font-mono border border-white/10 bg-black/20 focus:ring-2 focus:ring-[rgb(var(--theme-r),var(--theme-g),var(--theme-b))]/40 outline-none" />
                </div>
            </div>
            <div id="wiki-editor-split" class="flex flex-col md:flex-row gap-3 min-h-0 flex-1 wiki-editor-split">
                <div id="wiki-editor-pane-write" class="flex-1 flex flex-col min-h-0 min-w-0 wiki-editor-pane-write">
                    <label class="block text-xs font-bold uppercase tracking-widest text-zinc-500 mb-1.5 flex-shrink-0">Markdown</label>
                    <textarea id="wiki-editor-body"
                        class="flex-1 w-full rounded-xl border border-white/10 bg-black/30 text-zinc-200 text-sm font-mono p-3 resize-y custom-scrollbar focus:outline-none focus:ring-2 focus:ring-[rgb(var(--theme-r),var(--theme-g),var(--theme-b))]/40"></textarea>
                </div>
                <div id="wiki-editor-pane-preview" class="hidden flex flex-1 flex-col min-h-0 min-w-0 border border-white/10 rounded-xl bg-black/20 overflow-hidden wiki-editor-pane-preview">
                    <div class="text-xs font-bold uppercase tracking-widest text-zinc-500 px-3 py-2 border-b border-white/10 flex-shrink-0 bg-black/30">Preview</div>
                    <div id="wiki-editor-preview" class="flex-1 min-h-0 overflow-y-auto p-3 wiki-markdown markdown-body custom-scrollbar text-sm"></div>
                </div>
            </div>
            <div class="flex flex-wrap items-center justify-between gap-3 pt-2 border-t border-white/10 flex-shrink-0">
                <button type="button" id="wiki-editor-delete"
                    class="hidden text-sm font-semibold text-red-400 hover:text-red-300 px-2">Delete page</button>
                <div class="flex items-center gap-2 ml-auto">
                    <button type="button" id="wiki-editor-cancel"
                        class="glass-button px-4 py-2 rounded-xl text-sm font-semibold border border-white/10">Cancel</button>
                    <button type="button" id="wiki-editor-save"
                        class="glass-button-primary px-5 py-2 rounded-xl text-sm font-bold">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>