{% set ns = namespace(tests=summary.total_evaluations, passed=0, failed=0) %}
{% for r in summary.results %}
  {% set p = namespace(pass=false, fail=false) %}
  {% if r.result and r.result.scores %}
    {% for s in r.result.scores %}
      {% if s.passed is true %}
        {% set p.pass = true %}
      {% elif s.passed is false and p.pass is not true %}
        {% set p.fail = true %}
      {% endif %}
    {% endfor %}
  {% endif %}
  {% if p.pass %}{% set ns.passed = ns.passed + 1 %}{% elif p.fail %}{% set ns.failed = ns.failed + 1 %}{% endif %}
{% endfor %}
<div id="summary-chips" class="mb-3 flex flex-wrap items-center gap-2">
  <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-gray-100 text-gray-800 text-xs font-medium">
    <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
    Tests: {{ summary.total_evaluations }}
  </span>
  {% for chip in score_chips %}
    {% if chip.type == 'ratio' %}
      {% set klass = 'bg-yellow-100 text-yellow-800' %}
      {% if chip.passed == chip.total %}{% set klass = 'bg-green-100 text-green-800' %}{% elif chip.passed == 0 and chip.total > 0 %}{% set klass = 'bg-red-100 text-red-800' %}{% endif %}
      <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium {{ klass }}">
        {{ chip.key }}: {{ chip.passed }}/{{ chip.total }}
      </span>
    {% elif chip.type == 'avg' %}
      <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-slate-100 text-slate-800 text-xs font-medium">
        {{ chip.key }}: {{ chip.avg | round(2) }}
      </span>
    {% endif %}
  {% endfor %}
  {% if summary.average_latency > 0 %}
    <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-gray-100 text-gray-800 text-xs font-medium">
      <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
      Avg: {{ summary.average_latency | round(2) }}s
    </span>
  {% endif %}
  
</div>
<!-- Filtered summary (computed client-side) -->
<div id="filtered-summary" class="mb-3 hidden">
  <div class="flex flex-wrap items-center gap-2">
    <span id="filtered-count-chip" class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-blue-100 text-blue-800 text-xs font-medium"></span>
    <span id="filtered-avg-latency" class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-gray-100 text-gray-800 text-xs font-medium"></span>
    <span id="filtered-score-chips" class="inline-flex items-center gap-1 flex-wrap"></span>
  </div>
</div>
<div class="overflow-x-auto">
<table id="results-table" class="w-full table-fixed divide-y divide-gray-200 shadow ring-1 ring-black ring-opacity-5 rounded-lg" data-run-id="{{ run_id }}">
  <thead>
    <tr class="bg-gray-50">
      <th class="w-10 px-2 py-2 text-left text-xs font-medium text-gray-600 uppercase tracking-wider select-none"> </th>
      <th class="px-4 py-2 text-left text-xs font-medium text-gray-600 uppercase tracking-wider cursor-pointer select-none relative truncate" data-col="function">Function</th>
      <th class="px-4 py-2 text-left text-xs font-medium text-gray-600 uppercase tracking-wider cursor-pointer select-none relative truncate" data-col="dataset">Dataset</th>
      <th class="px-4 py-2 text-left text-xs font-medium text-gray-600 uppercase tracking-wider cursor-pointer select-none relative truncate" data-col="labels">Labels</th>
      <th class="px-4 py-2 text-left text-xs font-medium text-gray-600 uppercase tracking-wider cursor-pointer select-none relative truncate" data-col="input">Input</th>
      <th class="px-4 py-2 text-left text-xs font-medium text-gray-600 uppercase tracking-wider cursor-pointer select-none relative truncate" data-col="output">Output</th>
      <th class="px-4 py-2 text-left text-xs font-medium text-gray-600 uppercase tracking-wider cursor-pointer select-none relative truncate" data-col="reference">Reference</th>
      <th class="px-4 py-2 text-left text-xs font-medium text-gray-600 uppercase tracking-wider cursor-pointer select-none relative truncate" data-col="error">Error</th>
      <th class="px-4 py-2 text-left text-xs font-medium text-gray-600 uppercase tracking-wider cursor-pointer select-none relative truncate" data-col="scores">Scores</th>
      <th class="px-4 py-2 text-left text-xs font-medium text-gray-600 uppercase tracking-wider cursor-pointer select-none relative truncate" data-col="latency" data-type="number">Latency</th>
    </tr>
  </thead>
  <tbody class="bg-white divide-y divide-gray-100">
    {% for r in summary.results %}
    {% set row_id = loop.index0 %}
    <tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50" data-row="main" data-row-id="{{ row_id }}">
      <td class="px-2 py-2">
        <button class="expand-btn inline-flex items-center justify-center w-6 h-6 rounded hover:bg-gray-200 text-gray-600" data-row-id="{{ row_id }}" aria-expanded="false" aria-label="Expand row">
          <span class="icon">▸</span>
        </button>
      </td>
      <td class="px-4 py-2 text-sm font-mono text-sky-700 truncate" data-col="function">{{ r.function }}</td>
      <td class="px-4 py-2 text-sm text-gray-700 truncate" data-col="dataset">{{ r.dataset }}</td>
      <td class="px-4 py-2 text-sm text-gray-800 truncate" data-col="labels">
        {% if r.labels %}
          {% for la in r.labels %}
            <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-gray-100 text-gray-700 text-xs mr-1">{{ la }}</span>
          {% endfor %}
        {% endif %}
      </td>
      <td class="px-4 py-2 text-sm text-gray-800 truncate" data-col="input" title="{{ r.result.input }}">{{ r.result.input }}</td>
      <td class="px-4 py-2 text-sm text-gray-800 truncate" data-col="output" title="{{ r.result.output }}">{{ r.result.output }}</td>
      <td class="px-4 py-2 text-sm text-gray-800 truncate" data-col="reference">
        {% if r.result.reference is not none %}
          <span title="{{ r.result.reference }}">{{ r.result.reference }}</span>
        {% else %}
          <span class="text-gray-400">—</span>
        {% endif %}
      </td>
      <td class="px-4 py-2 text-sm truncate" data-col="error">
        {% if r.result.error %}
          <span class="text-red-600">{{ r.result.error }}</span>
        {% else %}
          <span class="text-gray-400">—</span>
        {% endif %}
      </td>
      <td class="px-4 py-2 text-sm" data-col="scores">
        {% if r.result.scores %}
          {% set max_show = 3 %}
          <div class="flex flex-wrap gap-1">
            {% for s in r.result.scores %}
              {% if loop.index0 < max_show %}
                {% set badge = 'bg-slate-100 text-slate-700' %}
                {% if s.passed is true %}
                  {% set badge = 'bg-green-100 text-green-800' %}
                {% elif s.passed is false %}
                  {% set badge = 'bg-red-100 text-red-800' %}
                {% endif %}
                <span class="inline-flex items-center px-2 py-0.5 rounded-full {{ badge }} text-xs">
                  {% if s.value is not none %}
                    {{ s.key }}: {{ (s.value is number) and (s.value | round(2)) or s.value }}
                  {% else %}
                    {{ s.key }}
                  {% endif %}
                </span>
              {% endif %}
            {% endfor %}
            {% if r.result.scores | length > max_show %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-gray-100 text-gray-700 text-xs">+{{ r.result.scores | length - max_show }}</span>
            {% endif %}
          </div>
        {% else %}
          <span class="text-gray-400">—</span>
        {% endif %}
      </td>
      <td class="px-4 py-2 text-sm whitespace-nowrap" data-col="latency" data-value="{% if r.result.latency is not none %}{{ r.result.latency }}{% endif %}">
        {% if r.result.latency is not none %}
          {% set latency = r.result.latency %}
          {% set label = latency | round(2) %}
          {% if latency <= 0.5 %}
            <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-green-100 text-green-800">{{ label }}s</span>
          {% elif latency <= 1.5 %}
            <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-yellow-100 text-yellow-800">{{ label }}s</span>
          {% else %}
            <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-red-100 text-red-800">{{ label }}s</span>
          {% endif %}
        {% else %}
          <span class="text-gray-400">—</span>
        {% endif %}
      </td>
    </tr>
    <tr class="bg-gray-50" data-row="detail" data-row-id="{{ row_id }}" hidden
        data-original-dataset='{{ r.dataset | e }}'
        data-original-labels='{{ (r.labels or []) | tojson | e }}'
        data-original-metadata='{{ (r.result.metadata or none) | tojson | e }}'
        data-original-scores='{{ (r.result.scores or []) | tojson | e }}'
        data-original-annotation='{{ (r.result.annotation or "") | e }}'>
      <td colspan="10" class="px-6 py-4">
        <div class="border rounded-md p-4 bg-white shadow-sm">
          <div class="flex justify-end items-center mb-3">
            <div class="flex gap-2">
              <button class="edit-btn px-3 py-1 text-sm border rounded" data-row-id="{{ row_id }}">Edit</button>
              <button class="save-btn px-3 py-1 text-sm border rounded bg-green-600 text-white hidden" data-row-id="{{ row_id }}">Save</button>
              <button class="cancel-btn px-3 py-1 text-sm border rounded hidden" data-row-id="{{ row_id }}">Cancel</button>
            </div>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-2 text-sm text-gray-700 mb-4 items-start">
            <div class="view-section"><span class="font-semibold">Function:</span> <span class="font-mono text-sky-700">{{ r.function }}</span></div>
            <div class="view-section"><span class="font-semibold">Dataset:</span> <span class="dataset-view">{{ r.dataset }}</span></div>
            <div class="view-section"><span class="font-semibold">Labels:</span>
              {% if r.labels %}
                {% for la in r.labels %}
                  <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-gray-100 text-gray-700 text-xs mr-1">{{ la }}</span>
                {% endfor %}
              {% else %}
                <span class="text-gray-400">—</span>
              {% endif %}
            </div>
            <div class="view-section"><span class="font-semibold">Latency:</span> {% if r.result.latency is not none %}{{ r.result.latency | round(3) }}s{% else %}<span class="text-gray-400">—</span>{% endif %}</div>
            <div class="view-section"><span class="font-semibold">Error:</span> {% if r.result.error %}<span class="text-red-600">{{ r.result.error }}</span>{% else %}<span class="text-gray-400">—</span>{% endif %}</div>

            <!-- Edit fields -->
            <div class="edit-section hidden">
              <label class="block text-xs font-semibold text-gray-500 mb-1">Dataset</label>
              <input id="dataset-input-{{ row_id }}" type="text" class="w-full border rounded px-2 py-1" value="{{ r.dataset }}" />
            </div>
            <div class="edit-section hidden">
              <label class="block text-xs font-semibold text-gray-500 mb-1">Labels (comma-separated)</label>
              <input id="labels-input-{{ row_id }}" type="text" class="w-full border rounded px-2 py-1" value="{% if r.labels %}{{ r.labels | join(', ') }}{% endif %}" />
            </div>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="view-section relative group">
              <div class="text-xs font-semibold text-gray-500 mb-1">Input</div>
              <button class="copy-btn absolute right-2 top-2 p-1 rounded bg-white/80 border opacity-0 group-hover:opacity-100 transition-opacity" data-copy="pre-input-{{ row_id }}" title="Copy">
                <svg class="copy-icon h-4 w-4 text-gray-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                <svg class="check-icon h-4 w-4 text-green-600 hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
              </button>
              <pre id="pre-input-{{ row_id }}" class="p-2 bg-gray-100 rounded overflow-auto max-h-64 whitespace-pre-wrap">{{ r.result.input }}</pre>
            </div>
            <div class="view-section relative group">
              <div class="text-xs font-semibold text-gray-500 mb-1">Output</div>
              <button class="copy-btn absolute right-2 top-2 p-1 rounded bg-white/80 border opacity-0 group-hover:opacity-100 transition-opacity" data-copy="pre-output-{{ row_id }}" title="Copy">
                <svg class="copy-icon h-4 w-4 text-gray-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                <svg class="check-icon h-4 w-4 text-green-600 hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
              </button>
              <pre id="pre-output-{{ row_id }}" class="p-2 bg-gray-100 rounded overflow-auto max-h-64 whitespace-pre-wrap">{{ r.result.output }}</pre>
            </div>
            <div class="view-section relative group">
              <div class="text-xs font-semibold text-gray-500 mb-1">Reference</div>
              <button class="copy-btn absolute right-2 top-2 p-1 rounded bg-white/80 border opacity-0 group-hover:opacity-100 transition-opacity" data-copy="pre-ref-{{ row_id }}" title="Copy">
                <svg class="copy-icon h-4 w-4 text-gray-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                <svg class="check-icon h-4 w-4 text-green-600 hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
              </button>
              <pre id="pre-ref-{{ row_id }}" class="p-2 bg-gray-100 rounded overflow-auto max-h-64 whitespace-pre-wrap">{{ r.result.reference }}</pre>
            </div>
            <div class="view-section relative group">
              <div class="text-xs font-semibold text-gray-500 mb-1">Metadata</div>
              <button class="copy-btn absolute right-2 top-2 p-1 rounded bg-white/80 border opacity-0 group-hover:opacity-100 transition-opacity" data-copy="pre-meta-{{ row_id }}" title="Copy">
                <svg class="copy-icon h-4 w-4 text-gray-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                <svg class="check-icon h-4 w-4 text-green-600 hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
              </button>
              <pre id="pre-meta-{{ row_id }}" class="p-2 bg-gray-100 rounded overflow-auto max-h-64 whitespace-pre-wrap">{{ r.result.metadata }}</pre>
            </div>
            <div class="view-section md:col-span-2">
              <div class="text-xs font-semibold text-gray-500 mb-1">Run Data</div>
              {% if r.result.run_data is defined and r.result.run_data is not none %}
                <div class="relative group">
                  <button class="copy-btn absolute right-2 top-2 p-1 rounded bg-white/80 border opacity-0 group-hover:opacity-100 transition-opacity" data-copy="pre-run-{{ row_id }}" title="Copy">
                    <svg class="copy-icon h-4 w-4 text-gray-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                    <svg class="check-icon h-4 w-4 text-green-600 hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
                  </button>
                  <pre id="pre-run-{{ row_id }}" class="p-2 bg-gray-100 rounded overflow-auto max-h-64 whitespace-pre-wrap">{{ r.result.run_data | tojson(indent=2) }}</pre>
                </div>
              {% else %}
                <div class="text-gray-400">—</div>
              {% endif %}
            </div>
            <div class="edit-section hidden md:col-span-2">
              <label class="block text-xs font-semibold text-gray-500 mb-1">Metadata (JSON)</label>
              <textarea id="metadata-input-{{ row_id }}" class="w-full border rounded px-2 py-1 font-mono h-28">{% if r.result.metadata %}{{ r.result.metadata | tojson(indent=2) }}{% endif %}</textarea>
            </div>
          </div>

          <div class="mt-4">
            <div class="text-xs font-semibold text-gray-500 mb-1">Scores</div>
            <div class="view-section">
              {% if r.result.scores %}
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
                  {% for s in r.result.scores %}
                    <div class="border rounded p-2 bg-gray-50">
                      <div class="text-sm"><span class="font-semibold">Key:</span> {{ s.key }}</div>
                      {% if s.value is not none %}
                        <div class="text-sm"><span class="font-semibold">Value:</span> {{ s.value }}</div>
                      {% endif %}
                      {% if s.passed is not none %}
                        <div class="text-sm"><span class="font-semibold">Passed:</span> {{ s.passed }}</div>
                      {% endif %}
                      {% if s.notes %}
                        <div class="text-sm"><span class="font-semibold">Notes:</span> {{ s.notes }}</div>
                      {% endif %}
                    </div>
                  {% endfor %}
                </div>
              {% else %}
                <div class="text-gray-400">No scores</div>
              {% endif %}
            </div>

            <div class="edit-section hidden">
              {% set scores = r.result.scores or [] %}
              <div class="space-y-2" id="scores-editor-{{ row_id }}">
                {% for s in scores %}
                <div class="border rounded p-2 bg-gray-50">
                  <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
                    <div>
                      <label class="block text-xs text-gray-500 mb-1">Key</label>
                      <input type="text" class="w-full border rounded px-2 py-1" name="score-key" value="{{ s.key }}" />
                    </div>
                    <div>
                      <label class="block text-xs text-gray-500 mb-1">Value</label>
                      <input type="number" step="any" class="w-full border rounded px-2 py-1" name="score-value" value="{% if s.value is not none %}{{ s.value }}{% endif %}" />
                    </div>
                    <div>
                      <label class="block text-xs text-gray-500 mb-1">Passed</label>
                      <select class="w-full border rounded px-2 py-1" name="score-passed">
                        <option value="">—</option>
                        <option value="true" {% if s.passed is true %}selected{% endif %}>True</option>
                        <option value="false" {% if s.passed is false %}selected{% endif %}>False</option>
                      </select>
                    </div>
                    <div>
                      <label class="block text-xs text-gray-500 mb-1">Notes</label>
                      <input type="text" class="w-full border rounded px-2 py-1" name="score-notes" value="{% if s.notes %}{{ s.notes }}{% endif %}" />
                    </div>
                  </div>
                </div>
                {% endfor %}
              </div>
            </div>
          </div>

          <div class="mt-6" data-testid="annotations-section">
            <div class="flex items-center justify-between mb-2">
              <div class="text-xs font-semibold text-gray-500">Annotation</div>
            </div>
            <div class="view-section">
              {% if r.result.annotation %}
                <div class="p-2 bg-gray-50 rounded whitespace-pre-wrap">{{ r.result.annotation }}</div>
              {% else %}
                <div class="text-gray-400">—</div>
              {% endif %}
            </div>
            <div class="edit-section hidden">
              <textarea id="annotation-input-{{ row_id }}" class="w-full border rounded px-2 py-1" placeholder="Add a note…">{% if r.result.annotation %}{{ r.result.annotation }}{% endif %}</textarea>
            </div>
          </div>
        </div>
      </td>
    </tr>
    {% endfor %}
  </tbody>
  
</table>
</div>