{{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>
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>叠加项</th>
          <th>描述</th>
          <th>目标</th>
        </tr>
      </thead>
      <tbody>
        {{range .AssetOverlays}}
        <tr>
          <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}}
<div class="card">
  <div class="section-title">
    <div>
      <h2 class="title-with-icon">{{icon "overlay"}}<span>叠加项详情</span></h2>
    </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>
  <div class="info-list">
    <div><span>叠加项</span><strong class="mono">{{.AssetOverlay.Name}}</strong></div>
    <div><span>目标数量</span><strong>{{.AssetOverlay.OverrideTargetNum}}</strong></div>
    <div class="full"><span>描述</span><strong>{{if .AssetOverlay.Description}}{{.AssetOverlay.Description}}{{else}}-{{end}}</strong></div>
    <div class="full"><span>作用目标</span><strong>{{if .AssetOverlay.OverrideTargets}}{{range $i, $item := .AssetOverlay.OverrideTargets}}{{if $i}}, {{end}}{{$item}}{{end}}{{else}}-{{end}}</strong></div>
    <div class="full"><span>路径</span><strong class="mono">{{.AssetOverlay.Path}}</strong></div>
  </div>
</div>

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