{% extends "base.html" %}
{% block title %}— Batches{% endblock %}
{% block content %}

<div class="mb-6">
  <h1 class="text-2xl font-bold text-slate-900">Batches</h1>
  <p class="text-sm text-slate-500 mt-1">Run sets of experiments defined in YAML batch files</p>
</div>

<div class="grid grid-cols-1 gap-6 lg:grid-cols-5">

  <div class="lg:col-span-2 bg-white rounded-lg border border-slate-200 shadow-sm">
    <div class="px-6 py-4 border-b border-slate-200">
      <h2 class="text-sm font-semibold text-slate-900">Available batches</h2>
    </div>
    {% if batches %}
    <ul class="divide-y divide-slate-100">
      {% for batch in batches %}
      <li class="flex items-center justify-between px-6 py-3">
        <span class="font-mono text-sm text-slate-900">{{ batch }}</span>
        <button hx-post="/batches/{{ batch }}/run"
                hx-target="#batch-output"
                hx-swap="innerHTML"
                class="px-3 py-1 rounded bg-indigo-600 text-white text-xs font-medium hover:bg-indigo-700">
          Run
        </button>
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <p class="px-6 py-8 text-sm text-slate-400">
      No batch files found in <code class="font-mono">batches/</code>.
    </p>
    {% endif %}
  </div>

  <div class="lg:col-span-3 bg-white rounded-lg border border-slate-200 shadow-sm">
    <div class="px-6 py-4 border-b border-slate-200">
      <h2 class="text-sm font-semibold text-slate-900">Output</h2>
    </div>
    <div id="batch-output" class="px-6 py-4 text-sm text-slate-400">
      Select a batch and click Run.
    </div>
  </div>

</div>
{% endblock %}