{% extends "admin/base_site.html" %}
{% load static i18n %}

{% block object-tools %}{% endblock %}

{% block extrahead %}
    {{ block.super }}

    <!-- Highlight.js CSS (light theme fallback) -->
    <link id="highlight-theme" rel="stylesheet"
          href="{% static 'ophix_docs/highlight/github.min.css' %}">

    <!-- Highlight.js core -->
    <script src="{% static 'ophix_docs/highlight/highlight.min.js' %}"></script>

    <script>
    document.addEventListener("DOMContentLoaded", function() {
        const themeLink = document.getElementById('highlight-theme');

        // Switch highlight theme to match Django admin's [data-theme="dark"] toggle.
        function updateTheme() {
            const darkMode = document.documentElement.getAttribute('data-theme') === 'dark';
            themeLink.href = darkMode
                ? "{% static 'ophix_docs/highlight/github-dark.min.css' %}"
                : "{% static 'ophix_docs/highlight/github.min.css' %}";
        }

        updateTheme();
        new MutationObserver(function(mutations) {
            mutations.forEach(function(m) {
                if (m.attributeName === 'data-theme') updateTheme();
            });
        }).observe(document.documentElement, { attributes: true });

        // Apply syntax highlighting and add copy buttons
        document.querySelectorAll("pre code").forEach((block) => {
            hljs.highlightElement(block);

            // Create copy button
            const btn = document.createElement('button');
            btn.textContent = "{% trans 'Copy' %}";
            btn.className = "copy-code-btn";

            // Compute colors based on current theme
            const fg = getComputedStyle(document.body).color;
            btn.style.backgroundColor = fg + "33"; // semi-transparent
            btn.style.color = fg;

            btn.addEventListener('click', () => {
                navigator.clipboard.writeText(block.innerText);
                btn.textContent = "{% trans 'Copied!' %}";
                setTimeout(() => btn.textContent = "{% trans 'Copy' %}", 1000);
            });

            // Style button and position
            const pre = block.parentNode;
            pre.style.position = "relative";
            btn.style.position = "absolute";
            btn.style.top = "0.2em";
            btn.style.right = "0.2em";
            btn.style.fontSize = "0.8em";
            btn.style.padding = "0.2em 0.4em";
            btn.style.border = "1px solid";
            btn.style.borderRadius = "3px";
            btn.style.cursor = "pointer";

            pre.appendChild(btn);
        });
    });
    </script>

    <style>
    .copy-code-btn:hover {
        opacity: 0.85;
    }
    </style>
{% endblock %}

{% block content %}
<p class="back-to-index">
    <a href="{% url 'admin:ophix_docs_docpage_changelist' %}">← {% trans "Back to Contents" %}</a>
</p>

<hr>

<div class="ophix-docs-content">
    {{ rendered_markdown|safe }}
</div>

<style>
.back-to-index a {
    text-decoration: none;
    font-weight: bold;
}
.ophix-docs-content {
    margin-top: 1em;
}
.ophix-docs-content h1,
.ophix-docs-content h2 {
    color: var(--admin-interface-module-background-color);
}
.ophix-docs-content h3,
.ophix-docs-content h4 {
    color: var(--admin-interface-generic-link-color);
}
[data-theme="dark"] .ophix-docs-content h1,
[data-theme="dark"] .ophix-docs-content h2 {
    color: var(--admin-interface-generic-link-color);
}
pre {
    padding: 1em;
    overflow-x: auto;
    border-radius: 6px;
}
mark {
    background: rgba(255, 220, 0, 0.45);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}
[data-theme="dark"] mark {
    background: rgba(255, 200, 0, 0.3);
}
</style>

{% if search_query %}
<script>
document.addEventListener("DOMContentLoaded", function() {
    var query = "{{ search_query|escapejs }}";
    if (!query) return;

    var content = document.querySelector(".ophix-docs-content");
    if (!content) return;

    var walker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT, {
        acceptNode: function(node) {
            var p = node.parentNode;
            while (p && p !== content) {
                var tag = p.tagName && p.tagName.toUpperCase();
                if (tag === "PRE" || tag === "CODE") return NodeFilter.FILTER_REJECT;
                p = p.parentNode;
            }
            return NodeFilter.FILTER_ACCEPT;
        }
    });

    var nodes = [];
    var node;
    while ((node = walker.nextNode())) nodes.push(node);

    var lowerQuery = query.toLowerCase();
    var firstMark = null;

    nodes.forEach(function(textNode) {
        var text = textNode.nodeValue;
        var lowerText = text.toLowerCase();
        if (lowerText.indexOf(lowerQuery) === -1) return;

        var frag = document.createDocumentFragment();
        var remaining = text;
        var lowerRemaining = lowerText;
        var pos;

        while ((pos = lowerRemaining.indexOf(lowerQuery)) !== -1) {
            if (pos > 0) frag.appendChild(document.createTextNode(remaining.slice(0, pos)));
            var mark = document.createElement("mark");
            mark.textContent = remaining.slice(pos, pos + query.length);
            if (!firstMark) firstMark = mark;
            frag.appendChild(mark);
            remaining = remaining.slice(pos + query.length);
            lowerRemaining = lowerRemaining.slice(pos + query.length);
        }
        if (remaining) frag.appendChild(document.createTextNode(remaining));

        textNode.parentNode.replaceChild(frag, textNode);
    });

    if (firstMark && !window.location.hash) {
        firstMark.scrollIntoView({ behavior: "smooth", block: "center" });
    }
});
</script>
{% endif %}
{% endblock %}