{{define "device"}}
{{template "device_nav" .}}

<div class="detail-grid">
  <div class="card">
    <div class="section-title">
      <div>
        <h2 class="title-with-icon">{{icon "status"}}<span>设备状态</span></h2>
        <div class="muted small">当前设备连接、版本与服务入口。</div>
      </div>
      {{if .Device.Online}}<span class="pill ok">在线</span>{{else}}<span class="pill bad">离线</span>{{end}}
    </div>
    <div class="info-list">
      <div><span>设备名</span><strong>{{if .Device.DeviceName}}{{.Device.DeviceName}}{{else}}{{.Device.DeviceID}}{{end}}</strong></div>
      <div><span>设备 ID</span><strong class="mono">{{.Device.DeviceID}}</strong></div>
      <div><span>管理地址</span><strong class="mono">{{.Device.IP}}:{{.Device.AgentPort}}</strong></div>
      <div><span>视频端口</span><strong class="mono">{{.Device.MediaPort}}</strong></div>
      <div><span>最后心跳</span><strong>{{ago .Device.LastSeenMs}}</strong></div>
      <div><span>版本</span><strong class="mono">{{if .Device.Version}}{{.Device.Version}}{{else}}-{{end}}</strong></div>
      <div><span>Git SHA</span><strong class="mono">{{if .Device.GitSha}}{{.Device.GitSha}}{{else}}-{{end}}</strong></div>
      <div><span>主机名</span><strong>{{if .Device.Hostname}}{{.Device.Hostname}}{{else}}-{{end}}</strong></div>
    </div>
  </div>

  <div class="card">
    <div class="section-title">
      <div>
        <h2 class="title-with-icon">{{icon "config"}}<span>当前运行配置</span></h2>
        <div class="muted small">当前服务正在使用的配置摘要。</div>
      </div>
      {{if .ConfigStatus}}{{if .ConfigStatus.OK}}<span class="pill ok">已读取</span>{{else}}<span class="pill warn">异常</span>{{end}}{{else}}<span class="pill bad">未读取</span>{{end}}
    </div>
    {{if .ConfigStatus}}
    <div class="info-list">
      <div><span>配置 ID</span><strong class="mono">{{if .ConfigStatus.Metadata.ConfigID}}{{.ConfigStatus.Metadata.ConfigID}}{{else}}未标记{{end}}</strong></div>
      <div><span>配置版本</span><strong class="mono">{{if .ConfigStatus.Metadata.ConfigVersion}}{{.ConfigStatus.Metadata.ConfigVersion}}{{else}}未标记{{end}}</strong></div>
      <div><span>模板</span><strong>{{if .ConfigStatus.Metadata.Template}}{{.ConfigStatus.Metadata.Template}}{{else}}-{{end}}</strong></div>
      <div><span>环境参数</span><strong>{{if .ConfigStatus.Metadata.Profile}}{{.ConfigStatus.Metadata.Profile}}{{else}}-{{end}}</strong></div>
      <div><span>覆盖项</span><strong class="mono">{{if .ConfigStatus.Metadata.Overlays}}{{range $i, $name := .ConfigStatus.Metadata.Overlays}}{{if $i}}, {{end}}{{$name}}{{end}}{{else}}-{{end}}</strong></div>
      <div><span>服务状态</span><strong>{{if .ConfigStatus.MediaServer.Running}}运行中{{else}}未运行{{end}}</strong></div>
      <div><span>配置文件</span><strong class="mono">{{.ConfigStatus.ConfigPath}}</strong></div>
      <div><span>SHA</span><strong class="mono">{{shortHash .ConfigStatus.Sha256}}</strong></div>
    </div>
    {{else}}
    <div class="empty-state compact">
      <div class="empty-title">暂未读到配置状态</div>
      <div class="muted">{{if .ConfigStatusErr}}{{.ConfigStatusErr}}{{else}}设备未返回配置摘要。{{end}}</div>
    </div>
    {{end}}
  </div>
</div>

<div class="card">
  <div class="section-title">
    <div>
      <h2 class="title-with-icon">{{icon "overview"}}<span>最近状态摘要</span></h2>
      <div class="muted small">放常用参考信息，不把技术细节堆在主区域。</div>
    </div>
  </div>
  <div class="summary-strip">
    <div class="summary-chip">
      <div class="summary-chip-label">服务</div>
      <div class="summary-chip-value">{{if and .ConfigStatus .ConfigStatus.MediaServer.Running}}运行中{{else}}未确认{{end}}</div>
    </div>
    <div class="summary-chip">
      <div class="summary-chip-label">配置</div>
      <div class="summary-chip-value">{{if and .ConfigStatus .ConfigStatus.Metadata.ConfigID}}{{.ConfigStatus.Metadata.ConfigID}}{{else}}待读取{{end}}</div>
    </div>
    <div class="summary-chip">
      <div class="summary-chip-label">版本</div>
      <div class="summary-chip-value">{{if .Device.Version}}{{.Device.Version}}{{else}}-{{end}}</div>
    </div>
  </div>
</div>

<details class="card collapsible">
  <summary class="title-with-icon">{{icon "tech"}}<span>技术信息</span></summary>
  <div class="muted small">低频技术信息默认收起。</div>
  <pre>{{json .Device}}</pre>
  {{if .ConfigStatusText}}<pre>{{.ConfigStatusText}}</pre>{{end}}
</details>
{{end}}