{{define "device_batch_config"}}
<section class="hero-band">
  <div>
    <div class="eyebrow">批量配置</div>
    <h2>用模板化配置驱动一批设备</h2>
    <div class="muted">先确认目标设备，再选择模板、Profile 和 Overlay，生成后直接进入批量下发任务。</div>
  </div>
</section>

<div class="card">
  <div class="section-title">
    <div>
      <h2 class="title-with-icon">{{icon "devices"}}<span>已选设备</span></h2>
      <div class="muted small">已选 {{len .SelectedDeviceIDs}} 台设备，将按当前选择顺序创建任务。</div>
    </div>
    <div class="actions compact">
      <a class="btn ghost" href="/ui/devices?{{.SelectedQuery}}#batch-config">返回设备列表</a>
      <a class="btn ghost" href="/ui/devices">重新选择</a>
    </div>
  </div>
  <div class="info-list">
    {{range .SelectedDevices}}
    <div>
      <span>{{if .DeviceName}}{{.DeviceName}}{{else}}{{.DeviceID}}{{end}}</span>
      <strong class="mono">{{.DeviceID}}</strong>
    </div>
    {{else}}
    <div class="full">
      <span>目标设备</span>
      <strong>还没有选中设备</strong>
    </div>
    {{end}}
  </div>
</div>

<div class="card">
  <div class="section-title">
    <div>
      <h2 class="title-with-icon">{{icon "config"}}<span>批量配置</span></h2>
      <div class="muted small">保持模板化配置路线，不在这里直接维护完整 JSON。</div>
    </div>
    {{if .ConfigSources.Root}}<div class="muted small mono">{{.ConfigSources.Root}}</div>{{end}}
  </div>

  <form method="post" action="/ui/devices/batch-config">
    {{range .SelectedDeviceIDs}}<input type="hidden" name="device_id" value="{{.}}" />{{end}}
    <div class="field-grid">
      <label><span>模板</span>
        <select name="template">
          {{range .ConfigSources.Templates}}
          <option value="{{.Name}}" {{if eq .Name $.SelectedTemplate}}selected{{end}}>{{.Name}}</option>
          {{end}}
        </select>
      </label>
      <label><span>Profile</span>
        <select name="profile">
          {{range .ConfigSources.Profiles}}
          <option value="{{.Name}}" {{if eq .Name $.SelectedProfile}}selected{{end}}>{{.Name}}</option>
          {{end}}
        </select>
      </label>
      <label><span>config_id</span><input name="config_id" value="{{.SelectedConfigID}}" placeholder="留空自动生成" /></label>
      <label><span>config_version</span><input name="config_version" value="{{.SelectedVersion}}" placeholder="留空自动生成" /></label>
      <div class="full">
        <span class="muted small">Overlay</span>
        <div class="actions" style="margin-top:6px">
          {{range .ConfigSources.Overlays}}
          <label class="btn ghost">
            <input type="checkbox" name="overlay" value="{{.Name}}" {{if hasString $.SelectedOverlays .Name}}checked{{end}} />
            {{.Name}}
          </label>
          {{end}}
        </div>
      </div>
    </div>

    <div class="actions">
      <button type="submit">创建批量下发任务</button>
    </div>
  </form>
</div>

<div class="card">
  <div class="section-title">
    <div>
      <h2 class="title-with-icon">{{icon "preview"}}<span>预览摘要</span></h2>
      <div class="muted small">{{if .ConfigPreview}}默认只展示配置生成关键信息。完整 JSON 在下方折叠区。{{else}}先选择模板化参数并提交，页面会在这里展示配置生成关键信息。{{end}}</div>
    </div>
  </div>
  <div class="info-list">
    <div><span>模板</span><strong>{{if .ConfigPreview}}{{index .ConfigPreview.Metadata "template"}}{{else}}{{.SelectedTemplate}}{{end}}</strong></div>
    <div><span>Profile</span><strong>{{if .ConfigPreview}}{{index .ConfigPreview.Metadata "profile"}}{{else}}{{.SelectedProfile}}{{end}}</strong></div>
    <div><span>Overlay</span><strong class="mono">{{if .ConfigPreview}}{{if index .ConfigPreview.Metadata "overlays"}}{{range $i, $name := index .ConfigPreview.Metadata "overlays"}}{{if $i}}, {{end}}{{$name}}{{end}}{{else}}-{{end}}{{else}}{{if .SelectedOverlays}}{{range $i, $name := .SelectedOverlays}}{{if $i}}, {{end}}{{$name}}{{end}}{{else}}-{{end}}{{end}}</strong></div>
    <div><span>目标设备</span><strong>{{len .SelectedDeviceIDs}} 台</strong></div>
    <div><span>config_id</span><strong class="mono">{{if .ConfigPreview}}{{index .ConfigPreview.Metadata "config_id"}}{{else}}{{if .SelectedConfigID}}{{.SelectedConfigID}}{{else}}自动生成{{end}}{{end}}</strong></div>
    <div><span>config_version</span><strong class="mono">{{if .ConfigPreview}}{{index .ConfigPreview.Metadata "config_version"}}{{else}}{{if .SelectedVersion}}{{.SelectedVersion}}{{else}}自动生成{{end}}{{end}}</strong></div>
    {{if .ConfigPreview}}
    <div><span>大小</span><strong class="mono">{{.ConfigPreview.Size}} bytes</strong></div>
    <div class="full"><span>SHA256</span><strong class="mono">{{.ConfigPreview.Sha256}}</strong></div>
    {{end}}
  </div>
</div>

{{if .ConfigPreview}}
<details class="card collapsible">
  <summary class="title-with-icon">{{icon "tech"}}<span>完整 JSON</span></summary>
  <pre>{{.ConfigPreview.JSON}}</pre>
</details>
{{end}}
{{end}}