{{define "asset_template_graph"}}
{{template "asset_tabs" .}}
<div class="card graph-editor-card">
  <div class="section-title">
    <div>
      <div class="crumb">模板 / 可视化编辑</div>
      <h2 class="title-with-icon">{{icon "template"}}<span>模板可视化编辑</span></h2>
    </div>
    <div class="actions compact">
      {{if not .AssetTemplate.ReadOnly}}
      <form class="graph-save-form" method="post" action="/ui/assets/templates/{{.AssetTemplate.Name}}/graph">
        <input type="hidden" name="json" />
        <button type="submit" class="primary">{{icon "apply"}}<span>保存模板</span></button>
      </form>
      {{end}}
      {{if .AssetTemplate.ReadOnly}}
      <a class="btn secondary" href="/ui/assets/templates?clone={{.AssetTemplate.Name}}">{{icon "add"}}<span>复制后编辑</span></a>
      {{end}}
      <a class="btn ghost" href="/ui/assets/templates?name={{.AssetTemplate.Name}}">返回模板</a>
    </div>
  </div>

  {{if .AssetTemplate.ReadOnly}}
  <div class="form-hint">当前是标准模板预览页，画布内容可查看但不会直接保存。请先复制为用户模板再编辑。</div>
  {{end}}

  <div class="graph-editor" data-template-name="{{.AssetTemplate.Name}}">
    <aside class="graph-sidebar">
      <h3>节点库</h3>
      <div class="graph-node-palette-list" data-catalog-url="/ui/api/graph-node-types"></div>
    </aside>

            <section class="graph-canvas-wrap">
      <div class="graph-canvas-toolbar">
        <button type="button" class="btn ghost graph-auto-layout">自动布局</button>
      </div>
      <svg class="graph-canvas" role="img" aria-label="模板流程图"></svg>
    </section>

    <aside class="graph-inspector">
      <h3>属性面板</h3>
      <div class="graph-empty-inspector">选择节点或连线后编辑参数</div>
      <form class="graph-node-form" hidden>
        <div class="graph-inspector-title">节点参数</div>
        <label><span>节点 ID</span><input name="id" /></label>
        <label><span>类型</span><input name="type" readonly /></label>
        <label><span>角色</span><select name="role"><option>source</option><option>filter</option><option>sink</option></select></label>
        <label><span>启用</span><select name="enable"><option value="true">启用</option><option value="false">停用</option></select></label>
        <div class="graph-inspector-title">常用参数</div>
        <div class="graph-typed-param-fields"></div>
        <details class="graph-advanced-json" open>
          <summary>高级 JSON</summary>
          <label><span>未结构化参数</span><textarea class="graph-param-editor" name="params_json" rows="7"></textarea></label>
          <div class="graph-form-hint">复杂对象和暂未建模字段保留在这里，会随模板一起保存。</div>
        </details>
        <div class="graph-inspector-title">连接</div>
        <label><span>目标节点</span><select class="graph-connect-target" name="connect_target"></select></label>
        <button type="button" class="secondary graph-connect-node">连接到目标节点</button>
        <button type="button" class="danger graph-delete-node">删除节点</button>
      </form>
      <form class="graph-edge-form" hidden>
        <div class="graph-inspector-title">连线参数</div>
        <label><span>起点</span><select name="from"></select></label>
        <label><span>终点</span><select name="to"></select></label>
        <label><span>扩展参数 JSON</span><textarea class="graph-edge-param-editor" name="params_json" rows="7"></textarea></label>
        <div class="graph-form-hint">连线用于表达数据流向，扩展参数可记录 stream、topic、条件等。</div>
        <button type="button" class="danger graph-delete-edge">删除连线</button>
      </form>
    </aside>
  </div>

  <template id="graph-template-json">{{rawHTML .RawJSON}}</template>
  <script src="/ui/assets/graph_editor.js"></script>
</div>
{{template "asset_tabs_end" .}}
{{end}}