{% extends "base.html" %}

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

{% block extra_styles %}{% 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 %}