{{define "admin_forms_form"}}
<div class="thm-forms">
  <div class="panel">
    <h2>{{if eq .Data.Mode "create"}}新建表单{{else}}编辑表单「{{.Data.Form.Title}}」{{end}}</h2>
    {{if .Data.Error}}<div class="alert">{{.Data.Error}}</div>{{end}}
    <form method="post" action="{{if eq .Data.Mode "create"}}/admin/forms/create{{else}}/admin/forms/{{.Data.Form.ID}}/update{{end}}">
      <input type="hidden" name="csrf" value="{{.CSRF}}">
      <div class="form-row">
        <label>表单名称</label>
        <input type="text" name="title" required value="{{.Data.Form.Title}}" placeholder="一句话说清收什么，如「秋季读书会报名表」">
      </div>
      <div class="form-row">
        <label>说明（可选）</label>
        <textarea name="description" rows="2" placeholder="写清用途、截止时间或注意事项">{{.Data.Form.Description}}</textarea>
      </div>

      <div class="form-row">
        <label>字段（数量不限，拖动左侧手柄即可调整顺序）</label>
        <div class="forms-edit" id="formsFields">
          <div class="forms-edit-bar">
            <span class="forms-edit-bar-title">按住左侧手柄拖动排序，答的人就照这个顺序填</span>
            <button type="button" class="btn btn-ghost btn-sm" id="formsFieldAdd">{{ico "plus"}} 添加字段</button>
          </div>

          {{range .Data.Rows}}
          {{$row := .}}
          <div class="forms-edit-item" data-tok="{{.Tok}}">
            <input type="hidden" name="tok" value="{{.Tok}}">
            <input type="hidden" name="key_{{.Tok}}" value="{{.Key}}">
            <div class="forms-edit-top">
              <button type="button" class="forms-edit-grip" aria-label="拖动排序，或按上下方向键移动" title="拖动排序">{{ico "grip"}}</button>
              <span class="forms-edit-no">{{.Index}}</span>
              <input type="text" class="forms-edit-name" name="lbl_{{.Tok}}" value="{{.Label}}" maxlength="40" placeholder="字段名称，如：姓名 / 手机号 / 想吃什么">
              <select class="forms-edit-type" name="typ_{{.Tok}}">
                {{range $.Data.FieldTypes}}
                <option value="{{.}}"{{if eq . $row.Type}} selected{{end}}>{{index $.Data.TypeLabels .}}</option>
                {{end}}
              </select>
              <label class="forms-edit-req"><input type="checkbox" name="req_{{.Tok}}" value="1"{{if .Required}} checked{{end}}> 必填</label>
              <span class="forms-edit-tools">
                <button type="button" class="forms-edit-ico forms-edit-del" title="删除该字段">{{ico "trash"}}</button>
              </span>
            </div>
            <div class="forms-edit-attrs">
              <input type="text" class="forms-edit-ph{{if not .HasPh}} is-hidden{{end}}" name="ph_{{.Tok}}" value="{{.Placeholder}}" maxlength="60" placeholder="占位提示（可选）">
              <input type="text" class="forms-edit-help" name="help_{{.Tok}}" value="{{.Help}}" maxlength="80" placeholder="填写说明（可选，显示在字段下方）">
              <input type="text" class="forms-edit-def{{if not .HasPh}} is-hidden{{end}}" name="def_{{.Tok}}" value="{{.Default}}" maxlength="80" placeholder="默认值（可选）">
              <label class="forms-edit-scale{{if not .IsRating}} is-hidden{{end}}">评分档数
                <select name="scale_{{.Tok}}">
                  {{$sc := $row.Scale}}{{range $.Data.ScaleChoices}}<option value="{{.}}"{{if eq . $sc}} selected{{end}}>{{.}} 档</option>{{end}}
                </select>
              </label>
            </div>
            <div class="forms-edit-opts{{if not .IsChoice}} is-hidden{{end}}">
              <span class="forms-edit-opts-title">选项</span>
              {{range .Options}}
              <span class="forms-edit-opt">
                <input type="text" name="opt_{{$row.Tok}}" value="{{.}}" maxlength="40" placeholder="选项名称">
                <button type="button" class="forms-edit-opt-del" title="删除选项">{{ico "minus"}}</button>
              </span>
              {{end}}
              <button type="button" class="btn btn-ghost btn-sm forms-edit-opt-add">{{ico "plus"}} 添加选项</button>
            </div>
          </div>
          {{end}}
        </div>
        <p class="forms-edit-hint">类型选「单选 / 多选 / 下拉选择」时逐个填好选项；「评分」可选 3 / 5 / 10 档；「说明文字」只展示一段提示，不收回答。</p>
      </div>

      <div class="form-row">
        <label><input type="checkbox" name="open" value="1"{{if eq .Data.Form.Open 1}} checked{{end}}> 开放收集（关闭后前台停收，已有回答保留）</label>
      </div>

      <div style="display:flex;gap:10px;align-items:center;">
        <button class="btn btn-primary" type="submit">{{if eq .Data.Mode "create"}}创建表单{{else}}保存修改{{end}}</button>
        <a class="btn btn-ghost" href="/admin/forms">返回表单列表</a>
      </div>
    </form>
  </div>

  <template id="formsFieldTpl">
    <div class="forms-edit-item" data-tok="__TOK__">
      <input type="hidden" name="tok" value="__TOK__">
      <input type="hidden" name="key___TOK__" value="">
      <div class="forms-edit-top">
        <button type="button" class="forms-edit-grip" aria-label="拖动排序，或按上下方向键移动" title="拖动排序">{{ico "grip"}}</button>
        <span class="forms-edit-no"></span>
        <input type="text" class="forms-edit-name" name="lbl___TOK__" value="" maxlength="40" placeholder="字段名称，如：姓名 / 手机号 / 想吃什么">
        <select class="forms-edit-type" name="typ___TOK__">
          {{range .Data.FieldTypes}}
          <option value="{{.}}">{{index $.Data.TypeLabels .}}</option>
          {{end}}
        </select>
        <label class="forms-edit-req"><input type="checkbox" name="req___TOK__" value="1"> 必填</label>
        <span class="forms-edit-tools">
          <button type="button" class="forms-edit-ico forms-edit-del" title="删除该字段">{{ico "trash"}}</button>
        </span>
      </div>
      <div class="forms-edit-attrs">
        <input type="text" class="forms-edit-ph is-hidden" name="ph___TOK__" value="" maxlength="60" placeholder="占位提示（可选）">
        <input type="text" class="forms-edit-help" name="help___TOK__" value="" maxlength="80" placeholder="填写说明（可选，显示在字段下方）">
        <input type="text" class="forms-edit-def is-hidden" name="def___TOK__" value="" maxlength="80" placeholder="默认值（可选）">
        <label class="forms-edit-scale is-hidden">评分档数
          <select name="scale___TOK__">
            {{range .Data.ScaleChoices}}<option value="{{.}}"{{if eq . 5}} selected{{end}}>{{.}} 档</option>{{end}}
          </select>
        </label>
      </div>
      <div class="forms-edit-opts is-hidden">
        <span class="forms-edit-opts-title">选项</span>
        <button type="button" class="btn btn-ghost btn-sm forms-edit-opt-add">{{ico "plus"}} 添加选项</button>
      </div>
    </div>
  </template>

  <template id="formsOptTpl">
    <span class="forms-edit-opt">
      <input type="text" name="opt___TOK__" value="" maxlength="40" placeholder="选项名称">
      <button type="button" class="forms-edit-opt-del" title="删除选项">{{ico "minus"}}</button>
    </span>
  </template>

  <script>
  (function () {
    var box = document.getElementById("formsFields");
    var fieldTpl = document.getElementById("formsFieldTpl");
    var optTpl = document.getElementById("formsOptTpl");
    var addBtn = document.getElementById("formsFieldAdd");
    if (!box || !fieldTpl || !optTpl || !addBtn) return;

    var seq = 0;
    function newTok() { seq++; return "x" + Date.now().toString(36) + seq; }
    function stamp(el, tok) {
      var nodes = el.querySelectorAll ? el.querySelectorAll("[name]") : [];
      for (var i = 0; i < nodes.length; i++) {
        nodes[i].name = nodes[i].name.split("__TOK__").join(tok);
      }
    }
    function show(el, on) { if (el) el.classList.toggle("is-hidden", !on); }
    function isChoice(t) { return t === "radio" || t === "checkbox" || t === "select"; }
    function hasPh(t) { return t === "text" || t === "textarea" || t === "number" || t === "email" || t === "tel" || t === "url"; }

    function renumber() {
      var items = box.querySelectorAll(".forms-edit-item");
      for (var i = 0; i < items.length; i++) {
        var no = items[i].querySelector(".forms-edit-no");
        if (no) no.textContent = i + 1;
      }
    }
    function addOption(row) {
      var wrap = row.querySelector(".forms-edit-opts");
      if (!wrap) return;
      var frag = optTpl.content.cloneNode(true);
      stamp(frag, row.getAttribute("data-tok"));
      wrap.insertBefore(frag, wrap.querySelector(".forms-edit-opt-add"));
    }
    function sync(row) {
      var sel = row.querySelector(".forms-edit-type");
      var t = sel ? sel.value : "text";
      var opts = row.querySelector(".forms-edit-opts");
      show(opts, isChoice(t));
      if (isChoice(t) && opts && opts.querySelectorAll(".forms-edit-opt").length === 0) addOption(row);
      show(row.querySelector(".forms-edit-scale"), t === "rating");
      show(row.querySelector(".forms-edit-ph"), hasPh(t));
      show(row.querySelector(".forms-edit-def"), hasPh(t));
      var reqWrap = row.querySelector(".forms-edit-req");
      if (t === "section") {
        var cb = reqWrap ? reqWrap.querySelector("input") : null;
        if (cb) cb.checked = false;
        show(reqWrap, false);
      } else {
        show(reqWrap, true);
      }
    }

    addBtn.addEventListener("click", function () {
      var tok = newTok();
      var frag = fieldTpl.content.cloneNode(true);
      var row = frag.querySelector(".forms-edit-item");
      row.setAttribute("data-tok", tok);
      stamp(row, tok);
      var tokInput = row.querySelector('input[name="tok"]');
      if (tokInput) tokInput.value = tok;
      box.appendChild(frag);
      var added = box.lastElementChild;
      renumber();
      sync(added);
      var name = added.querySelector(".forms-edit-name");
      if (name) name.focus();
    });

    box.addEventListener("click", function (e) {
      var row = e.target.closest(".forms-edit-item");
      if (!row) return;
      if (e.target.closest(".forms-edit-del")) { row.parentNode.removeChild(row); renumber(); return; }
      if (e.target.closest(".forms-edit-opt-add")) { addOption(row); return; }
      if (e.target.closest(".forms-edit-opt-del")) {
        var opt = e.target.closest(".forms-edit-opt");
        if (opt) opt.parentNode.removeChild(opt);
        return;
      }
    });

    /* 拖拽排序：统一用指针事件，鼠标 / 触摸 / 触控笔一套逻辑 */
    var dragRow = null, dragGrip = null;
    function rowAfter(y) {
      var els = box.querySelectorAll(".forms-edit-item:not(.is-dragging)");
      var best = null, bestOff = -Infinity;
      for (var i = 0; i < els.length; i++) {
        var b = els[i].getBoundingClientRect();
        var off = y - b.top - b.height / 2;
        if (off < 0 && off > bestOff) { bestOff = off; best = els[i]; }
      }
      return best;
    }
    box.addEventListener("pointerdown", function (e) {
      var grip = e.target.closest(".forms-edit-grip");
      if (!grip) return;
      dragRow = grip.closest(".forms-edit-item");
      if (!dragRow) return;
      dragGrip = grip;
      if (grip.setPointerCapture) { try { grip.setPointerCapture(e.pointerId); } catch (err) {} }
      dragRow.classList.add("is-dragging");
    });
    box.addEventListener("pointermove", function (e) {
      if (!dragRow) return;
      e.preventDefault();
      var after = rowAfter(e.clientY);
      if (after == null) {
        if (box.lastElementChild !== dragRow) box.appendChild(dragRow);
      } else if (after.previousElementSibling !== dragRow) {
        box.insertBefore(dragRow, after);
      }
    });
    function endDrag(e) {
      if (!dragRow) return;
      dragRow.classList.remove("is-dragging");
      if (dragGrip && dragGrip.releasePointerCapture) {
        try { dragGrip.releasePointerCapture(e.pointerId); } catch (err) {}
      }
      dragRow = null; dragGrip = null;
      renumber();
    }
    box.addEventListener("pointerup", endDrag);
    box.addEventListener("pointercancel", endDrag);

    /* 键盘兜底：手柄聚焦时，用上下方向键移动 */
    box.addEventListener("keydown", function (e) {
      var grip = e.target.closest(".forms-edit-grip");
      if (!grip) return;
      var row = grip.closest(".forms-edit-item");
      if (!row) return;
      if (e.key === "ArrowUp") {
        var prev = row.previousElementSibling;
        if (prev && prev.classList.contains("forms-edit-item")) { box.insertBefore(row, prev); renumber(); e.preventDefault(); }
      } else if (e.key === "ArrowDown") {
        var next = row.nextElementSibling;
        if (next && next.classList.contains("forms-edit-item")) { box.insertBefore(next, row); renumber(); e.preventDefault(); }
      }
    });

    box.addEventListener("change", function (e) {
      if (e.target.classList.contains("forms-edit-type")) {
        var row = e.target.closest(".forms-edit-item");
        if (row) sync(row);
      }
    });

    var items = box.querySelectorAll(".forms-edit-item");
    for (var i = 0; i < items.length; i++) sync(items[i]);
  })();
  </script>
</div>
{{end}}