{% extends "base.html" %}

{% block content %}
<div class="mb-8">
    <h1 class="text-3xl font-bold text-white">Documentation</h1>
    <p class="mt-2 text-gray-400">Quant-Sports reference and guides</p>
</div>

<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
    <!-- Sidebar: available doc files -->
    <aside class="bg-gray-800 p-4 rounded-lg lg:col-span-1">
        <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wide mb-3">Docs Index</h2>
        {% if doc_files %}
        <ul class="space-y-2">
            {% for doc in doc_files %}
            <li>
                <a href="/docs/{{ doc.name }}"
                   class="block text-sm text-green-400 hover:text-green-300 transition truncate">
                    {{ doc.name }}
                </a>
            </li>
            {% endfor %}
        </ul>
        {% else %}
        <p class="text-sm text-gray-500">No additional docs found.</p>
        {% endif %}
    </aside>

    <!-- Main content: rendered README -->
    <section class="bg-gray-800 p-6 rounded-lg lg:col-span-3">
        {% if readme_html %}
        <article class="prose prose-invert max-w-none">
            {{ readme_html | safe }}
        </article>
        {% else %}
        <p class="text-gray-400">No README.md found at the project root.</p>
        {% endif %}
    </section>
</div>
{% endblock %}