{{define "asset_templates"}}
{{template "asset_tabs" .}}
<div class="card">
  <div class="section-title">
    <div>
      <h2 class="title-with-icon">{{icon "template"}}<span>识别模板列表</span></h2>
      <div class="form-hint">标准模板应作为基线，复制后再做定制化修改。</div>
    </div>
    <div class="actions compact">
      {{if .AssetTemplate}}
        {{if .AssetTemplate.ReadOnly}}
        <form method="post" action="/ui/assets/templates/{{.AssetTemplate.Name}}/clone">
          <button type="submit" class="btn secondary">{{icon "add"}}<span>复制标准模板</span></button>
        </form>
        {{else}}
        <a class="btn secondary" href="/ui/assets/templates?name={{.AssetTemplate.Name}}&edit=1">{{icon "edit"}}<span>编辑</span></a>
        <form method="post" action="/ui/assets/templates/{{.AssetTemplate.Name}}/delete" onsubmit="return confirm('确认删除这个用户模板吗？');">
          <button type="submit" class="btn secondary">删除</button>
        </form>
        {{end}}
      {{end}}
    </div>
  </div>
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>模板</th>
          <th>描述</th>
          <th>流程结构</th>
          <th>来源</th>
        </tr>
      </thead>
      <tbody>
        {{range .AssetTemplates}}
        <tr data-nav-row data-nav-href="/ui/assets/templates?name={{.Name}}"{{if and $.AssetTemplate (eq $.AssetTemplate.Name .Name)}} class="selected"{{end}}>
          <td><a class="mono" href="/ui/assets/templates?name={{.Name}}">{{.Name}}</a></td>
          <td>{{if .Description}}{{.Description}}{{else}}-{{end}}</td>
          <td>{{.NodeCount}}节点 / {{.EdgeCount}}连线</td>
          <td>{{if .ReadOnly}}标准模板{{else}}用户模板{{end}}</td>
        </tr>
        {{else}}
        <tr><td colspan="4"><div class="empty-state compact"><div class="empty-title">还没有模板</div></div></td></tr>
        {{end}}
      </tbody>
    </table>
  </div>
</div>

{{if .AssetTemplate}}
<div class="card editor-state {{if .AssetTemplateEditing}}editing{{else}}readonly{{end}}">
  <div class="section-title">
    <div>
      <h2 class="title-with-icon">{{icon "template"}}<span>{{if .AssetTemplateEditing}}模板编辑{{else}}模板详情{{end}}{{if .AssetTemplate.Name}} · {{.AssetTemplate.Name}}{{end}}</span></h2>
      <div class="form-hint form-state-hint">
        {{if .AssetTemplateEditing}}
        <span class="pill run">编辑模式</span>
        <span>当前模板基础信息正在编辑，结构修改请进入可视化编辑。</span>
        {{else}}
        <span class="pill">查看模式</span>
        <span>当前模板为只读详情展示。</span>
        {{end}}
      </div>
    </div>
    <div class="actions compact">
      <a class="btn secondary" href="/ui/assets/templates/{{.AssetTemplate.Name}}/graph">{{icon "assets"}}<span>{{if .AssetTemplate.ReadOnly}}可视化预览{{else}}可视化编辑{{end}}</span></a>
      <button
        type="button"
        class="btn secondary js-export-json"
        data-export-url="/ui/assets/templates/{{.AssetTemplate.Name}}/export"
        data-default-filename="{{.AssetTemplate.Name}}.json"
      >{{icon "apply"}}<span>导出为 JSON</span></button>
    </div>
  </div>
  {{if .AssetTemplateEditing}}
  <form method="post" action="/ui/assets/templates/{{.AssetTemplate.Name}}/rename">
    <div class="field-grid">
      <label><span>模板名称<span class="required-mark">*</span></span><input name="name" value="{{.AssetTemplate.Name}}" class="mono" autofocus /></label>
      <label><span>模板类型</span><input value="{{if .AssetTemplate.ReadOnly}}标准模板（只读）{{else}}用户模板{{end}}" readonly /></label>
      <label class="full"><span>模板描述</span><input name="description" value="{{.AssetTemplate.Description}}" /></label>
    </div>
    <div class="detail-sheet">
      <div class="detail-item"><span>来源文件</span><strong class="mono">{{if .AssetTemplate.Source}}{{.AssetTemplate.Source}}{{else}}-{{end}}</strong></div>
      <div class="detail-item"><span>节点数</span><strong>{{.AssetTemplate.NodeCount}}</strong></div>
      <div class="detail-item"><span>连线数</span><strong>{{.AssetTemplate.EdgeCount}}</strong></div>
      <div class="detail-item"><span>输入槽位</span><strong>{{if .AssetTemplate.Slots.Inputs}}{{len .AssetTemplate.Slots.Inputs}}{{else}}0{{end}}</strong></div>
      <div class="detail-item"><span>服务槽位</span><strong>{{if .AssetTemplate.Slots.Services}}{{len .AssetTemplate.Slots.Services}}{{else}}0{{end}}</strong></div>
      <div class="detail-item"><span>输出槽位</span><strong>{{if .AssetTemplate.Slots.Outputs}}{{len .AssetTemplate.Slots.Outputs}}{{else}}0{{end}}</strong></div>
      <div class="detail-item full"><span>路径</span><strong class="mono">{{.AssetTemplate.Path}}</strong></div>
    </div>
    <div class="actions">
      <button type="submit" class="btn secondary">{{icon "apply"}}<span>保存</span></button>
      <a class="btn secondary" href="/ui/assets/templates?name={{.AssetTemplate.Name}}">{{icon "close"}}<span>取消</span></a>
    </div>
  </form>
  {{else}}
  <div class="info-list">
    <div>
      <span>模板名</span>
      <strong class="mono">{{.AssetTemplate.Name}}</strong>
    </div>
    <div><span>模板类型</span><strong>{{if .AssetTemplate.ReadOnly}}标准模板（只读）{{else}}用户模板{{end}}</strong></div>
    <div><span>来源文件</span><strong class="mono">{{if .AssetTemplate.Source}}{{.AssetTemplate.Source}}{{else}}-{{end}}</strong></div>
    <div><span>节点数</span><strong>{{.AssetTemplate.NodeCount}}</strong></div>
    <div><span>连线数</span><strong>{{.AssetTemplate.EdgeCount}}</strong></div>
    <div><span>输入槽位</span><strong>{{if .AssetTemplate.Slots.Inputs}}{{len .AssetTemplate.Slots.Inputs}}{{else}}0{{end}}</strong></div>
    <div><span>服务槽位</span><strong>{{if .AssetTemplate.Slots.Services}}{{len .AssetTemplate.Slots.Services}}{{else}}0{{end}}</strong></div>
    <div><span>输出槽位</span><strong>{{if .AssetTemplate.Slots.Outputs}}{{len .AssetTemplate.Slots.Outputs}}{{else}}0{{end}}</strong></div>
    <div class="full">
      <span>描述</span>
      <strong>{{if .AssetTemplate.Description}}{{.AssetTemplate.Description}}{{else}}-{{end}}</strong>
    </div>
    <div class="full"><span>路径</span><strong class="mono">{{.AssetTemplate.Path}}</strong></div>
  </div>
  {{end}}
</div>

{{if or .AssetTemplate.Slots.Inputs .AssetTemplate.Slots.Services .AssetTemplate.Slots.Outputs}}
<div class="card">
  <div class="section-title">
    <div>
      <h2 class="title-with-icon">{{icon "config"}}<span>模板槽位</span></h2>
    </div>
  </div>
  <div class="info-list">
    {{range .AssetTemplate.Slots.Inputs}}
    <div class="full"><span>输入</span><strong class="mono">{{.Name}}</strong> <span class="muted">{{.Type}}</span></div>
    {{end}}
    {{range .AssetTemplate.Slots.Services}}
    <div class="full"><span>服务</span><strong class="mono">{{.Name}}</strong> <span class="muted">{{.Type}}</span></div>
    {{end}}
    {{range .AssetTemplate.Slots.Outputs}}
    <div class="full"><span>输出</span><strong class="mono">{{.Name}}</strong> <span class="muted">{{.Type}}</span></div>
    {{end}}
  </div>
</div>
{{end}}

{{if .AssetTemplate.ReadOnly}}
<div class="card">
  <div class="form-hint">标准模板保留在模板目录中，作为只读基线使用。需要调整流程时，请先复制为用户模板，再进入可视化编辑保存。</div>
</div>
{{end}}

{{if .AssetTemplate.AdvancedParams}}
<details class="card collapsible">
  <summary class="title-with-icon">{{icon "tech"}}<span>高级设置</span></summary>
  <pre>{{json .AssetTemplate.AdvancedParams}}</pre>
</details>
{{end}}

<details class="card collapsible">
  <summary class="title-with-icon">{{icon "tech"}}<span>原始 JSON</span></summary>
  <pre>{{json .AssetTemplate.Raw}}</pre>
</details>
{{end}}
{{if .Error}}<div class="error">{{.Error}}</div>{{end}}
{{template "asset_tabs_end" .}}
{{end}}