{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block extra_styles %}
<style>
  .experiments-container { max-width: 1000px; margin: 0 auto; }
  .exp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
  .exp-title { font-size: 1.3rem; font-weight: 700; color: var(--text-bright); }
  .exp-subtitle { font-size: 0.8rem; color: var(--text-dim); margin-top: 2px; }
  .exp-config { display: flex; gap: 16px; font-size: 0.8rem; color: var(--text-dim); }
  .exp-config span { background: var(--glass-bg); border: 1px solid var(--border); padding: 4px 10px; border-radius: 6px; }
  .exp-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
  .exp-table th { text-align: left; padding: 8px 12px; color: var(--text-dim); border-bottom: 1px solid var(--border); font-weight: 600; }
  .exp-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
  .exp-table tr:hover { background: var(--glass-bg); }
  .metric-good { color: var(--success); }
  .metric-bad { color: var(--danger); }
  .btn-start { background: var(--accent); color: #fff; border: none; padding: 8px 18px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
  .btn-start:hover { opacity: 0.9; }
  .btn-start:disabled { opacity: 0.4; cursor: not-allowed; }
  .disabled-note { font-size: 0.8rem; color: var(--text-dim); margin-top: 8px; }
  .empty-state { text-align: center; padding: 40px; color: var(--text-dim); }
</style>
{% endblock %}

{% block content %}
<div class="experiments-container">
  <div class="exp-header">
    <div>
      <div class="exp-title">Autoresearch Experiments</div>
      <div class="exp-subtitle">Autonomous ML experiment loops — modify code, train, evaluate, iterate</div>
    </div>
    <div>
      {% if enabled %}
      <button class="btn-start"
              hx-post="/experiments/start"
              hx-target="#experiment-status"
              hx-swap="innerHTML">
        Start Experiment
      </button>
      {% else %}
      <button class="btn-start" disabled>Disabled</button>
      <div class="disabled-note">Set AUTORESEARCH_ENABLED=true to enable</div>
      {% endif %}
    </div>
  </div>

  <div class="exp-config">
    <span>Metric: {{ metric_name }}</span>
    <span>Budget: {{ time_budget }}s</span>
    <span>Max iters: {{ max_iterations }}</span>
  </div>

  <div id="experiment-status" style="margin: 12px 0;"></div>

  {% if history %}
  <table class="exp-table">
    <thead>
      <tr>
        <th>#</th>
        <th>{{ metric_name }}</th>
        <th>Duration</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {% for run in history %}
      <tr>
        <td>{{ loop.index }}</td>
        <td>
          {% if run.metric is not none %}
            {{ "%.4f"|format(run.metric) }}
          {% else %}
            —
          {% endif %}
        </td>
        <td>{{ run.get("duration_s", "—") }}s</td>
        <td>{% if run.get("success") %}OK{% else %}{{ run.get("error", "failed") }}{% endif %}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="empty-state">
    No experiments yet. Start one to begin autonomous training.
  </div>
  {% endif %}
</div>
{% endblock %}
