{{define "status.html"}}<section class="card-grid" id="status" hx-get="/partials/status" hx-trigger="every 10s" hx-swap="outerHTML">
  <article class="tool-card">
    <div class="tool-card__icon tool-card__icon--green" aria-hidden="true">●</div>
    <h3 class="tool-card__title">Service</h3>
    <p class="tool-card__desc">
      {{if .DBHealthy}}Running{{else}}Database error{{end}}
    </p>
    <span class="status-pill {{if .DBHealthy}}status-pill--on{{else}}status-pill--off{{end}}">
      <span class="dot {{if .DBHealthy}}dot--on{{else}}dot--off{{end}}"></span>
      {{if .DBHealthy}}online{{else}}offline{{end}}
    </span>
  </article>

  <article class="tool-card">
    <div class="tool-card__icon tool-card__icon--sky" aria-hidden="true">▤</div>
    <h3 class="tool-card__title">Database</h3>
    <p class="tool-card__desc">SQLite · source of truth</p>
    <span class="status-pill status-pill--muted">{{if .DBHealthy}}ok{{else}}error{{end}}</span>
  </article>

  <article class="tool-card">
    <div class="tool-card__icon tool-card__icon--purple" aria-hidden="true">⇄</div>
    <h3 class="tool-card__title">Broker</h3>
    <p class="tool-card__desc">
      {{if not .MQTTEnabled}}MQTT switched off{{else if .MQTTConnected}}{{.MQTTBroker}}{{else}}{{.MQTTBroker}} · reconnecting{{end}}
    </p>
    <span class="status-pill {{if not .MQTTEnabled}}status-pill--muted{{else if .MQTTConnected}}status-pill--on{{else}}status-pill--off{{end}}">
      <span class="dot {{if .MQTTConnected}}dot--on{{else}}dot--off{{end}}"></span>
      {{if not .MQTTEnabled}}disabled{{else if .MQTTConnected}}connected{{else}}offline{{end}}
    </span>
    {{if .MQTTEnabled}}
    <p class="tool-card__desc">{{.MQTTPublished}} published · {{.MQTTReceived}} received{{if .MQTTLastMessage}} · last report {{.MQTTLastMessage}}{{end}}</p>
    {{if .MQTTLastError}}<p class="tool-card__desc">last error: {{.MQTTLastError}}</p>{{end}}
    {{end}}
  </article>

  <article class="tool-card">
    <div class="tool-card__icon tool-card__icon--purple" aria-hidden="true">⏱</div>
    <h3 class="tool-card__title">Uptime</h3>
    <p class="tool-card__desc">{{.ServerUp}}</p>
    <span class="status-pill status-pill--muted">since boot</span>
  </article>

  <article class="tool-card">
    <div class="tool-card__icon tool-card__icon--orange" aria-hidden="true">⌚</div>
    <h3 class="tool-card__title">Server time</h3>
    <p class="tool-card__desc">{{.ServerTime}}</p>
    <span class="status-pill status-pill--muted">local</span>
  </article>
</section>{{end}}