{{define "alarms"}}
<div class="card">
  <div class="section-title">
    <div>
      <h2 class="title-with-icon">{{icon "bell"}}<span>告警中心</span></h2>
      <div class="form-hint">来自所有设备的实时告警记录，按时间倒序排列。</div>
    </div>
  </div>
</div>

<div class="card">
  <div class="table-wrap">
    {{if .AlarmRecords}}
    <table>
      <thead>
        <tr>
          <th>时间</th>
          <th>设备</th>
          <th>通道</th>
          <th>规则</th>
          <th>目标</th>
          <th>置信度</th>
          <th>截图</th>
        </tr>
      </thead>
      <tbody>
        {{range .AlarmRecords}}
        <tr>
          <td class="mono small">{{.Timestamp}}</td>
          <td>
            <a href="/ui/devices/{{.DeviceID}}">{{.DeviceID}}</a>
          </td>
          <td>{{.Channel}}</td>
          <td>
            <span class="pill warn">{{.RuleName}}</span>
          </td>
          <td>{{if .ObjectLabel}}{{.ObjectLabel}}{{else}}-{{end}}</td>
          <td>{{if .Confidence}}{{.Confidence}}{{else}}-{{end}}</td>
          <td>
            {{if .SnapshotURL}}
            <a href="{{.SnapshotURL}}" target="_blank" class="btn ghost">查看截图</a>
            {{else}}-{{end}}
            {{if .ClipURL}}
            <a href="{{.ClipURL}}" target="_blank" class="btn ghost">视频片段</a>
            {{end}}
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
    {{else}}
    <div class="empty-state">
      <div class="empty-title">暂无告警记录</div>
      <div class="muted">设备尚未上报告警，或告警收集服务尚未启动。</div>
    </div>
    {{end}}
  </div>
</div>
{{end}}