{{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>
    <div class="actions compact">
      <a class="btn secondary" href="/ui/assets/overlays?new=1">{{icon "apply"}}<span>新增调试参数</span></a>
      {{if .AssetOverlay}}
      <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">
        <button class="btn secondary" type="submit">删除</button>
      </form>
      {{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 .OverrideTargets}}{{range $i, $item := .OverrideTargets}}{{if $i}}, {{end}}{{$item}}{{end}}{{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}}
<form method="post" action="/ui/assets/overlays">
<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}}
  <div class="field-grid">
    <label><span>调试参数名称<span class="required-mark">*</span></span><input name="name" value="{{.AssetOverlay.Name}}" autofocus /></label>
    <label><span>目标数量</span><input value="{{.AssetOverlay.OverrideTargetNum}}" readonly /></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{{if .AssetOverlay.Name}}?name={{.AssetOverlay.Name}}{{end}}">{{icon "close"}}<span>取消</span></a>
  </div>
  {{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>{{.AssetOverlay.OverrideTargetNum}}</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>{{if .AssetOverlay.OverrideTargets}}{{range $i, $item := .AssetOverlay.OverrideTargets}}{{if $i}}, {{end}}{{$item}}{{end}}{{else}}-{{end}}</strong></div>
    <div class="detail-item full"><span>路径</span><strong class="mono">{{.AssetOverlay.Path}}</strong></div>
  </div>
  {{end}}
</div>
{{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}}
</form>
{{end}}
{{if .Error}}<div class="error">{{.Error}}</div>{{end}}
{{template "asset_tabs_end" .}}
{{end}}