{{define "config_preview"}}
{{template "device_nav" .}}

<div class="card">
  <div class="section-title">
    <div>
      <h2 class="title-with-icon">{{icon "preview"}}<span>配置预览</span></h2>
    </div>
    {{if .ConfigSources.Root}}<div class="muted small mono">{{.ConfigSources.Root}}</div>{{end}}
  </div>

  <form method="post" action="/ui/devices/{{.Device.DeviceID}}/config-preview">
    <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>业务配置</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}}" /></label>
      <label><span>config_version</span><input name="config_version" value="{{.SelectedVersion}}" placeholder="留空自动生成" /></label>
      <div class="full">
        <span class="muted small">配置叠加项</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>
      {{if .ConfigPreview}}
      <button type="submit" formaction="/ui/devices/{{.Device.DeviceID}}/config-candidate">上传为候选配置</button>
      <button type="submit" formaction="/ui/devices/{{.Device.DeviceID}}/config-candidate/apply">应用候选配置</button>
      <input type="hidden" name="json" value="{{.ConfigPreview.JSON}}" />
      {{end}}
      <a class="btn ghost" href="/ui/devices/{{.Device.DeviceID}}#device-config">返回设备详情</a>
    </div>
  </form>
</div>

{{if .ConfigPreview}}
<div class="card">
  <div class="section-title">
    <div>
      <h2 class="title-with-icon">{{icon "config"}}<span>预览摘要</span></h2>
    </div>
  </div>
  <div class="info-list">
    <div><span>配置 ID</span><strong class="mono">{{index .ConfigPreview.Metadata "config_id"}}</strong></div>
    <div><span>版本</span><strong class="mono">{{index .ConfigPreview.Metadata "config_version"}}</strong></div>
    <div><span>业务名称</span><strong>{{if index .ConfigPreview.Metadata "business_name"}}{{index .ConfigPreview.Metadata "business_name"}}{{else}}-{{end}}</strong></div>
    <div><span>模板</span><strong>{{index .ConfigPreview.Metadata "template"}}</strong></div>
    <div><span>业务配置</span><strong>{{index .ConfigPreview.Metadata "profile"}}</strong></div>
    <div><span>配置叠加项</span><strong class="mono">{{if index .ConfigPreview.Metadata "overlays"}}{{range $i, $name := index .ConfigPreview.Metadata "overlays"}}{{if $i}}, {{end}}{{$name}}{{end}}{{else}}-{{end}}</strong></div>
    <div><span>大小</span><strong class="mono">{{.ConfigPreview.Size}} bytes</strong></div>
    <div class="full"><span>SHA256</span><strong class="mono">{{.ConfigPreview.Sha256}}</strong></div>
  </div>
</div>

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

{{if and (eq .ResultTitle "应用候选配置结果") .ConfigStatus}}
<div class="card">
  <h2>应用结果摘要</h2>
  <div class="row" style="margin-top:10px">
    <div>
      <div class="muted small">当前运行</div>
      <div class="mono">{{if .ConfigStatus.Metadata.ConfigID}}{{.ConfigStatus.Metadata.ConfigID}} / {{if .ConfigStatus.Metadata.ConfigVersion}}{{.ConfigStatus.Metadata.ConfigVersion}}{{else}}未标记{{end}}{{else}}未标记{{end}}</div>
      <div class="muted small mono" style="margin-top:6px">{{if .ConfigStatus.Metadata.Overlays}}{{range $i, $name := .ConfigStatus.Metadata.Overlays}}{{if $i}}, {{end}}{{$name}}{{end}}{{else}}-{{end}}</div>
      <div class="muted small mono" style="margin-top:6px">sha: {{shortHash .ConfigStatus.Sha256}}</div>
    </div>
    <div>
      <div class="muted small">上一份配置</div>
      <div class="mono">{{if and .ConfigStatus.PreviousConfig .ConfigStatus.PreviousConfig.Exists .ConfigStatus.PreviousConfig.Metadata.ConfigID}}{{.ConfigStatus.PreviousConfig.Metadata.ConfigID}} / {{if .ConfigStatus.PreviousConfig.Metadata.ConfigVersion}}{{.ConfigStatus.PreviousConfig.Metadata.ConfigVersion}}{{else}}未标记{{end}}{{else}}-{{end}}</div>
      <div class="muted small mono" style="margin-top:6px">{{if and .ConfigStatus.PreviousConfig .ConfigStatus.PreviousConfig.Metadata.Overlays}}{{range $i, $name := .ConfigStatus.PreviousConfig.Metadata.Overlays}}{{if $i}}, {{end}}{{$name}}{{end}}{{else}}-{{end}}</div>
      <div class="muted small mono" style="margin-top:6px">sha: {{if .ConfigStatus.PreviousConfig}}{{shortHash .ConfigStatus.PreviousConfig.Sha256}}{{end}}</div>
    </div>
    <div>
      <div class="muted small">候选配置</div>
      <div>{{if and .ConfigStatus.Candidate .ConfigStatus.Candidate.Exists}}<span class="pill">仍存在</span>{{else}}<span class="pill ok">已清空</span>{{end}}</div>
    </div>
    <div>
      <div class="muted small">视觉服务</div>
      <div>{{if .ConfigStatus.MediaServer.Running}}<span class="pill ok">运行中</span>{{else}}<span class="pill bad">未运行</span>{{end}}</div>
    </div>
  </div>
  {{if and .ConfigStatus.PreviousConfig .ConfigStatus.Sha256 .ConfigStatus.PreviousConfig.Sha256 (eq .ConfigStatus.Metadata.ConfigID .ConfigStatus.PreviousConfig.Metadata.ConfigID) (eq .ConfigStatus.Metadata.ConfigVersion .ConfigStatus.PreviousConfig.Metadata.ConfigVersion) (ne .ConfigStatus.Sha256 .ConfigStatus.PreviousConfig.Sha256)}}
  <div class="muted small" style="margin-top:10px">当前运行与上一份配置回滚点的 <span class="mono">config_id/config_version</span> 相同，但文件内容不同，请以配置叠加项和 <span class="mono">sha</span> 为准。</div>
  {{end}}
</div>
{{end}}

{{if .RawText}}
<div class="card">
  <h2>{{if .ResultTitle}}{{.ResultTitle}}{{else}}执行结果{{end}}</h2>
  <pre>{{.RawText}}</pre>
</div>
{{end}}
{{end}}