{{/*
  host_chrome — header (status dot + name + tags + meta), vitals
  strip, and the six sub-tab nav for any /hosts/{id}/... page.

  Expects .Page to expose:
    .Host                  — store.Host
    .SubTab                — "snapshots" | "sources" | "schedules" | "repo" | "jobs" | "settings"
    .SourceGroupCount      — int
    .ScheduleCount         — int
    .ScheduleVersion       — int64 (host_schedule_version)
    .Crumb                 — string ("snapshots" / "sources" / etc — appended after host name)
*/}}
{{define "host_chrome"}}
{{$page := .Page}}
{{$host := $page.Host}}
<div class="max-w-[1280px] mx-auto px-8 pt-7">

  <div class="crumbs">
    <a href="/">Dashboard</a><span class="sep">/</span>
    {{if eq $page.SubTab "snapshots"}}
      <span class="text-ink-mid">{{$host.Name}}</span>
    {{else}}
      <a href="/hosts/{{$host.ID}}">{{$host.Name}}</a><span class="sep">/</span>
      <span class="text-ink-mid">{{$page.Crumb}}</span>
    {{end}}
  </div>

  {{/* ---------- header ---------- */}}
  <div class="flex items-start justify-between mt-3.5">
    <div>
      <div class="flex items-center gap-3">
        {{if eq $host.Status "online"}}
          <span class="dot dot-online{{if $host.CurrentJobID}} pulse{{end}}"></span>
        {{else if eq $host.Status "degraded"}}
          <span class="dot dot-degraded"></span>
        {{else if eq $host.Status "offline"}}
          <span class="dot dot-offline"></span>
        {{else}}
          <span class="dot dot-failed"></span>
        {{end}}
        <h1 class="mono text-[26px] font-medium tracking-[0.005em] text-ink">{{$host.Name}}</h1>
        <div class="flex gap-1.5">{{range $host.Tags}}<span class="tag">{{.}}</span>{{end}}</div>
        {{if gt $page.ScheduleVersion 0}}
          <span class="mono text-[11px] text-ink-mute ml-2">
            version {{$page.ScheduleVersion}}
            {{if eq $page.ScheduleVersion $host.AppliedScheduleVersion}}
              <span class="text-ok">· agent in sync</span>
            {{else}}
              <span class="text-warn">· agent at v{{$host.AppliedScheduleVersion}}</span>
            {{end}}
          </span>
        {{end}}
      </div>
      <div class="flex items-center gap-3 mt-3 text-[13px] text-ink-mute">
        <span class="mono text-ink-mid">{{$host.OS}}/{{$host.Arch}}</span>
        <span class="text-ink-fade">·</span>
        <span>agent <span class="mono text-ink-mid">{{if $host.AgentVersion}}{{$host.AgentVersion}}{{else}}—{{end}}</span></span>
        <span class="text-ink-fade">·</span>
        <span>restic <span class="mono text-ink-mid">{{if $host.ResticVersion}}{{$host.ResticVersion}}{{else}}—{{end}}</span></span>
        <span class="text-ink-fade">·</span>
        {{if eq $host.Status "offline"}}
          <span>last seen <span class="mono text-ink-mid">{{relTime $host.LastSeenAt}}</span></span>
        {{else}}
          <span>online · last heartbeat <span class="mono text-ink-mid">{{relTime $host.LastSeenAt}}</span></span>
        {{end}}
      </div>
    </div>
    <div class="flex items-center gap-2">
      <button class="btn" disabled title="per-source-group Run-now lives on the Sources tab">Run&nbsp;backup&nbsp;now</button>
      <button class="btn">Edit credentials</button>
      <button class="btn btn-ghost text-base px-2.5">⋯</button>
    </div>
  </div>

  {{/* ---------- vitals strip ---------- */}}
  <div class="grid grid-cols-12 gap-6 mt-6 py-5 border-y border-line-soft">
    <div class="col-span-3">
      <div class="text-[11px] text-ink-fade uppercase tracking-[0.08em]">Last backup</div>
      <div class="mono text-[18px] text-ink mt-1">
        {{if eq (deref $host.LastBackupStatus) "succeeded"}}
          <span class="text-ok">succeeded</span>
        {{else if eq (deref $host.LastBackupStatus) "failed"}}
          <span class="text-bad">failed</span>
        {{else if eq (deref $host.LastBackupStatus) "cancelled"}}
          <span class="text-warn">cancelled</span>
        {{else}}
          <span class="text-ink-fade italic">never run</span>
        {{end}}
        {{if $host.LastBackupAt}} · {{relTime $host.LastBackupAt}}{{end}}
      </div>
    </div>
    <div class="col-span-3">
      <div class="text-[11px] text-ink-fade uppercase tracking-[0.08em]">Repo size</div>
      <div class="mono text-[18px] text-ink mt-1">{{bytes $host.RepoSizeBytes}}</div>
    </div>
    <div class="col-span-3">
      <div class="text-[11px] text-ink-fade uppercase tracking-[0.08em]">Snapshots</div>
      <div class="mono text-[18px] text-ink mt-1">{{comma $host.SnapshotCount}}</div>
    </div>
    <div class="col-span-3">
      <div class="text-[11px] text-ink-fade uppercase tracking-[0.08em]">Open alerts</div>
      <div class="mono text-[18px] mt-1 {{if gt $host.OpenAlertCount 0}}text-bad{{else}}text-ok{{end}}">
        {{if eq $host.OpenAlertCount 0}}0 · all clear{{else}}{{$host.OpenAlertCount}} · review →{{end}}
      </div>
    </div>
  </div>

  {{/* ---------- secondary tabs ---------- */}}
  <div class="flex items-end mt-1.5">
    <a class="sub-tab {{if eq $page.SubTab "snapshots"}}active{{end}}" href="/hosts/{{$host.ID}}">Snapshots <span class="mono text-ink-fade text-[11px] ml-1">{{comma $host.SnapshotCount}}</span></a>
    <a class="sub-tab {{if eq $page.SubTab "sources"}}active{{end}}" href="/hosts/{{$host.ID}}/sources">Sources <span class="mono text-ink-fade text-[11px] ml-1">{{$page.SourceGroupCount}}</span></a>
    <a class="sub-tab {{if eq $page.SubTab "schedules"}}active{{end}}" href="/hosts/{{$host.ID}}/schedules">Schedules <span class="mono text-ink-fade text-[11px] ml-1">{{$page.ScheduleCount}}</span></a>
    <a class="sub-tab {{if eq $page.SubTab "repo"}}active{{end}}" href="/hosts/{{$host.ID}}/repo">Repo</a>
    <div class="sub-tab" title="lands later">Jobs</div>
    <div class="sub-tab" title="lands later">Settings</div>
  </div>
</div>
{{end}}