{{template "base.html" .}}

{{define "title"}}Dashboard — Reolink Controller{{end}}

{{define "content"}}
<div class="flex items-center justify-between mb-2">
  <h1>Dashboard</h1>
</div>

<div class="stats-grid">
  <div class="stat-card">
    <div class="value">{{.CameraCount}}</div>
    <div class="label">Cameras</div>
  </div>
  <div class="stat-card">
    <div class="value">{{.AutomationCount}}</div>
    <div class="label">Automations</div>
  </div>
  <div class="stat-card">
    <div class="value">{{.EventCount}}</div>
    <div class="label">Events (24h)</div>
  </div>
  <div class="stat-card">
    <div class="value {{if .MQTTConnected}}text-success{{else}}text-danger{{end}}">
      {{if .MQTTConnected}}●{{else}}○{{end}}
    </div>
    <div class="label">MQTT {{if .MQTTConnected}}Connected{{else}}Disconnected{{end}}</div>
  </div>
</div>

<div class="card">
  <div class="flex items-center justify-between mb-1">
    <h2>Recent Events</h2>
    <span class="text-muted" style="font-size:0.8rem">Auto-refreshes every 5s</span>
  </div>
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Time</th>
          <th>Automation</th>
          <th>Trigger</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody id="event-log-body"
             hx-get="/partials/event-log"
             hx-trigger="every 5s"
             hx-swap="innerHTML">
        {{template "event_log_rows" .Logs}}
      </tbody>
    </table>
  </div>
</div>
{{end}}