{% extends "admin/base_site.html" %}

{% block content %}
<style>
.docs-index {
    max-width: 720px;
}

.doc-section {
    margin-bottom: 1.75em;
}

.doc-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em 0;
    border-bottom: 2px solid var(--admin-interface-module-background-color);
    cursor: pointer;
    user-select: none;
}

.doc-section-left {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.doc-toggle-btn {
    background: none;
    border: none;
    font-size: 0.85em;
    cursor: pointer;
    padding: 0;
    color: var(--admin-interface-module-background-color);
    flex-shrink: 0;
}

.doc-section-name {
    font-size: 0.85em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--admin-interface-module-background-color);
}

.doc-section-count {
    font-size: 0.78em;
    color: var(--admin-interface-muted-color);
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
}

.doc-pages {
    margin: 0;
    padding: 0;
}

.doc-page-row {
    border-bottom: 1px solid var(--darkened-bg, #eee);
}

.doc-page-row:last-child {
    border-bottom: none;
}

.doc-page-header {
    display: flex;
    align-items: center;
    border-left: 3px solid transparent;
}

.doc-page-header:hover {
    border-left-color: var(--admin-interface-generic-link-color);
    background: color-mix(in srgb, var(--admin-interface-generic-link-color) 8%, transparent);
}

.doc-page-header:hover a {
    color: var(--admin-interface-generic-link-hover-color);
}

.page-toggle-btn {
    background: none;
    border: none;
    font-size: 0.7em;
    cursor: pointer;
    padding: 0 0.3em 0 0.75em;
    color: var(--admin-interface-module-background-color);
    flex-shrink: 0;
    line-height: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
}

.page-toggle-spacer {
    display: inline-block;
    width: 1.7em;
    flex-shrink: 0;
}

.doc-page-header a {
    display: block;
    flex: 1;
    padding: 0.6em 0.75em 0.6em 0.4em;
    text-decoration: none;
    color: var(--body-fg);
}

.doc-page-anchors {
    padding: 0.2em 0 0.4em 0;
    background: color-mix(in srgb, var(--admin-interface-module-background-color) 4%, transparent);
}

.doc-anchor-link {
    display: block;
    padding: 0.3em 0.75em 0.3em 2.8em;
    text-decoration: none;
    color: var(--admin-interface-generic-link-color);
    opacity: 0.85;
}

.doc-anchor-link.level-3 {
    padding-left: 4em;
    opacity: 0.7;
}

.doc-anchor-link:hover {
    opacity: 1;
    text-decoration: underline;
}

[data-theme="dark"] .doc-section-name,
[data-theme="dark"] .doc-toggle-btn,
[data-theme="dark"] .page-toggle-btn {
    color: var(--admin-interface-generic-link-color);
}
</style>

<div class="docs-index">
{% for section, data in pages_by_section.items %}
<div class="doc-section" data-section="{{ section|slugify }}">
    <div class="doc-section-header" role="button">
        <div class="doc-section-left">
            <button class="doc-toggle-btn" type="button">{% if data.collapsed %}▶{% else %}▼{% endif %}</button>
            <span class="doc-section-name">{{ section }}</span>
        </div>
        <span class="doc-section-count">{{ data.pages|length }} page{{ data.pages|length|pluralize }}</span>
    </div>
    <div class="doc-pages"{% if data.collapsed %} style="display:none;"{% endif %}>
        {% for page in data.pages %}
        <div class="doc-page-row">
            <div class="doc-page-header">
                {% if page.anchors %}
                <button class="page-toggle-btn" type="button" data-page="{{ page.id }}" aria-expanded="false">▶</button>
                {% else %}
                <span class="page-toggle-spacer"></span>
                {% endif %}
                <a href="{% url 'admin:ophix_docs_docpage_change' page.id %}">{{ page.title }}</a>
            </div>
            {% if page.anchors %}
            <div class="doc-page-anchors" id="anchors-{{ page.id }}" style="display:none;">
                {% for anchor in page.anchors %}
                <a href="{% url 'admin:ophix_docs_docpage_change' page.id %}#{{ anchor.slug }}"
                   class="doc-anchor-link level-{{ anchor.level }}">{{ anchor.title }}</a>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>
{% endfor %}
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var SECTION_KEY = "ophix_docs_sections";
    var PAGE_KEY = "ophix_docs_pages";
    var sectionState = {};
    var pageState = {};

    try { sectionState = JSON.parse(localStorage.getItem(SECTION_KEY)) || {}; } catch(e) {}
    try { pageState = JSON.parse(localStorage.getItem(PAGE_KEY)) || {}; } catch(e) {}

    function saveSections() { localStorage.setItem(SECTION_KEY, JSON.stringify(sectionState)); }
    function savePages() { localStorage.setItem(PAGE_KEY, JSON.stringify(pageState)); }

    // Section collapse/expand
    document.querySelectorAll(".doc-section").forEach(function(section) {
        var key = section.dataset.section;
        var body = section.querySelector(".doc-pages");
        var btn  = section.querySelector(".doc-toggle-btn");
        var hdr  = section.querySelector(".doc-section-header");

        function setCollapsed(collapsed) {
            body.style.display = collapsed ? "none" : "";
            btn.textContent = collapsed ? "▶" : "▼";
            sectionState[key] = !collapsed;
            saveSections();
        }

        if (sectionState.hasOwnProperty(key)) {
            setCollapsed(!sectionState[key]);
        }

        hdr.addEventListener("click", function(e) {
            if (e.target.tagName === "A" || e.target.classList.contains("page-toggle-btn")) return;
            setCollapsed(body.style.display !== "none");
        });
    });

    // Page anchor collapse/expand
    document.querySelectorAll(".page-toggle-btn").forEach(function(btn) {
        var pageId = btn.dataset.page;
        var anchorsDiv = document.getElementById("anchors-" + pageId);

        function setExpanded(expanded) {
            anchorsDiv.style.display = expanded ? "" : "none";
            btn.textContent = expanded ? "▼" : "▶";
            btn.setAttribute("aria-expanded", expanded ? "true" : "false");
            pageState[pageId] = expanded;
            savePages();
        }

        if (pageState[pageId]) {
            setExpanded(true);
        }

        btn.addEventListener("click", function(e) {
            e.stopPropagation();
            setExpanded(anchorsDiv.style.display === "none");
        });
    });
});
</script>

{% endblock %}