{% extends "_base.html" %}
{% from "_macros.html" import modal %}

{% block title %}Experiments · {{ project.name | humanize }} · Urika{% endblock %}
{% block heading %}Experiments{% endblock %}

{% block breadcrumb %}
  <nav class="breadcrumb">
    <a href="/projects">Projects</a>
    <span class="breadcrumb-separator">/</span>
    <a href="/projects/{{ project.name }}">{{ project.name | humanize }}</a>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-current">Experiments</span>
  </nav>
{% endblock %}

{% block content %}
<style>
  .page-actions { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
  .form-row { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1rem; }
  .form-row label { font-weight: 600; }
  .form-row input, .form-row textarea, .form-row select { width: 100%; font: inherit; padding: 0.4rem; }
  .form-row--inline { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
  .form-row--inline label { font-weight: 600; }
  .form-row--inline input, .form-row--inline select { width: auto; }
  .form-actions { display: flex; align-items: center; gap: 0.75rem; }
  .checkbox-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
</style>

  {% set ne = running_by_type.get("run") %}
  {% if not ne %}
    {# Auto-open the New experiment modal when ?new=1 (used by /run redirect).
       Suppressed when a run is already in flight — the page shows a link to
       the live log instead. #}
    <div
      x-data
      x-init="if (new URLSearchParams(window.location.search).get('new') === '1') $dispatch('open-modal', { id: 'new-experiment' })"
    ></div>
  {% endif %}

  <div class="page-actions">
    {% if ne %}
      <a class="btn btn--primary btn--running" href="{{ ne.log_url }}">
        <span class="running-dot"></span>
        Experiment running… view log
      </a>
    {% else %}
      <button
        class="btn btn--primary"
        @click="$dispatch('open-modal', { id: 'new-experiment' })"
        type="button"
      >+ New experiment</button>
    {% endif %}
  </div>

  {% if experiments %}
    {# Newest-first by default — matches the order rows arrive in from
       the route. Filtering not needed here; experiment counts per
       project are usually small. #}
    <div class="list-controls" x-data="{ sort: 'newest' }">
      <select class="list-sort" x-model="sort" style="margin-left: auto;">
        <option value="newest">Newest first</option>
        <option value="oldest">Oldest first</option>
      </select>
    </div>

    <ul class="list" id="experiments-list">
      {% for exp in experiments %}
        <li class="list-item"
            data-experiment-id="{{ exp.experiment_id }}"
            data-last-touched="{{ exp.last_touched }}">
          {# Card layout mirrors the project-home "Recent experiments"
             cards: title and experiment_id stacked in the main column,
             plus a third muted line with run count + last-touched
             timestamp. Status tag sits on the right.

             Delete is intentionally NOT here — destructive ops live on
             the experiment detail page's Danger zone (type-name confirm).
             Row stays click-to-view; only Resume sits outside the link
             for failed/paused/stopped experiments. #}
          <a
            href="/projects/{{ project.name }}/experiments/{{ exp.experiment_id }}"
            class="list-item-link"
          >
            <div class="list-item-main">
              <div class="list-item-title">{{ (exp.name or exp.experiment_id) | humanize }}</div>
              <div class="list-item-subtitle">{{ exp.experiment_id }}</div>
              <div class="list-item-detail text-muted">
                {{ exp.runs_count }} run{{ '' if exp.runs_count == 1 else 's' }}
                · {{ exp.last_touched }}
              </div>
            </div>
            <div class="list-item-meta">
              <span class="tag tag--{{ exp.status | tag_status }}">{{ exp.status }}</span>
            </div>
          </a>
          {# Resume button only on stopped/failed/paused. Sits outside
             the <a> so clicking it doesn't navigate to the detail page. #}
          {% if exp.status in ("failed", "paused", "stopped") %}
            <form
              method="post"
              action="/api/projects/{{ project.name }}/experiments/{{ exp.experiment_id }}/resume"
              hx-post="/api/projects/{{ project.name }}/experiments/{{ exp.experiment_id }}/resume"
              hx-swap="none"
              class="list-item-action"
            >
              <button type="submit" class="btn btn--small btn--primary">
                Resume
              </button>
            </form>
          {% endif %}
        </li>
      {% endfor %}
    </ul>

    <script>
      (function() {
        const root = document.querySelector('.list-controls');
        const list = document.getElementById('experiments-list');
        if (!root || !list) return;
        const items = Array.from(list.children);
        function applySort() {
          const ctx = (window.Alpine && Alpine.$data) ? Alpine.$data(root) : { sort: 'newest' };
          const sort = ctx.sort || 'newest';
          const sorted = items.slice().sort((a, b) => {
            const av = a.dataset.lastTouched || '';
            const bv = b.dataset.lastTouched || '';
            if (sort === 'oldest') return av.localeCompare(bv);
            return bv.localeCompare(av);
          });
          sorted.forEach(it => list.appendChild(it));
        }
        root.addEventListener('change', applySort);
        applySort();
      })();
    </script>
  {% else %}
    <div class="empty-state">
      <p>No experiments yet. Click <strong>+ New experiment</strong> above to start one.</p>
    </div>
  {% endif %}

  {% call modal('new-experiment', 'New experiment') %}
    {# Mirrors ``urika run`` exactly. Mode is project-level. All
       options are visible (no Advanced collapsible — the user keeps
       running into the same options every time). Order: turns +
       toggles → audience → instructions, since the open-ended
       instructions field is the most attention-heavy and belongs at
       the end. #}
    {# Three modes mapped onto the CLI:
       * default  — single experiment, advisor picks the next method
       * auto + capped     — meta-orchestrator runs up to N experiments
       * auto + unlimited  — meta-orchestrator runs until the advisor stops
       The Resume option is NOT here — it lives per-experiment on the
       experiments list / experiment detail (only valid for already-
       failed / paused / stopped experiments). #}
    {# When the "Ask advisor first" checkbox is on, the advisor runs as
       the FIRST step inside ``urika run`` (via --advisor-first) and its
       output streams in the experiment run log alongside Planning /
       Task / Evaluator. No separate sync popup, no review step. #}
    <form
      x-data="{ auto: false, autoLimit: 'capped' }"
      hx-post="/api/projects/{{ project.name }}/run"
      hx-target="#new-experiment-feedback"
      hx-swap="innerHTML"
    >
      <label class="checkbox-row" style="margin-bottom: 0.5rem;">
        <input type="checkbox" name="advisor_first" value="on" checked>
        <span>
          <strong>Ask advisor to suggest the next experiment first</strong>
          <small class="text-muted" style="display: block;">
            The advisor reviews the project and proposes a name +
            direction before the planning agent picks the first method.
            The advisor's output appears in the run log alongside the
            other agents.
          </small>
        </span>
      </label>

      <div class="form-row">
        <label for="ne-max-turns">Max turns</label>
        <input id="ne-max-turns" name="max_turns" type="number" min="1" value="10">
      </div>

      <label class="checkbox-row">
        <input type="checkbox" name="auto" value="on" x-model="auto">
        <span>Auto mode (no confirmation prompts)</span>
      </label>

      <div x-show="auto" x-cloak style="margin-left: 1.5rem;">
        <label class="checkbox-row">
          <input type="radio" name="auto_limit" value="capped"
                 x-model="autoLimit" :disabled="!auto">
          <span>Stop after a fixed number of experiments</span>
        </label>
        <div class="form-row" x-show="autoLimit === 'capped'" x-cloak
             style="margin-left: 1.5rem;">
          <label for="ne-max-experiments">Max experiments</label>
          {# :disabled when auto is off OR the unlimited radio is picked
             — disabled inputs are excluded from the form submission, so
             the server sees no max_experiments value in those cases. #}
          <input id="ne-max-experiments" name="max_experiments"
                 type="number" min="1" value="5"
                 :disabled="!auto || autoLimit !== 'capped'">
        </div>
        <label class="checkbox-row">
          <input type="radio" name="auto_limit" value="unlimited"
                 x-model="autoLimit" :disabled="!auto">
          <span>Run until advisor decides to stop</span>
        </label>
      </div>

      <label class="checkbox-row">
        <input type="checkbox" name="review_criteria" value="on">
        <span>Review criteria when met</span>
      </label>

      <div class="form-row" style="margin-top: var(--space-4);">
        <label for="ne-audience">Audience</label>
        <select id="ne-audience" name="audience">
          {% for a in valid_audiences %}
            <option value="{{ a }}" {% if a == project.audience %}selected{% endif %}>{{ a }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="form-row">
        <label for="ne-instructions">Instructions (optional)</label>
        <textarea
          id="ne-instructions"
          name="instructions"
          rows="4"
          placeholder="Optional — leave blank to let the planning agent decide."
        ></textarea>
      </div>

      <div class="form-actions">
        <button type="button" class="btn btn--ghost" @click="$dispatch('close-modal')">Cancel</button>
        <button type="submit" class="btn btn--primary">Run experiment</button>
        <span id="new-experiment-feedback" class="text-muted"></span>
      </div>
    </form>
  {% endcall %}
{% endblock %}