{{define "asset_overlays"}}
{{template "asset_tabs" .}}
<div class="card">
  <div class="section-title">
    <div>
      <h2 class="title-with-icon">{{icon "overlay"}}<span>调试参数列表</span></h2>
      <div class="form-hint">标准调试参数应作为基线，复制后再做定制化修改。</div>
    </div>
    <div class="actions compact">
      {{if .AssetOverlay}}
        {{if .AssetOverlay.ReadOnly}}
        <form method="post" action="/ui/assets/overlays/{{.AssetOverlay.Name}}/clone">
          <button type="submit" class="btn secondary">{{icon "add"}}<span>复制标准调试参数</span></button>
        </form>
        {{else}}
        <a class="btn secondary" href="/ui/assets/overlays?name={{.AssetOverlay.Name}}&edit=1">{{icon "edit"}}<span>编辑</span></a>
        <form method="post" action="/ui/assets/overlays/{{.AssetOverlay.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>
        </tr>
      </thead>
      <tbody>
        {{range .AssetOverlays}}
        <tr data-nav-row data-nav-href="/ui/assets/overlays?name={{.Name}}"{{if and $.AssetOverlay (eq $.AssetOverlay.Name .Name)}} class="selected"{{end}}>
          <td><a class="mono" href="/ui/assets/overlays?name={{.Name}}">{{.Name}}</a></td>
          <td>{{if .Description}}{{.Description}}{{else}}-{{end}}</td>
          <td>{{if .ReadOnly}}标准参数{{else}}用户参数{{end}}</td>
        </tr>
        {{else}}
        <tr><td colspan="3"><div class="empty-state compact"><div class="empty-title">还没有调试参数</div></div></td></tr>
        {{end}}
      </tbody>
    </table>
  </div>
</div>

{{if .AssetOverlay}}
<div class="card editor-state {{if .AssetOverlayEditing}}editing{{else}}readonly{{end}}">
  <div class="section-title">
    <div>
      <h2 class="title-with-icon">{{icon "overlay"}}<span>{{if .AssetOverlayEditing}}调试参数编辑{{else}}调试参数详情{{end}}{{if .AssetOverlay.Name}} · {{.AssetOverlay.Name}}{{end}}</span></h2>
      <div class="form-hint form-state-hint">
        {{if .AssetOverlayEditing}}
        <span class="pill run">编辑模式</span>
        <span>当前调试参数正在编辑，保存后生效。</span>
        {{else}}
        <span class="pill">查看模式</span>
        <span>当前调试参数为只读展示。</span>
        {{end}}
      </div>
    </div>
    <div class="actions compact">
      <button
        type="button"
        class="btn secondary js-export-json"
        data-export-url="/ui/assets/overlays/{{.AssetOverlay.Name}}/export"
        data-default-filename="{{.AssetOverlay.Name}}.json"
      >{{icon "apply"}}<span>导出为 JSON</span></button>
    </div>
  </div>
  {{if .AssetOverlayEditing}}
  <form method="post" action="/ui/assets/overlays">
    <div class="field-grid">
      <label><span>调试参数名称<span class="required-mark">*</span></span><input name="name" value="{{.AssetOverlay.Name}}" autofocus /></label>
      <label class="full"><span>描述</span><input name="description" value="{{.AssetOverlay.Description}}" /></label>
      <label class="full"><span>调试参数 JSON<span class="required-mark">*</span></span><textarea class="code-input" name="json">{{.OverlayDraftJSON}}</textarea></label>
    </div>
    <div class="actions">
      <button type="submit" class="btn secondary">{{icon "apply"}}<span>保存</span></button>
      <a class="btn secondary" href="/ui/assets/overlays">{{icon "close"}}<span>取消</span></a>
    </div>
  </form>
  {{else}}
  <div class="detail-sheet">
    <div class="detail-item"><span>调试参数</span><strong class="mono">{{.AssetOverlay.Name}}</strong></div>
    <div class="detail-item"><span>参数类型</span><strong>{{if .AssetOverlay.ReadOnly}}标准参数（只读）{{else}}用户参数{{end}}</strong></div>
    <div class="detail-item full"><span>描述</span><strong>{{if .AssetOverlay.Description}}{{.AssetOverlay.Description}}{{else}}-{{end}}</strong></div>
    <div class="detail-item full"><span>路径</span><strong class="mono">{{.AssetOverlay.Path}}</strong></div>
  </div>
  {{end}}
</div>

{{if and (not .AssetOverlayEditing) .AssetOverlay.ReadOnly}}
<div class="card">
  <div class="form-hint">标准调试参数保留在模板目录中，作为只读基线使用。需要调整参数时，请先复制为用户参数，再进行编辑保存。</div>
</div>
{{end}}

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