{% extends "base.html" %}
{% block title %}{{ 'New template' if is_new else 'Edit template' }} — Waikiki{% endblock %}
{% block content %}
  <div class="article-head">
    <h1>{{ 'New template' if is_new else 'Edit template' }}</h1>
    <a class="btn" href="/templates">← All templates</a>
  </div>

  {# Describe it instead of writing it. The draft lands in the form below rather
     than being saved: an element ships arbitrary HTML and JS into every page
     that uses it, so a human reads it here and saves deliberately. #}
  <section class="draftbox">
    <label for="draft-desc"><strong>Describe it and let an agent draft it</strong></label>
    <textarea id="draft-desc" rows="2"
      placeholder="A character sheet: name, role, home, and sections for history and abilities"></textarea>
    <div class="draftbox-actions">
      <span class="draft-mic-slot"></span>
      <button type="button" class="btn" id="draft-go">Draft it</button>
      <span class="draft-status muted"></span>
    </div>
    <p class="muted note">It fills the form below — nothing is saved until you
      press Save, so read it first.</p>
  </section>

  <form method="post" action="/templates/save" class="settings">
    <input type="hidden" name="tid" value="{{ tpl.id }}">
    <label>Name
      <input type="text" name="name" value="{{ tpl.name }}"
             placeholder="e.g. Character sheet" required autofocus>
    </label>
    <label>Content <span class="muted">(Markdown &amp; HTML)</span>
      <textarea name="markdown" rows="18"
                style="width:100%;font-family:var(--mono)"
                placeholder="# {{ '{{title}}' }}&#10;&#10;…">{{ tpl.markdown }}</textarea>
    </label>
    <label>Metadata schema <span class="muted">(optional)</span>
      <textarea name="meta_schema" rows="6"
                style="width:100%;font-family:var(--mono)"
                placeholder="hp: str&#10;blade*: int&#10;role: player | npc&#10;born: date">{{ tpl.meta_schema }}</textarea>
    </label>
    <p class="muted note">
      One property per line — <code>name: type</code>, with <code>*</code> after
      the name for required (the same marker custom elements use). Types:
      <code>str</code>, <code>int</code>, <code>float</code>, <code>bool</code>,
      <code>date</code>, <code>list[str]</code>, or a choice like
      <code>player | npc</code>. Pages made from this template are stamped with
      <code>template: {{ tpl.name or 'Name' }}</code> and checked against it on
      their Metadata tab. Checking <strong>never blocks a save</strong> and never
      rewrites a value — a mismatch is reported, not corrected, and pages made
      before you wrote this schema are untouched.
    </p>
    <p class="muted note">
      Templates accept <strong>arbitrary HTML</strong> alongside Markdown — paste
      custom layouts, <code>&lt;details&gt;</code>, tables, iframes, etc. — and it
      renders. (Raw HTML is on by default because all content is local; you can
      turn it off per wiki in <a href="/settings">Settings → Content</a>.) Put
      <code>{{ '{{title}}' }}</code> where the new page's title should go.
    </p>
    <div class="editor-actions">
      <button class="btn primary" type="submit">{{ 'Create template' if is_new else 'Save template' }}</button>
      <a class="btn" href="/templates">Cancel</a>
    </div>
  </form>
<script>
  (function () {
    var go = document.getElementById('draft-go');
    var desc = document.getElementById('draft-desc');
    var status = document.querySelector('.draft-status');
    if (!go || !desc) return;
    if (window.wkDictate && window.wkDictate.supported) {
      var mic = window.wkDictate.button('Describe it out loud');
      document.querySelector('.draft-mic-slot').appendChild(mic);
      window.wkDictate.attach(desc, mic);
    }
    function setField(sel, value) {
      var el = document.querySelector(sel);
      if (!el || value == null || value === '') return;
      el.value = value;
      // The element editor swaps textareas for CodeMirror; write through it or
      // the change is invisible and lost on save.
      var wrap = el.nextElementSibling;
      if (wrap && wrap.classList && wrap.classList.contains('CodeMirror') && wrap.CodeMirror) {
        wrap.CodeMirror.setValue(value);
      }
    }
    go.addEventListener('click', function () {
      var text = desc.value.trim();
      if (!text) { desc.focus(); return; }
      go.disabled = true;
      status.className = 'draft-status muted';
      status.textContent = 'Drafting\u2026 this can take a minute.';
      fetch('/api/draft', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ kind: 'template', description: text })
      }).then(function (r) { return r.json(); }).then(function (res) {
        go.disabled = false;
        if (!res.ok) {
          // Keep the description so it can be adjusted and retried.
          status.className = 'draft-status err';
          status.textContent = (res.error || 'Drafting failed') + ' Adjust and try again.';
          return;
        }
        setField('input[name=name]', res.name);
        setField('textarea[name=markdown]', res.markdown);
        status.className = 'draft-status ok';
        status.textContent = 'Filled in below — read it, then Save.';
      }).catch(function (err) {
        go.disabled = false;
        status.className = 'draft-status err';
        status.textContent = 'Drafting failed: ' + err + '. Adjust and try again.';
      });
    });
  })();
</script>

{% endblock %}