{% extends "base.html" %}

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

{% block content %}
<div class="max-w-6xl mx-auto">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-3xl font-bold">Execution Runs</h1>
        <a href="/recipes" class="text-gray-400 hover:text-white">Browse Recipes &rarr;</a>
    </div>

    {% if runs %}
    <div class="space-y-4" id="runs-list">
        {% for run in runs %}
        {% include "runs/_run_card.html" %}
        {% endfor %}
    </div>

    {% if has_more %}
    <div hx-get="/runs?offset={{ offset + limit }}"
         hx-trigger="revealed"
         hx-swap="afterend"
         hx-select="#runs-list > *"
         class="h-20 flex items-center justify-center text-gray-500">
        Loading more...
    </div>
    {% endif %}

    {% else %}
    <div class="bg-gray-800 border border-gray-700 rounded-lg p-12 text-center">
        <div class="text-gray-500 mb-4">
            <svg class="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                      d="M13 10V3L4 14h7v7l9-11h-7z"/>
            </svg>
            <p class="text-xl">No runs yet</p>
        </div>
        <p class="text-gray-600 mb-6">Execute a recipe to see your runs here.</p>
        <a href="/recipes" class="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded font-medium">
            Browse Recipes
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}