{{template "layout.html" .}}
{{template "formHeader" "template"}}
<style>
.tpl-editor-wrap{display:flex;gap:20px;align-items:flex-start}
.tpl-editor-main{flex:1;min-width:0}
.tpl-editor-sidebar{width:300px;flex-shrink:0;position:sticky;top:90px;border:1px solid var(--gray-200);border-radius:var(--radius);background:var(--gray-50);max-height:calc(100vh - 120px);overflow-y:auto}
.tpl-sidebar-hd{padding:10px 14px;font-size:13px;font-weight:600;color:var(--gray-500);border-bottom:1px solid var(--gray-200);background:var(--gray-100);border-radius:var(--radius) var(--radius) 0 0;position:sticky;top:0}
.tpl-var-group{padding:6px 0;border-bottom:1px solid var(--gray-100)}
.tpl-var-group:last-child{border-bottom:none}
.tpl-var-label{padding:2px 14px;font-size:11px;font-weight:600;color:var(--gray-400);text-transform:uppercase;letter-spacing:.5px}
.tpl-var-item{padding:4px 14px;cursor:pointer;transition:background .15s;display:flex;flex-direction:column;gap:2px}
.tpl-var-item:hover{background:var(--gray-100)}
.tpl-var-code{font-family:Consolas,'Courier New',monospace;font-size:12px;color:var(--primary);line-height:1.4;word-break:break-all}
.tpl-var-desc{font-size:11px;color:var(--gray-400);line-height:1.3}
.tpl-var-item code{font-family:Consolas,'Courier New',monospace}
</style>
<div class="card">
  <div class="card-hd">{{if .is_edit}}✎ 编辑模板{{else}}＋ 新建模板{{end}}</div>
  <div class="card-bd">
    <form id="templateForm" method="post" action="/admin/template/save">
      <div class="fg">
        <label>模板文件名 <span style="color:var(--red)">*</span></label>
        <input type="text" name="name" class="fctrl" value="{{.tpl.Name}}" placeholder="例如：header.html" required>
        <p style="margin:4px 0 0;font-size:12px;color:var(--gray-400)">存储在 <code>templates/frontend/</code> 目录下，以 <code>.html</code> 结尾</p>
      </div>
      <div class="tpl-editor-wrap">
        <div class="tpl-editor-main">
          <div class="fg">
            <label>模板内容</label>
            <textarea name="content" class="fctrl" rows="30" style="font-family:Consolas,'Courier New',monospace;font-size:13px;line-height:1.6;tab-size:2">{{.tpl.Content}}</textarea>
          </div>
          {{template "formButtons" "template"}}
        </div>
        <div class="tpl-editor-sidebar" id="tplVarSidebar">
          <div class="tpl-sidebar-hd">可用变量 &amp; 函数</div>
          {{range .variables}}
          <div class="tpl-var-item" onclick="insertVar(this)">
            <span class="tpl-var-code">{{.Name}}</span>
            <span class="tpl-var-desc">{{.Desc}}</span>
          </div>
          {{end}}
        </div>
      </div>
    </form>
  </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
  bindForm('templateForm', '/admin/template/save', '/admin/template');
});
function insertVar(el) {
  var code = el.querySelector('.tpl-var-code');
  if (!code) return;
  var txt = code.textContent.trim();
  var ta = document.querySelector('textarea[name="content"]');
  if (!ta) return;
  var start = ta.selectionStart, end = ta.selectionEnd;
  ta.value = ta.value.substring(0, start) + txt + ta.value.substring(end);
  ta.selectionStart = ta.selectionEnd = start + txt.length;
  ta.focus();
}
</script>
</body>
</html>