{% extends "base.html" %}
{% block title %}TapDB Template Editor{% endblock %}
{% block content %}
<section class="band">
  <h1>Template Pack</h1>
  <p>Validate JSON first, then save. Save is insert-only; existing templates remain read-only.</p>
  {% if saved %}
  <div class="notice ok">Saved {{ saved.inserted }} template(s); skipped {{ saved.skipped }}.</div>
  {% endif %}
  {% if issues %}
  <div class="notice bad">
    {% for issue in issues %}
    <div>{{ issue.level }}: {{ issue.template_code or "" }} {{ issue.message }}</div>
    {% endfor %}
  </div>
  {% endif %}
</section>

<section class="band">
  <h2>Builder</h2>
  <div class="builder-grid" data-testid="template-builder">
    <label>Name <input id="builder-name" value="Example Actor"></label>
    <label>Category <input id="builder-category" value="ACT"></label>
    <label>Type <input id="builder-type" value="actor"></label>
    <label>Subtype <input id="builder-subtype" value="example_actor"></label>
    <label>Version <input id="builder-version" value="1.0"></label>
    <label>Instance Prefix <input id="builder-prefix" value="ACT"></label>
  </div>
  <div class="builder-panel">
    <h3>Properties</h3>
    <div id="builder-properties" class="stack compact">
      <div class="builder-row">
        <input data-builder-property-key value="display_name">
        <input data-builder-property-value value="">
      </div>
    </div>
    <button type="button" class="secondary" id="builder-add-property">Add Property</button>
  </div>
  <div class="builder-panel">
    <h3>Child Instantiation</h3>
    <div id="builder-children" class="stack compact">
      <div class="builder-row">
        <input data-builder-child-code value="WEL/container/example_well/1.0">
        <input data-builder-child-count type="number" min="1" value="2">
        <input data-builder-child-relation value="contains">
      </div>
    </div>
    <button type="button" class="secondary" id="builder-add-child">Add Child Rule</button>
  </div>
  <div class="toolbar">
    <button type="button" id="builder-generate-json">Build JSON</button>
  </div>
</section>

<section class="band">
  <form method="post" class="editor">
    <textarea id="template-json" name="template_json" spellcheck="false" data-tapdb-json-editor data-json-editor-label="Template pack JSON">{{ raw_json }}</textarea>
    <div class="toolbar">
      <button formaction="{{ tapdb_gui_url(request, '/templates/validate') }}" type="submit">Validate</button>
      <button formaction="{{ tapdb_gui_url(request, '/templates/save') }}" type="submit">Save</button>
      <a class="button secondary" href="{{ tapdb_gui_url(request, '/templates') }}">Cancel</a>
    </div>
  </form>
</section>
<script>
(() => {
  const byId = (id) => document.getElementById(id);
  const addRow = (targetId, html) => {
    const row = document.createElement("div");
    row.className = "builder-row";
    row.innerHTML = html;
    byId(targetId).appendChild(row);
  };
  byId("builder-add-property").addEventListener("click", () => {
    addRow("builder-properties", '<input data-builder-property-key><input data-builder-property-value>');
  });
  byId("builder-add-child").addEventListener("click", () => {
    addRow(
      "builder-children",
      '<input data-builder-child-code placeholder="WEL/container/example_well/1.0"><input data-builder-child-count type="number" min="1" value="1"><input data-builder-child-relation value="contains">'
    );
  });
  byId("builder-generate-json").addEventListener("click", () => {
    const properties = {};
    document.querySelectorAll("#builder-properties .builder-row").forEach((row) => {
      const key = row.querySelector("[data-builder-property-key]").value.trim();
      const value = row.querySelector("[data-builder-property-value]").value;
      if (key) properties[key] = value;
    });
    const layouts = [];
    document.querySelectorAll("#builder-children .builder-row").forEach((row) => {
      const templateCode = row.querySelector("[data-builder-child-code]").value.trim();
      const count = Number.parseInt(row.querySelector("[data-builder-child-count]").value, 10);
      const relationshipType = row.querySelector("[data-builder-child-relation]").value.trim() || "contains";
      if (templateCode) {
        layouts.push({
          relationship_type: relationshipType,
          name_pattern: "{parent_name}_{index}",
          child_templates: [{ template_code: templateCode, count: Number.isFinite(count) && count > 0 ? count : 1 }],
        });
      }
    });
    const prefix = byId("builder-prefix").value.trim();
    const payload = {
      templates: [{
        name: byId("builder-name").value.trim(),
        polymorphic_discriminator: "generic_template",
        category: byId("builder-category").value.trim(),
        type: byId("builder-type").value.trim(),
        subtype: byId("builder-subtype").value.trim(),
        version: byId("builder-version").value.trim() || "1.0",
        instance_prefix: prefix,
        instance_polymorphic_identity: "generic_instance",
        json_addl: { properties, instantiation_layouts: layouts },
      }],
    };
    byId("template-json").value = JSON.stringify(payload, null, 2);
  });
})();
</script>
{% endblock %}