{% load static %}
{# Markdown Documentation Block Template #}
{#
Usage:
    {% include "django_admin/markdown_docs_block.html" with
        content=markdown_content
        title="Documentation"
        collapsible=True
        default_open=False
    %}
#}

<div class="mb-6">
    {% if collapsible %}
    <details class="group border border-base-200 dark:border-base-700 rounded-lg overflow-hidden bg-white dark:bg-base-800 shadow-sm hover:shadow-md transition-shadow"{% if default_open %} open{% endif %}>
        <summary class="cursor-pointer px-4 py-3 bg-base-50 dark:bg-base-900 hover:bg-base-100 dark:hover:bg-base-800 transition-colors flex items-center gap-2 select-none">
            <span class="material-symbols-outlined text-base text-primary-600 dark:text-primary-400 group-open:rotate-90 transition-transform">chevron_right</span>
            <span class="font-semibold text-sm text-font-default-light dark:text-font-default-dark">{{ title|default:"Documentation" }}</span>
            <span class="text-xs text-font-subtle-light dark:text-font-subtle-dark ml-auto">{% if default_open %}Click to collapse{% else %}Click to expand{% endif %}</span>
        </summary>
        <div class="p-4 bg-white dark:bg-base-800"{% if max_height %} style="max-height: {{ max_height }}; overflow-y: auto;"{% endif %}>
            {{ content|safe }}
        </div>
    </details>
    {% else %}
    <div class="border border-base-200 dark:border-base-700 rounded-lg overflow-hidden bg-white dark:bg-base-800 shadow-sm">
        {% if title %}
        <div class="px-4 py-3 bg-base-50 dark:bg-base-900 border-b border-base-200 dark:border-base-700">
            <h3 class="font-semibold text-sm text-font-default-light dark:text-font-default-dark">{{ title }}</h3>
        </div>
        {% endif %}
        <div class="p-4"{% if max_height %} style="max-height: {{ max_height }}; overflow-y: auto;"{% endif %}>
            {{ content|safe }}
        </div>
    </div>
    {% endif %}
</div>