{% extends "base.html" %}
{% block title %}Experiments · palaestrAI{% endblock %}

{% block head %}
<link rel="stylesheet" href="/ui/static/vendor/codemirror/codemirror.min.css" />
<link
  rel="stylesheet"
  href="/ui/static/vendor/codemirror/addon/fold/foldgutter.min.css"
/>
<link
  rel="stylesheet"
  href="/ui/static/vendor/codemirror/theme/material-darker.min.css"
/>
<script src="/ui/static/vendor/codemirror/codemirror.min.js"></script>
<script src="/ui/static/vendor/codemirror/mode/yaml/yaml.min.js"></script>
<script src="/ui/static/vendor/codemirror/addon/fold/foldcode.min.js"></script>
<script src="/ui/static/vendor/codemirror/addon/fold/foldgutter.min.js"></script>
<script src="/ui/static/vendor/codemirror/addon/fold/indent-fold.min.js"></script>
{% endblock %}

{% block content %}
<hgroup>
  <h1>Experiments</h1>
  <p>
    Load, edit and create arsenAI experiment documents (YAML). Pick an
    experiment on the left to load it; double-click a section to edit just that
    subtree in place, or use <strong>Toggle Editor</strong> for the whole
    document. <strong>Save</strong> stores the document (a new experiment, or an
    update while no runs exist yet); <strong>Generate</strong> creates concrete
    experiment runs via arsenAI; <strong>Schedule all</strong> schedules every
    generated run. Drag a template snippet from the right onto a section to
    insert it.
  </p>
</hgroup>

<div class="editor-layout">
  <!-- Left / centre: the editor (~2/3) -->
  <section class="editor-pane">
    <!-- Experiment loader: pick an existing experiment to load + search. -->
    <div class="experiment-loader">
      <input
        type="search"
        id="experiment-search"
        name="q"
        placeholder="Search experiments…"
      />
      <div id="experiment-list-wrap" class="experiment-list-wrap">
        {% include "experiments_list.html" %}
      </div>
    </div>

    <div class="editor-toolbar" role="group">
      <button id="btn-new" class="secondary" type="button">New</button>
      <button id="btn-open-file" class="secondary" type="button">
        Open File…
      </button>
      <button id="btn-toggle-editor" class="contrast" type="button">
        Toggle Editor
      </button>
      <button id="btn-exp-cancel" class="secondary" type="button">
        Cancel
      </button>
      <button id="btn-save" type="button">Save</button>
      <button id="btn-generate" type="button">Generate</button>
      <button id="btn-schedule" type="button">Schedule all</button>
      <button id="btn-delete" class="secondary" type="button" disabled>
        Delete
      </button>
      <!-- Hidden control backing "Open File…"; read client-side, never uploaded. -->
      <input
        type="file"
        id="file-input"
        accept=".yml,.yaml,.txt,text/yaml,application/x-yaml"
        hidden
      />
    </div>

    <p id="current-experiment-label" class="current-template-label">
      <em>New document</em>
    </p>
    <p id="save-status" class="yaml-error" hidden></p>

    <!-- One region. The read-only VIEW hosts in-place section editors; whole-
         document editing replaces the view entirely. Mirrors the Templates
         editor exactly. -->
    <div id="editor-region">
      <div id="yaml-view" class="editor-slot">
        <textarea id="yaml-view-src"></textarea>
      </div>

      <div id="section-editor-wrap" class="editor-slot" hidden>
        <p class="section-editor-label" id="section-editor-label"></p>
        <textarea id="section-editor"></textarea>
        <div id="yaml-error" class="yaml-error" hidden></div>
        <div class="editor-actions" role="group">
          <button id="btn-add-template" type="button" hidden>
            Add as Template
          </button>
          <button id="btn-cancel" class="secondary" type="button">
            Cancel <small>(Esc)</small>
          </button>
          <button id="btn-apply" type="button">
            Apply <small>(Ctrl+Enter)</small>
          </button>
        </div>
      </div>
    </div>
  </section>

  <!-- Right: template snippets (drag onto a section to insert), reused from the
       Templates editor across the 7 categories (~1/3). -->
  <aside class="snippet-pane">
    <h2>Templates</h2>
    <input
      type="search"
      id="template-search"
      name="q"
      placeholder="Search templates…"
    />
    <p class="snippet-hint">
      <small>Drag a snippet onto a section to insert it.</small>
    </p>
    <div id="snippet-groups">
      {% include "templates_groups.html" %}
    </div>
  </aside>
</div>

<!-- Add-as-Template modal (create a template snippet from a section). -->
<dialog id="add-template-modal">
  <article>
    <header><h3 id="add-template-title">Add as template</h3></header>
    <form id="add-template-form" method="dialog">
      <label for="modal-type">Type</label>
      <select id="modal-type" name="type" required>
        {% for cat in categories %}
        <option value="{{ cat.api_name }}">{{ cat.label }}</option>
        {% endfor %}
      </select>
      <label for="modal-name">Name</label>
      <input id="modal-name" name="name" type="text" required />
      <footer>
        <button type="button" id="modal-cancel" class="secondary">
          Cancel
        </button>
        <button type="submit" id="modal-ok">OK</button>
      </footer>
    </form>
  </article>
</dialog>

<!-- Save-as-new-experiment modal: shown when Save is pressed on an experiment
     that already has generated runs (it has become immutable). -->
<dialog id="experiment-name-modal">
  <article>
    <header><h3>Save as a new experiment</h3></header>
    <p>
      <small
        >This experiment already has generated runs and is immutable. Enter a
        new name to store a copy.</small
      >
    </p>
    <form id="experiment-name-form" method="dialog">
      <label for="exp-name-input">New experiment name</label>
      <input id="exp-name-input" name="name" type="text" required />
      <footer>
        <button type="button" id="exp-name-cancel" class="secondary">
          Cancel
        </button>
        <button type="submit" id="exp-name-ok">Save copy</button>
      </footer>
    </form>
  </article>
</dialog>

<!-- Confirmation popup (Generate / Schedule all results). -->
<dialog id="confirm-modal">
  <article>
    <header><h3 id="confirm-title">Done</h3></header>
    <p id="confirm-message"></p>
    <footer>
      <button type="button" id="confirm-ok">OK</button>
    </footer>
  </article>
</dialog>
{% endblock %}

{% block scripts %}
<script src="/ui/static/experiment_editor.js" defer></script>
{% endblock %}