{% extends "base.html" %}
{% block title %}Experiment Runs · 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>Experiment Runs</h1>
  <p>
    Load, edit and schedule experiment runs (YAML). First pick a parent
    experiment; its runs then appear as a selectable list. <strong>Click a
    row</strong> to view or edit it — the editor stays hidden until you do, and
    opening a run does <em>not</em> change your checkbox selection. <strong>Check
    rows</strong> (and use <em>Select all</em>) to queue runs, then
    <strong>Schedule selected</strong> to schedule them all at once; the
    selection survives filtering the list by search. While a run is open,
    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 run (in place while it has no instances; once it has been
    scheduled it is immutable, so Save stores a copy under a new uid). The single
    <strong>Schedule</strong> button schedules the run you are viewing. 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">
    <!-- Run loader: two search boxes (Experiment -> Experiment Run). -->
    <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>
      <input
        type="search"
        id="run-search"
        name="q"
        placeholder="Search runs of the selected experiment…"
      />
      <div id="run-list-wrap" class="experiment-list-wrap">
        {% include "runs_list.html" %}
      </div>
      <div class="batch-actions" role="group">
        <button id="btn-schedule-selected" type="button" disabled>
          Schedule selected (0)
        </button>
        <button id="btn-clear-selection" class="secondary" type="button" disabled>
          Clear selection
        </button>
      </div>
    </div>

    <!-- Always-visible entry points; these also reveal the editor below. -->
    <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>
      <!-- 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>

    <!-- The editor stays hidden until a run is opened (or New/Open File…). -->
    <p id="editor-placeholder" class="current-template-label">
      <em>Select a run to view or edit it.</em>
    </p>

    <div id="editor-toolbar" class="editor-toolbar" role="group" hidden>
      <button id="btn-toggle-editor" class="contrast" type="button">
        Toggle Editor
      </button>
      <button id="btn-run-cancel" class="secondary" type="button">
        Cancel
      </button>
      <button id="btn-save" type="button">Save</button>
      <button id="btn-schedule" type="button" disabled>Schedule</button>
      <button id="btn-delete" class="secondary" type="button" disabled>
        Delete
      </button>
    </div>

    <p id="current-run-label" class="current-template-label" hidden>
      <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 Experiments
         editor exactly. Hidden until a run is opened (or New/Open File…). -->
    <div id="editor-region" hidden>
      <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-run modal: shown when Save is pressed on a run that already has
     instances (it has become immutable). -->
<dialog id="run-name-modal">
  <article>
    <header><h3>Save as a new run</h3></header>
    <p>
      <small
        >This run has already been scheduled and is immutable. Enter a new uid
        to store a copy (same parent experiment).</small
      >
    </p>
    <form id="run-name-form" method="dialog">
      <label for="run-name-input">New run uid</label>
      <input id="run-name-input" name="uid" type="text" required />
      <footer>
        <button type="button" id="run-name-cancel" class="secondary">
          Cancel
        </button>
        <button type="submit" id="run-name-ok">Save copy</button>
      </footer>
    </form>
  </article>
</dialog>

<!-- Confirmation popup (Schedule result). -->
<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_run_editor.js" defer></script>
{% endblock %}