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

<!-- Builder modal state lives here so buttons anywhere on the page can open it -->
<div x-data="{ builderOpen: false }" @builder-close.window="builderOpen = false">

<div class="mb-6 flex items-center justify-between">
  <div>
    <h1 class="text-2xl font-bold text-slate-900">Experiments</h1>
    <p class="text-sm text-slate-500 mt-1">Manage and run experiment blueprints</p>
  </div>
  <button
    @click="builderOpen = true"
    hx-get="/experiments/builder"
    hx-target="#builder-content"
    hx-swap="innerHTML"
    hx-trigger="click"
    class="px-4 py-2 rounded-md bg-indigo-600 text-white text-sm font-medium
           hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
    + New Experiment
  </button>
</div>

<div class="grid grid-cols-1 gap-6 lg:grid-cols-5">

  <!-- Blueprint list -->
  <div class="lg:col-span-3 bg-white rounded-lg border border-slate-200 shadow-sm"
       x-data="{ cloning: false, cloneSource: '' }">
    <div class="px-6 py-4 border-b border-slate-200">
      <h2 class="text-sm font-semibold text-slate-900">Blueprints</h2>
    </div>

    {% if experiments %}
    <table class="min-w-full divide-y divide-slate-200 text-sm">
      <thead class="bg-slate-50">
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium text-slate-500
                     uppercase tracking-wider">Name</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-slate-500
                     uppercase tracking-wider">Description</th>
          <th class="px-6 py-3 text-right text-xs font-medium text-slate-500
                     uppercase tracking-wider">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100">
        {% for exp in experiments %}
        <tr class="hover:bg-slate-50">
          <td class="px-6 py-3 font-mono font-medium text-slate-900 whitespace-nowrap">
            {{ exp.name }}
          </td>
          <td class="px-6 py-3 text-slate-500 max-w-xs truncate">
            {{ exp.description | default('—') }}
          </td>
          <td class="px-6 py-3 text-right whitespace-nowrap space-x-1">
            <a href="/experiments/{{ exp.name }}/runner"
               class="px-3 py-1 rounded bg-indigo-600 text-white text-xs font-medium
                      hover:bg-indigo-700 inline-block">
              Run
            </a>
            <a href="/results/{{ exp.name }}?tab=report"
               class="px-3 py-1 rounded border border-slate-300 text-slate-600
                      text-xs font-medium hover:bg-slate-50 inline-block">
              Report
            </a>
            <button
              @click="builderOpen = true"
              hx-get="/experiments/{{ exp.name }}/edit"
              hx-target="#builder-content"
              hx-swap="innerHTML"
              hx-trigger="click"
              class="px-3 py-1 rounded border border-slate-300 text-slate-600
                     text-xs font-medium hover:bg-slate-50">
              Edit
            </button>
            <button @click="cloneSource = '{{ exp.name }}'; cloning = true"
              class="px-3 py-1 rounded border border-slate-300 text-slate-600
                     text-xs font-medium hover:bg-slate-50">
              Clone
            </button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <p class="px-6 py-8 text-sm text-slate-400">
      No blueprints found. Click <strong>+ New Experiment</strong> to create one.
    </p>
    {% endif %}

    <!-- Clone modal -->
    <div x-show="cloning" x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
         @keydown.escape.window="cloning = false">
      <div class="bg-white rounded-lg shadow-xl w-full max-w-sm p-6" @click.stop>
        <h3 class="text-sm font-semibold text-slate-900 mb-4">Clone blueprint</h3>
        <form hx-post="/experiments/copy"
              hx-target="#run-panel"
              hx-swap="innerHTML"
              @submit="cloning = false">
          <div class="mb-3">
            <label class="block text-xs font-medium text-slate-700 mb-1">Source</label>
            <input name="source" :value="cloneSource" readonly
                   class="w-full rounded border border-slate-300 px-3 py-1.5 text-sm
                          font-mono bg-slate-50">
          </div>
          <div class="mb-4">
            <label class="block text-xs font-medium text-slate-700 mb-1">New name</label>
            <input name="destination" required autofocus
                   class="w-full rounded border border-slate-300 px-3 py-1.5 text-sm
                          font-mono focus:outline-none focus:ring-2 focus:ring-indigo-500">
          </div>
          <div class="flex justify-end gap-2">
            <button type="button" @click="cloning = false"
                    class="px-4 py-1.5 text-sm border border-slate-300 rounded
                           text-slate-600 hover:bg-slate-50">
              Cancel
            </button>
            <button type="submit"
                    class="px-4 py-1.5 text-sm bg-indigo-600 text-white rounded
                           hover:bg-indigo-700">
              Clone
            </button>
          </div>
        </form>
      </div>
    </div>

  </div>

  <!-- Run output panel -->
  <div class="lg:col-span-2">
    <div class="bg-white rounded-lg border border-slate-200 shadow-sm h-full">
      <div class="px-6 py-4 border-b border-slate-200">
        <h2 class="text-sm font-semibold text-slate-900">Output</h2>
      </div>
      <div id="run-panel" class="px-6 py-4 text-sm text-slate-400">
      </div>
    </div>
  </div>

</div>

<!-- ── Experiment Builder modal ───────────────────────────────────────────── -->
<div x-show="builderOpen" x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
     @keydown.escape.window="builderOpen = false">
  <div class="bg-white rounded-xl shadow-2xl w-full max-w-xl flex flex-col
              max-h-[90vh] overflow-hidden"
       @click.stop>

    <!-- Modal chrome -->
    <div class="flex items-center justify-between px-6 py-3 border-b border-slate-200
                bg-slate-50 rounded-t-xl flex-shrink-0">
      <span class="text-xs font-medium text-slate-500 uppercase tracking-wider">
        Experiment Builder
      </span>
      <button @click="builderOpen = false"
              class="text-slate-400 hover:text-slate-600 transition-colors text-lg leading-none">
        &times;
      </button>
    </div>

    <!-- Wizard content — HTMX swaps into here -->
    <div id="builder-content" class="flex-1 overflow-y-auto min-h-[300px]">
      <div class="flex items-center justify-center py-12">
        <span class="text-sm text-slate-400">Loading scenarios…</span>
      </div>
    </div>

  </div>
</div>

</div><!-- end x-data builderOpen -->
{% endblock %}