{% extends "base.html" %}

{% block title %}Art-DAG L1{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto text-center py-12">
    <h1 class="text-4xl font-bold mb-4">Art-DAG L1</h1>
    <p class="text-xl text-gray-400 mb-8">Content-Addressable Media Processing</p>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-3xl mx-auto mb-12">
        <a href="/runs"
           class="bg-gray-800 border border-gray-700 rounded-lg p-6 hover:border-blue-500 transition-colors">
            <div class="text-blue-400 text-3xl font-bold mb-2">{{ stats.runs or 0 }}</div>
            <div class="text-gray-400">Execution Runs</div>
        </a>
        <a href="/recipes"
           class="bg-gray-800 border border-gray-700 rounded-lg p-6 hover:border-green-500 transition-colors">
            <div class="text-green-400 text-3xl font-bold mb-2">{{ stats.recipes or 0 }}</div>
            <div class="text-gray-400">Recipes</div>
        </a>
        <a href="/effects"
           class="bg-gray-800 border border-gray-700 rounded-lg p-6 hover:border-cyan-500 transition-colors">
            <div class="text-cyan-400 text-3xl font-bold mb-2">{{ stats.effects or 0 }}</div>
            <div class="text-gray-400">Effects</div>
        </a>
        <a href="/media"
           class="bg-gray-800 border border-gray-700 rounded-lg p-6 hover:border-purple-500 transition-colors">
            <div class="text-purple-400 text-3xl font-bold mb-2">{{ stats.media or 0 }}</div>
            <div class="text-gray-400">Media Files</div>
        </a>
        <a href="/storage"
           class="bg-gray-800 border border-gray-700 rounded-lg p-6 hover:border-orange-500 transition-colors">
            <div class="text-orange-400 text-3xl font-bold mb-2">{{ stats.storage or 0 }}</div>
            <div class="text-gray-400">Storage Providers</div>
        </a>
    </div>

    {% if not user %}
    <div class="bg-gray-800 border border-gray-700 rounded-lg p-8 max-w-md mx-auto mb-12">
        <p class="text-gray-400 mb-4">Sign in through your L2 server to access all features.</p>
        <a href="/auth" class="text-blue-400 hover:text-blue-300">Sign In &rarr;</a>
    </div>
    {% endif %}

    {% if readme_html %}
    <div class="text-left bg-gray-800 border border-gray-700 rounded-lg p-8 prose prose-invert max-w-none">
        {{ readme_html | safe }}
    </div>
    {% endif %}
</div>
{% endblock %}