{{define "system"}}
<section class="hero-band">
  <div>
    <div class="eyebrow">系统</div>
    <h2>平台状态与访问入口</h2>
    <div class="muted">只放发现、认证、健康和接口入口，不承载日常设备操作。</div>
  </div>
</section>

<div class="detail-grid">
  <div class="card">
    <h2 class="title-with-icon">{{icon "discovery"}}<span>设备发现与注册</span></h2>
    <div class="muted small">当前后台通过 UDP 广播发现设备，也支持手动纳管。</div>
    <div class="info-list">
      <div><span>当前设备数</span><strong>{{len .Devices}}</strong></div>
      <div><span>发现方式</span><strong>UDP 广播发现</strong></div>
      <div><span>注册方式</span><strong>自动发现 / 手动录入</strong></div>
    </div>
  </div>

  <div class="card">
    <h2 class="title-with-icon">{{icon "shield"}}<span>Agent 访问策略</span></h2>
    <div class="muted small">后台通过统一令牌访问设备，页面默认不展示敏感值。</div>
    <div class="info-list">
      <div><span>访问模型</span><strong>统一令牌</strong></div>
      <div><span>更新方式</span><strong>部署脚本托管</strong></div>
      <div><span>页面策略</span><strong>默认不暴露敏感值</strong></div>
    </div>
  </div>
</div>

<div class="detail-grid">
  <div class="card">
    <h2 class="title-with-icon">{{icon "heartbeat"}}<span>后台健康</span></h2>
    <div class="muted small">后台自身的健康检查与接口说明入口。</div>
    <div class="info-list compact-list">
      <div><span>健康检查</span><strong class="mono">/health</strong></div>
      <div><span>接口文档</span><strong class="mono">/openapi.json</strong></div>
    </div>
    <div class="actions" style="margin-top:12px">
      <a class="btn ghost" href="/health">健康检查</a>
      <a class="btn ghost" href="/openapi.json">OpenAPI</a>
    </div>
  </div>

  <div class="card">
    <h2 class="title-with-icon">{{icon "tech"}}<span>当前纳管设备</span></h2>
    <div class="muted small">只展示系统层需要的设备接入信息。</div>
    <div class="info-list compact-list">
      <div><span>在线设备</span><strong>{{len .Devices}}</strong></div>
      <div><span>接入端口</span><strong class="mono">9100 / 9000</strong></div>
    </div>
  </div>
</div>
{{end}}