{% if not added and not removed %}
<div class="rounded-md bg-green-50 border border-green-200 px-4 py-3 text-sm text-green-800">
  ✓ Registry is up to date — no changes needed.
</div>
{% else %}
<div class="space-y-3 text-sm">
  {% if added %}
  <div class="rounded-md bg-blue-50 border border-blue-200 px-4 py-3">
    <p class="font-medium text-blue-800">Registered {{ added | length }} run(s) from disk:</p>
    {% for item in added %}
    <p class="font-mono text-xs text-blue-700 mt-1">{{ item.experiment }} / {{ item.run_id }}
      <span class="ml-2">[{{ item.status }}]</span>
    </p>
    {% endfor %}
  </div>
  {% endif %}
  {% if removed %}
  <div class="rounded-md bg-amber-50 border border-amber-200 px-4 py-3">
    <p class="font-medium text-amber-800">Removed {{ removed | length }} stale entry/entries (folder missing):</p>
    {% for item in removed %}
    <p class="font-mono text-xs text-amber-700 mt-1">{{ item.experiment }} / {{ item.run_id }}</p>
    {% endfor %}
  </div>
  {% endif %}
</div>
{% endif %}

{# OOB swap to refresh the experiments table #}
<div id="experiments-list" hx-swap-oob="true">
{% if experiments %}
<div class="bg-white rounded-lg border border-slate-200 shadow-sm overflow-hidden">
  <table class="min-w-full divide-y divide-slate-200 text-sm">
    <thead class="bg-slate-50">
      <tr>
        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Experiment</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Runs</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Last verdict</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Last run</th>
        <th class="px-6 py-3 text-right text-xs font-medium text-slate-500 uppercase tracking-wider">Export</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-100">
      {% for exp in experiments %}
      <tr class="hover:bg-slate-50">
        <td class="px-6 py-3">
          <a href="/results/{{ exp.name }}"
             class="font-mono font-medium text-indigo-600 hover:underline">{{ exp.name }}</a>
          {% if exp.has_missing %}
          <span title="Some result folders are missing from disk" class="ml-1 text-amber-500">
            <svg xmlns="http://www.w3.org/2000/svg" class="inline h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
            </svg>
          </span>
          {% endif %}
        </td>
        <td class="px-6 py-3 text-slate-700">{{ exp.count }}</td>
        <td class="px-6 py-3">
          {% set vc = {'pass': 'bg-green-100 text-green-800', 'fail': 'bg-red-100 text-red-800',
                       'inconclusive': 'bg-amber-100 text-amber-800'}.get(exp.last_verdict, 'bg-slate-100 text-slate-600') %}
          <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {{ vc }}">
            {{ exp.last_verdict }}
          </span>
        </td>
        <td class="px-6 py-3 text-slate-500 text-xs">{{ exp.last_run }}</td>
        <td class="px-6 py-3 text-right space-x-2 whitespace-nowrap">
          <a href="/results/{{ exp.name }}/export.json"
             class="text-xs text-indigo-600 hover:underline">JSON</a>
          <a href="/results/{{ exp.name }}/export.csv"
             class="text-xs text-indigo-600 hover:underline">CSV</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="bg-white rounded-lg border border-slate-200 shadow-sm px-6 py-12 text-center">
  <p class="text-sm text-slate-400">No results yet. Run an experiment to get started.</p>
</div>
{% endif %}
</div>