{{define "card"}}
<article id="card-{{.Device.SerialNumber}}" class="device-card">
  <div class="card-head">
    <img class="device-icon" src="{{.Icon}}" alt="" width="56" height="56">
    <div class="card-title">
      <strong>{{.Device.FriendlyName}}</strong>
      <small>{{.Device.SerialNumber}}</small>
    </div>
    <button class="bug-btn" title="Show raw device JSON" aria-label="Show raw device JSON"
            hx-get="/ui/devices/{{.Device.SerialNumber}}/debug"
            hx-target="#debug-modal-body"
            hx-swap="innerHTML"
            onclick="document.getElementById('debug-modal').showModal()">🐛</button>
    <span class="dot {{if .Device.Connected}}dot-ok{{else}}dot-off{{end}}"
          title="{{if .Device.Connected}}Connected{{else}}Disconnected{{end}}"></span>
  </div>

  <div class="stats">
    <div><span>Status</span>
      <b>{{if .Device.Running}}🔥 {{prettyMode .Device.RunningState}}{{else}}Idle{{end}}</b></div>
    <div><span>Setpoint</span><b>{{.Device.Setpoint}}&deg;F</b></div>
    <div><span>Alerts</span>
      <b>{{if gt .Device.AlertCount 0}}⚠ {{.Device.AlertCount}}{{else}}0{{end}}</b></div>
  </div>

  {{if ge .Device.HotWaterAvailability 0}}
  <div class="fill">
    <div class="fill-head"><span>Hot water</span><b>{{.Device.HotWaterAvailability}}%</b></div>
    <div class="fill-meter">
      <div class="fill-bar {{fillClass .Device.HotWaterAvailability}}" style="{{fillWidth .Device.HotWaterAvailability}}"></div>
    </div>
  </div>
  {{end}}

  <div class="card-foot">
    {{if .Modes}}
      <label class="mode-label">
        Mode
        <select name="mode"
                hx-post="/ui/devices/{{.Device.SerialNumber}}/mode"
                hx-target="#card-{{.Device.SerialNumber}}"
                hx-swap="outerHTML"
                hx-trigger="change"
                {{if .Pending}}disabled aria-busy="true"{{end}}>
          {{range .Modes}}
            <option value="{{.Value}}" {{if .Selected}}selected{{end}}>{{.Label}}</option>
          {{end}}
        </select>
      </label>
      {{if .Pending}}<span class="badge badge-pending" aria-busy="true">Updating → {{.Pending}}…</span>{{end}}
    {{else}}
      <small class="mode-fixed">Mode: {{prettyMode .Device.Mode}} (not settable)</small>
    {{end}}
    {{if .Error}}<span class="badge badge-error" role="alert">{{.Error}}</span>{{end}}
  </div>
</article>
{{end}}