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

<div class="mb-6 flex items-center justify-between">
  <div>
    <h1 class="text-2xl font-bold text-slate-900">Results</h1>
    <p class="text-sm text-slate-500 mt-1">Experiment run history</p>
  </div>
  <div class="flex gap-2">
    <button hx-post="/results/validate"
            hx-target="#validate-panel"
            hx-swap="innerHTML"
            class="px-4 py-2 border border-slate-300 rounded-md text-sm font-medium
                   text-slate-700 bg-white hover:bg-slate-50">
      Validate registry
    </button>
    <button hx-post="/results/sync"
            hx-target="#sync-panel"
            hx-swap="innerHTML"
            class="px-4 py-2 border border-slate-300 rounded-md text-sm font-medium
                   text-slate-700 bg-white hover:bg-slate-50">
      Sync registry
    </button>
  </div>
</div>

<div id="validate-panel" class="mb-6"></div>
<div id="sync-panel" class="mb-6"></div>

<div id="experiments-list">
{% 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">Report</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 whitespace-nowrap">
          <a href="/results/{{ exp.name }}?tab=report"
             class="text-xs text-indigo-600 hover:underline">Report</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>
{% endblock %}