{{define "host_row"}}
<div class="row-hover host-row clickable hairline {{.Status}}{{if eq (deref .LastBackupStatus) "failed"}} failed{{end}}">
  <a href="/hosts/{{.ID}}" class="row-link" aria-label="Open {{.Name}}">{{.Name}}</a>
  <div>
    {{- if eq .Status "online" -}}
      <span class="dot dot-online{{if .CurrentJobID}} pulse{{end}}"></span>
    {{- else if eq .Status "degraded" -}}
      <span class="dot dot-degraded"></span>
    {{- else if eq .Status "offline" -}}
      <span class="dot dot-offline"></span>
    {{- else -}}
      <span class="dot dot-failed"></span>
    {{- end -}}
  </div>
  <div class="mono {{if eq .Status "offline"}}text-ink-mid{{else}}text-ink{{end}} font-medium">{{.Name}}</div>
  <div class="mono text-ink-mid text-[12px]">{{.OS}}/{{.Arch}}</div>
  <div class="text-xs text-ink-mid">
    {{- if .CurrentJobID -}}
      <span class="text-accent">backup running…</span><br>
      <span class="mono text-ink-fade">started {{relTime .LastBackupAt}}</span>
    {{- else if eq (deref .LastBackupStatus) "succeeded" -}}
      <span class="text-ok">succeeded</span> · <span class="mono">{{relTime .LastBackupAt}}</span>
    {{- else if eq (deref .LastBackupStatus) "failed" -}}
      <span class="text-bad font-medium">failed</span> · <span class="mono">{{relTime .LastBackupAt}}</span>
    {{- else if eq (deref .LastBackupStatus) "cancelled" -}}
      <span class="text-warn">cancelled</span> · <span class="mono">{{relTime .LastBackupAt}}</span>
    {{- else if eq .Status "offline" -}}
      <span class="text-ink-mute">last seen <span class="mono">{{relTime .LastSeenAt}}</span></span>
    {{- else -}}
      <span class="text-ink-fade italic">never run</span>
    {{- end -}}
  </div>
  <div class="text-right mono {{if eq .Status "offline"}}text-ink-mid{{else}}text-ink{{end}}">{{bytes .RepoSizeBytes}}</div>
  <div class="text-right mono {{if eq .Status "offline"}}text-ink-mute{{else}}text-ink-mid{{end}}">
    {{- if eq .SnapshotCount 0 -}}
      <span class="text-ink-fade">—</span>
    {{- else -}}
      {{comma .SnapshotCount}}
    {{- end -}}
  </div>
  <div class="text-right mono {{if gt .OpenAlertCount 0}}text-bad font-medium{{else}}text-ink-mute{{end}}">
    {{- if eq .OpenAlertCount 0 -}}—{{- else -}}{{.OpenAlertCount}}{{- end -}}
  </div>
  <div class="flex gap-1.5 flex-wrap">
    {{- range .Tags -}}
      <span class="tag">{{.}}</span>
    {{- end -}}
  </div>
  <div class="text-right row-action">
    {{- if eq .Status "offline" -}}
      <span class="mono text-xs text-ink-fade">offline</span>
    {{- else if .CurrentJobID -}}
      <a href="/jobs/{{deref .CurrentJobID}}" class="btn btn-ghost">View job →</a>
    {{- else -}}
      <a href="/hosts/{{.ID}}" class="btn btn-ghost whitespace-nowrap" title="per-source-group Run-now lands in P2 Phase 4 — open the host">Open →</a>
    {{- end -}}
  </div>
</div>
{{end}}