{% extends "base.html" %}
{% block title %}Experiments — ABREKA{% endblock %}

{% block breadcrumb %}
<div class="breadcrumb"><a href="/">Dashboard</a> / Experiments</div>
{% endblock %}

{% block content %}
<div class="flex items-center gap-2 mb-2">
  <h1>Experiments</h1>
  {% if status_filter %}
  <span class="badge" style="background: {{ status_filter | status_color }};">{{ status_filter }}</span>
  <a href="/experiments" class="text-sm">(clear filter)</a>
  {% endif %}
</div>

{% if experiments %}
<div class="card">
  <table>
    <thead>
      <tr>
        <th><a href="/experiments?sort=id&order={% if sort_by == 'id' and order == 'asc' %}desc{% else %}asc{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">ID{% if sort_by == 'id' %} {{ '▲' if order == 'asc' else '▼' }}{% endif %}</a></th>
        <th>Status</th>
        <th>Hypothesis</th>
        <th><a href="/experiments?sort=metric&order={% if sort_by == 'metric' and order == 'desc' %}asc{% else %}desc{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">{{ primary_metric }}{% if sort_by == 'metric' %} {{ '▲' if order == 'asc' else '▼' }}{% endif %}</a></th>
        <th>Parents</th>
        <th>Tags</th>
        <th><a href="/experiments?sort=created&order={% if sort_by == 'created' and order == 'desc' %}asc{% else %}desc{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">Created{% if sort_by == 'created' %} {{ '▲' if order == 'asc' else '▼' }}{% endif %}</a></th>
      </tr>
    </thead>
    <tbody>
      {% for exp in experiments %}
      <tr>
        <td><a href="/experiments/{{ exp.id }}" class="text-mono" style="font-weight: 600;">{{ exp.id }}</a></td>
        <td>
          <a href="/experiments?status={{ exp.status }}" style="text-decoration: none;">
            <span class="badge" style="background: {{ exp.status | status_color }};">{{ exp.status }}</span>
          </a>
        </td>
        <td>{{ exp.hypothesis[:60] }}{% if exp.hypothesis|length > 60 %}...{% endif %}</td>
        <td class="text-mono">
          {% if exp.metrics and pm_split and exp.metrics.get(pm_split, {}).get(pm_key) is not none %}
            {{ "%.4f" | format(exp.metrics[pm_split][pm_key]) }}
          {% elif exp.metrics %}
            {% for split, kvs in exp.metrics.items() %}
              {% for k, v in kvs.items() %}
                {% if loop.first %}{{ "%.4f" | format(v) }}{% endif %}
              {% endfor %}
              {% if loop.first %}{% endif %}
            {% endfor %}
          {% else %}
            <span class="text-muted">—</span>
          {% endif %}
        </td>
        <td class="text-mono text-sm">
          {% for p in exp.parents %}
          <a href="/experiments/{{ p }}">{{ p }}</a>{% if not loop.last %}, {% endif %}
          {% endfor %}
          {% if not exp.parents %}<span class="text-muted">—</span>{% endif %}
        </td>
        <td class="text-sm">
          {% for t in exp.get('tags', []) %}
          <span style="background: #e2e5ea; padding: 1px 6px; border-radius: 4px; font-size: 11px;">{{ t }}</span>
          {% endfor %}
        </td>
        <td class="text-muted text-sm">{{ exp.created_at[:10] }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="card">
  <p class="text-muted">No experiments found{% if status_filter %} with status "{{ status_filter }}"{% endif %}.</p>
</div>
{% endif %}
{% endblock %}