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

{% block extra_css %}
    .tree-node {
      margin: 4px 0;
      padding: 8px 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
    }
    .tree-node:hover {
      border-color: var(--primary);
      box-shadow: 0 1px 4px rgba(79, 70, 229, 0.15);
    }
    .tree-node .exp-id {
      font-family: var(--mono);
      font-weight: 700;
    }
    .tree-node .hypothesis {
      color: var(--muted);
      max-width: 400px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .tree-node .metric {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 600;
    }
    .tree-children {
      margin-left: 32px;
      padding-left: 16px;
      border-left: 2px solid var(--border);
    }
    details.tree-children-wrapper > summary {
      list-style: none;
      cursor: pointer;
    }
    details.tree-children-wrapper > summary::-webkit-details-marker {
      display: none;
    }
    .tree-chevron {
      font-size: 10px;
      transition: transform 0.15s;
      display: inline-block;
      user-select: none;
    }
    details[open].tree-children-wrapper > summary .tree-chevron {
      transform: rotate(90deg);
    }
    .tree-controls {
      margin-bottom: 12px;
      display: flex;
      gap: 8px;
    }
{% endblock %}

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

{% block content %}
<h1 class="mb-2">Experiment Tree</h1>

{% macro render_node(eid) %}
  {% set exp = index.get(eid, {}) %}
  {% if children.get(eid) %}
  <details class="tree-children-wrapper" open>
    <summary>
      <div class="tree-node">
        <span class="tree-chevron">&#9654;</span>
        <a href="/experiments/{{ eid }}" style="text-decoration: none;" onclick="event.stopPropagation();">
          <span class="exp-id">{{ eid }}</span>
          <span class="badge" style="background: {{ exp.status | status_color }}; font-size: 11px;">{{ exp.status }}</span>
          <span class="hypothesis">{{ exp.hypothesis[:50] }}{% if exp.get('hypothesis', '')|length > 50 %}...{% endif %}</span>
          {% if exp.metrics and pm_split %}
            {% set val = exp.metrics.get(pm_split, {}).get(pm_key) %}
            {% if val is not none %}
            <span class="metric">{{ pm_key }}={{ "%.4f" | format(val) }}</span>
            {% endif %}
          {% endif %}
        </a>
      </div>
    </summary>
    <div class="tree-children">
      {% for child_id in children[eid] | sort %}
        {{ render_node(child_id) }}
      {% endfor %}
    </div>
  </details>
  {% else %}
  <div>
    <a href="/experiments/{{ eid }}" style="text-decoration: none;">
      <div class="tree-node">
        <span class="exp-id">{{ eid }}</span>
        <span class="badge" style="background: {{ exp.status | status_color }}; font-size: 11px;">{{ exp.status }}</span>
        <span class="hypothesis">{{ exp.hypothesis[:50] }}{% if exp.get('hypothesis', '')|length > 50 %}...{% endif %}</span>
        {% if exp.metrics and pm_split %}
          {% set val = exp.metrics.get(pm_split, {}).get(pm_key) %}
          {% if val is not none %}
          <span class="metric">{{ pm_key }}={{ "%.4f" | format(val) }}</span>
          {% endif %}
        {% endif %}
      </div>
    </a>
  </div>
  {% endif %}
{% endmacro %}

{% if roots %}
<div class="tree-controls">
  <button class="btn btn-sm" onclick="document.querySelectorAll('.tree-children-wrapper').forEach(d => d.open = true);">Expand All</button>
  <button class="btn btn-sm" onclick="document.querySelectorAll('.tree-children-wrapper').forEach(d => d.open = false);">Collapse All</button>
</div>
  {% for root_id in roots %}
    {{ render_node(root_id) }}
  {% endfor %}
{% else %}
<div class="card">
  <p class="text-muted">No experiments found.</p>
</div>
{% endif %}
{% endblock %}