{{define "alarms"}}
<div class="card">
  <form method="get" action="/ui/alarms" style="display:flex;gap:8px;align-items:center;margin-bottom:12px;justify-content:space-between">
    <span style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
    <input type="date" name="from" value="{{.SelectedFrom}}" style="width:140px;font-size:12px">
    <span class="muted small">至</span>
    <input type="date" name="to" value="{{.SelectedTo}}" style="width:140px;font-size:12px">
    <button class="btn" style="font-size:12px;padding:4px 12px">筛选</button>
    <a href="/ui/alarms" class="btn ghost" style="font-size:11px">今天</a>
    <a href="/ui/alarms?from={{.WeekStart}}&to={{.WeekEnd}}" class="btn ghost" style="font-size:11px">本周</a>
    <a href="/ui/alarms?from={{.MonthStart}}&to={{.MonthEnd}}" class="btn ghost" style="font-size:11px">本月</a>
    <a href="/ui/alarms?from=2020-01-01&to={{.SelectedTo}}" class="btn ghost" style="font-size:11px">全部</a>
    </span>
    <select name="per_page" onchange="this.form.submit()" style="font-size:11px;padding:2px 4px;width:90px;flex-shrink:0">
      <option value="10" {{if eq .PerPage 10}}selected{{end}}>10条/页</option>
      <option value="20" {{if eq .PerPage 20}}selected{{end}}>20条/页</option>
      <option value="50" {{if eq .PerPage 50}}selected{{end}}>50条/页</option>
      <option value="100" {{if eq .PerPage 100}}selected{{end}}>100条/页</option>
    </select>
  </form>

  <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}}">{{shortID .DeviceID}}</a>
          </td>
          <td>{{.Channel}}</td>
          <td>
            <span class="pill warn">{{ruleLabel .RuleName}}</span>
          </td>
          <td>{{if .ObjectLabel}}{{.ObjectLabel}}{{else}}-{{end}}</td>
          <td>{{if .Confidence}}{{printf "%.2f" .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>
    {{if gt .TotalAlarmPages 1}}
    <div style="margin-top:12px;display:flex;gap:4px;align-items:center">
      <span class="muted small" style="margin-right:8px">{{.TotalAlarmCount}} 条，{{.TotalAlarmPages}} 页</span>
      {{$from := $.SelectedFrom}}{{$to := $.SelectedTo}}{{$pp := $.PerPage}}
      {{if gt .CurrentPage 1}}
      <a href="/ui/alarms?from={{$from}}&to={{$to}}&per_page={{$pp}}" class="btn ghost" style="font-size:11px;padding:2px 6px">«</a>
      <a href="/ui/alarms?from={{$from}}&to={{$to}}&per_page={{$pp}}&page={{sub .CurrentPage 1}}" class="btn ghost" style="font-size:11px;padding:2px 6px">‹</a>
      {{end}}
      {{range .PageNumbers}}
      {{if eq . -1}}
      <span class="muted small" style="padding:2px 4px">…</span>
      {{else}}
      <a href="/ui/alarms?from={{$from}}&to={{$to}}&per_page={{$pp}}&page={{.}}" class="btn {{if eq . $.CurrentPage}}primary{{else}}ghost{{end}}" style="font-size:11px;padding:2px 8px">{{.}}</a>
      {{end}}
      {{end}}
      {{if lt .CurrentPage .TotalAlarmPages}}
      <a href="/ui/alarms?from={{$from}}&to={{$to}}&per_page={{$pp}}&page={{add .CurrentPage 1}}" class="btn ghost" style="font-size:11px;padding:2px 6px">›</a>
      <a href="/ui/alarms?from={{$from}}&to={{$to}}&per_page={{$pp}}&page={{.TotalAlarmPages}}" class="btn ghost" style="font-size:11px;padding:2px 6px">»</a>
      {{end}}
    </div>
    {{end}}
    {{else}}
    <div class="empty-state">
      <div class="empty-title">暂无告警记录</div>
      <div class="muted">所选日期范围内没有告警记录。</div>
    </div>
    {{end}}
  </div>
</div>
{{end}}