{% extends "base.html" %}
{% block title %}Templates · 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>Templates</h1>
  <p>
    Browse, edit and create reusable YAML templates. Pick a template from the
    right to load it; double-click a section to edit just that subtree in place,
    or use <strong>Toggle Editor</strong> for the whole document. Edits to a
    loaded template <strong>auto-save on each Apply</strong>; use
    <strong>Save as…</strong> to create a new named copy. Drag a 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">
    <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-save-as" type="button">Save as…</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-template-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 (an
         embedded editor replaces just the edited subtree, surrounding lines
         stay visible). Whole-document editing replaces the view entirely. -->
    <div id="editor-region">
      <!-- VIEW state: read-only, foldable, syntax-highlighted full document. -->
      <div id="yaml-view" class="editor-slot">
        <textarea id="yaml-view-src"></textarea>
      </div>

      <!-- EDIT state: whole document only (replaces the view). Section edits
           happen IN PLACE inside the view above. -->
      <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: pick a template (click = load, drag = insert) across the 7
       categories (~1/3). This is the ONLY place templates are selected. -->
  <aside class="snippet-pane">
    <h2>Templates</h2>
    <input
      type="search"
      id="template-search"
      name="q"
      placeholder="Search templates…"
    />
    <p class="snippet-hint">
      <small>Click a name to load it · drag it onto a section to insert.</small>
    </p>
    <div id="snippet-groups">
      {% include "templates_groups.html" %}
    </div>
  </aside>
</div>

<!-- Add-as-Template modal -->
<dialog id="add-template-modal">
  <article>
    <header><h3 id="add-template-title">Save as new 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>
{% endblock %}

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