{% extends "base.html" %}
{% block title %}{{ doc.title if doc else 'Not Found' }} — Docs{% endblock %}

{% block content %}
<div class="space-y-4">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <a href="/admin" class="text-gray-500 hover:text-white transition">&larr;</a>
            <div>
                <h1 class="text-xl font-bold text-white">Dokumentasi</h1>
                <p class="text-xs text-gray-500">CLI Scripts & Panduan Penggunaan</p>
            </div>
        </div>
    </div>

    <div class="flex flex-col md:flex-row gap-4">
        <!-- Sidebar -->
        <nav class="md:w-56 flex-shrink-0">
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-3 md:sticky md:top-4">
                <p class="text-[10px] text-gray-500 uppercase tracking-wider mb-2 px-2">Halaman</p>
                {% for d in docs %}
                <a href="/admin/docs{{ '' if d.slug == 'index' else '/' + d.slug }}"
                   class="block px-3 py-1.5 rounded-lg text-sm transition mb-0.5
                          {{ 'bg-gray-800 text-white font-medium' if current_slug == d.slug else 'text-gray-400 hover:text-white hover:bg-gray-800/50' }}">
                    {{ d.title }}
                </a>
                {% endfor %}
            </div>
        </nav>

        <!-- Content -->
        <div class="flex-1 min-w-0">
            {% if doc %}
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-5 md:p-8">
                <article class="docs-prose">
                    {{ doc.html | safe }}
                </article>
            </div>
            {% else %}
            <div class="bg-gray-900 border border-red-800/30 rounded-xl p-8 text-center">
                <p class="text-red-400 text-lg font-semibold mb-2">404 — Dokumen Tidak Ditemukan</p>
                <p class="text-gray-500 text-sm">File <code class="text-gray-400">docs/{{ current_slug }}.md</code> tidak ditemukan.</p>
                <a href="/admin/docs" class="inline-block mt-4 text-sm text-koin-400 hover:text-koin-300 transition">&larr; Kembali ke Index</a>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<style>
    /* Markdown prose styling for dark theme */
    .docs-prose { color: #d1d5db; line-height: 1.75; }
    .docs-prose h1 { font-size: 1.75rem; font-weight: 700; color: #fff; margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #374151; }
    .docs-prose h2 { font-size: 1.35rem; font-weight: 600; color: #fff; margin: 2rem 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid #1f2937; }
    .docs-prose h3 { font-size: 1.1rem; font-weight: 600; color: #e5e7eb; margin: 1.5rem 0 0.5rem; }
    .docs-prose h4 { font-size: 0.95rem; font-weight: 600; color: #d1d5db; margin: 1.25rem 0 0.4rem; }
    .docs-prose p { margin: 0.75rem 0; }
    .docs-prose a { color: #60a5fa; text-decoration: underline; text-underline-offset: 2px; }
    .docs-prose a:hover { color: #93bbfd; }
    .docs-prose strong { color: #f3f4f6; font-weight: 600; }
    .docs-prose code { background: #1f2937; color: #a5f3fc; padding: 0.15em 0.4em; border-radius: 0.25rem; font-size: 0.85em; }
    .docs-prose pre { background: #111827; border: 1px solid #1f2937; border-radius: 0.5rem; padding: 1rem; overflow-x: auto; margin: 1rem 0; }
    .docs-prose pre code { background: none; padding: 0; color: #d1d5db; font-size: 0.8rem; line-height: 1.6; }
    .docs-prose ul, .docs-prose ol { margin: 0.75rem 0; padding-left: 1.5rem; }
    .docs-prose ul { list-style-type: disc; }
    .docs-prose ol { list-style-type: decimal; }
    .docs-prose li { margin: 0.25rem 0; }
    .docs-prose li > ul, .docs-prose li > ol { margin: 0.25rem 0; }
    .docs-prose blockquote { border-left: 3px solid #4b5563; padding-left: 1rem; margin: 1rem 0; color: #9ca3af; font-style: italic; }
    .docs-prose hr { border: none; border-top: 1px solid #374151; margin: 2rem 0; }
    .docs-prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.85rem; }
    .docs-prose thead th { background: #1f2937; color: #9ca3af; text-align: left; padding: 0.5rem 0.75rem; border: 1px solid #374151; font-weight: 600; }
    .docs-prose tbody td { padding: 0.5rem 0.75rem; border: 1px solid #1f2937; }
    .docs-prose tbody tr:hover { background: #111827; }
    .docs-prose img { max-width: 100%; border-radius: 0.5rem; }
</style>
{% endblock %}