{% load static %}
{# Multi-Section Markdown Documentation Block with Management Commands and Mermaid Support #}

{# Load Mermaid resources once per page #}
{% if documentation_config.enable_plugins and not mermaid_loaded %}
    {{ mermaid_resources|safe }}
    {% with mermaid_loaded=True %}{% endwith %}
{% endif %}

{% if documentation_config and documentation_sections or management_commands %}
<div class="mb-6">
    <div class="{% if not is_popup %}max-w-full{% endif %}">
        {# Main documentation container with unfold semantic classes #}
        <div class="bg-base-50 dark:bg-base-950 border border-base-200 dark:border-base-700 rounded-default shadow-xs overflow-hidden">

            {# Header with semantic font colors #}
            <div class="px-5 py-4 border-b border-base-200 dark:border-base-800 bg-base-100 dark:bg-base-900">
                <div class="flex items-center gap-3">
                    <span class="material-symbols-outlined text-xl text-primary-600 dark:text-primary-400">description</span>
                    <h2 class="text-base font-semibold text-font-important-light dark:text-font-important-dark m-0">
                        {{ documentation_config.title }}
                    </h2>
                    {% if documentation_sections %}
                    <span class="ml-auto text-xs font-medium text-font-subtle-light dark:text-font-subtle-dark px-2.5 py-1 bg-base-100 dark:bg-base-800 rounded-full">
                        {{ documentation_sections|length }} section{{ documentation_sections|length|pluralize }}
                    </span>
                    {% endif %}
                </div>
            </div>

            {# Management Commands Section (if any) #}
            {% if management_commands %}
            <details class="group border-b border-base-200 dark:border-base-800">
                <summary class="cursor-pointer px-5 py-3.5 bg-white dark:bg-base-900 hover:bg-base-700/[.04] dark:hover:bg-white/[.04] transition-all duration-200 flex items-center gap-3 select-none list-none">
                    {# Terminal icon #}
                    <span class="material-symbols-outlined text-base text-font-default-light dark:text-font-default-dark group-open:rotate-90 group-open:text-primary-600 dark:group-open:text-primary-400 transition-all duration-200">
                        terminal
                    </span>

                    {# Title #}
                    <span class="text-sm font-medium text-font-default-light dark:text-font-default-dark flex-1">
                        Management Commands
                    </span>

                    {# Badge #}
                    <span class="text-xs font-medium text-font-subtle-light dark:text-font-subtle-dark px-2.5 py-1 bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400 rounded-full">
                        {{ management_commands|length }} command{{ management_commands|length|pluralize }}
                    </span>

                    {# Expand/collapse hint #}
                    <span class="text-xs text-font-subtle-light dark:text-font-subtle-dark group-open:hidden">
                        Click to expand
                    </span>
                    <span class="text-xs text-font-subtle-light dark:text-font-subtle-dark hidden group-open:inline">
                        Click to collapse
                    </span>
                </summary>

                {# Commands list #}
                <div class="px-5 py-4 bg-white dark:bg-base-900">
                    <div class="flex flex-col gap-3">
                        {% for cmd in management_commands %}
                        <div class="border border-base-200 dark:border-base-700 rounded-default p-4 bg-base-50 dark:bg-base-950 hover:border-primary-300 dark:hover:border-primary-700 transition-colors duration-200">
                            {# Command name #}
                            <div class="flex items-start gap-3 mb-2">
                                <span class="material-symbols-outlined text-sm text-primary-600 dark:text-primary-400 mt-0.5">code</span>
                                <div class="flex-1 min-w-0">
                                    <code class="text-sm font-mono font-semibold text-font-important-light dark:text-font-important-dark">
                                        python manage.py {{ cmd.name }}
                                    </code>
                                    {% if cmd.help %}
                                    <p class="text-xs text-font-default-light dark:text-font-default-dark mt-1">
                                        {{ cmd.help }}
                                    </p>
                                    {% endif %}
                                </div>
                            </div>

                            {# Arguments #}
                            {% if cmd.arguments %}
                            <div class="mt-3 pt-3 border-t border-base-200 dark:border-base-700">
                                <div class="text-xs font-medium text-font-subtle-light dark:text-font-subtle-dark mb-2">Arguments:</div>
                                <div class="space-y-1.5">
                                    {% for arg in cmd.arguments %}
                                    <div class="flex items-start gap-2 text-xs">
                                        <code class="font-mono text-primary-600 dark:text-primary-400 font-medium">{{ arg.name }}</code>
                                        {% if arg.required %}
                                        <span class="px-1.5 py-0.5 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded text-[10px] font-medium">required</span>
                                        {% endif %}
                                        {% if arg.help %}
                                        <span class="text-font-subtle-light dark:text-font-subtle-dark">- {{ arg.help }}</span>
                                        {% endif %}
                                        {% if arg.default %}
                                        <span class="text-font-subtle-light dark:text-font-subtle-dark ml-auto">default: <code class="text-[10px]">{{ arg.default }}</code></span>
                                        {% endif %}
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </details>
            {% endif %}

            {# Documentation Sections #}
            {% if documentation_sections %}
            <div class="divide-y divide-base-200 dark:divide-base-800">
                {% for section in documentation_sections %}
                {% if documentation_config.collapsible %}
                {# Collapsible section #}
                <details class="group"{% if section.default_open %} open{% endif %}>
                    <summary class="cursor-pointer px-5 py-3.5 bg-white dark:bg-base-900 hover:bg-base-700/[.04] dark:hover:bg-white/[.04] transition-all duration-200 flex items-center gap-3 select-none list-none">
                        {# Chevron icon #}
                        <span class="material-symbols-outlined text-base text-font-default-light dark:text-font-default-dark group-open:rotate-90 group-open:text-primary-600 dark:group-open:text-primary-400 transition-all duration-200">
                            chevron_right
                        </span>

                        {# Section title #}
                        <span class="text-sm font-medium text-font-default-light dark:text-font-default-dark flex-1">
                            {{ section.title }}
                        </span>

                        {# Expand/collapse hint #}
                        <span class="text-xs text-font-subtle-light dark:text-font-subtle-dark group-open:hidden">
                            Click to expand
                        </span>
                        <span class="text-xs text-font-subtle-light dark:text-font-subtle-dark hidden group-open:inline">
                            Click to collapse
                        </span>
                    </summary>

                    {# Section content #}
                    <div class="p-5 bg-white dark:bg-base-900">
                        <div class="border border-base-200 dark:border-base-700 rounded-default p-4 bg-white dark:bg-base-950 prose prose-sm dark:prose-invert max-w-none overflow-auto"
                             {% if documentation_config.max_height %}style="max-height: {{ documentation_config.max_height }};"{% endif %}>
                            {{ section.content|safe }}
                        </div>
                    </div>
                </details>
                {% else %}
                {# Non-collapsible section #}
                <div class="bg-white dark:bg-base-900">
                    {% if section.title != documentation_config.title %}
                    <div class="px-5 py-3 bg-base-50 dark:bg-base-950 border-b border-base-200 dark:border-base-800">
                        <h3 class="text-sm font-medium text-font-important-light dark:text-font-important-dark m-0">
                            {{ section.title }}
                        </h3>
                    </div>
                    {% endif %}
                    <div class="p-5">
                        <div class="border border-base-200 dark:border-base-700 rounded-default p-4 bg-white dark:bg-base-950 prose prose-sm dark:prose-invert max-w-none overflow-auto"
                             {% if documentation_config.max_height %}style="max-height: {{ documentation_config.max_height }};"{% endif %}>
                            {{ section.content|safe }}
                        </div>
                    </div>
                </div>
                {% endif %}
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </div>
</div>

{# Enhanced dark mode prose styles with unfold semantic colors #}
<style>
    /* Unfold semantic dark mode prose styles */
    .dark .prose-invert {
        --tw-prose-body: rgb(var(--color-base-300));
        --tw-prose-headings: rgb(var(--color-base-100));
        --tw-prose-lead: rgb(var(--color-base-400));
        --tw-prose-links: rgb(96 165 250);
        --tw-prose-bold: rgb(var(--color-base-100));
        --tw-prose-counters: rgb(var(--color-base-400));
        --tw-prose-bullets: rgb(var(--color-base-500));
        --tw-prose-hr: rgb(var(--color-base-700));
        --tw-prose-quotes: rgb(var(--color-base-100));
        --tw-prose-quote-borders: rgb(var(--color-base-700));
        --tw-prose-captions: rgb(var(--color-base-400));
        --tw-prose-code: rgb(var(--color-base-100));
        --tw-prose-pre-code: rgb(var(--color-base-200));
        --tw-prose-pre-bg: rgb(var(--color-base-950));
        --tw-prose-th-borders: rgb(var(--color-base-700));
        --tw-prose-td-borders: rgb(var(--color-base-700));
    }

    /* Light mode pre blocks */
    .prose pre {
        background-color: rgb(249, 250, 251) !important;
        border: 1px solid rgb(229, 231, 235) !important;
        color: rgb(17, 24, 39) !important;
    }

    .prose code {
        background-color: rgb(243, 244, 246) !important;
        color: rgb(17, 24, 39) !important;
        padding: 0.125rem 0.25rem;
        border-radius: 0.25rem;
        font-size: 0.875em;
    }

    .prose pre code {
        background-color: transparent !important;
        padding: 0;
        color: inherit !important;
    }

    /* Dark mode pre blocks */
    .dark .prose-invert pre {
        background-color: rgb(3, 7, 18) !important;
        border: 1px solid rgb(55, 65, 81) !important;
        color: rgb(229, 231, 235) !important;
    }

    .dark .prose-invert code {
        background-color: rgb(31, 41, 55) !important;
        color: rgb(243, 244, 246) !important;
        padding: 0.125rem 0.25rem;
        border-radius: 0.25rem;
        font-size: 0.875em;
    }

    .dark .prose-invert pre code {
        background-color: transparent !important;
        padding: 0;
        color: inherit !important;
    }

    /* Tables with semantic colors */
    .dark .prose-invert table {
        border-color: rgb(var(--color-base-700));
    }

    .dark .prose-invert thead {
        border-bottom-color: rgb(var(--color-base-700));
        background-color: rgb(var(--color-base-800));
    }

    .dark .prose-invert th,
    .dark .prose-invert td {
        border-color: rgb(var(--color-base-700));
    }

    .dark .prose-invert tbody tr {
        border-bottom-color: rgb(var(--color-base-700));
    }

    .dark .prose-invert tbody tr:hover {
        background-color: rgb(var(--color-base-800));
    }

    /* Links */
    .dark .prose-invert a {
        color: rgb(96 165 250) !important;
    }

    .dark .prose-invert a:hover {
        color: rgb(147 197 253) !important;
    }

    /* Blockquotes with semantic colors */
    .dark .prose-invert blockquote {
        border-left-color: rgb(var(--color-base-700));
        background-color: rgb(var(--color-base-800));
        padding: 1rem;
        border-radius: 0.375rem;
    }

    /* Lists */
    .dark .prose-invert ul > li::marker,
    .dark .prose-invert ol > li::marker {
        color: rgb(var(--color-base-500));
    }

    /* Horizontal rules */
    .dark .prose-invert hr {
        border-color: rgb(var(--color-base-700));
    }

    /* Custom scrollbar with semantic colors */
    .dark .prose-invert::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .dark .prose-invert::-webkit-scrollbar-track {
        background: rgb(var(--color-base-800));
        border-radius: 4px;
    }

    .dark .prose-invert::-webkit-scrollbar-thumb {
        background: rgb(var(--color-base-700));
        border-radius: 4px;
    }

    .dark .prose-invert::-webkit-scrollbar-thumb:hover {
        background: rgb(var(--color-base-600));
    }
</style>
{% endif %}