{{define "title"}}{{.Title}}{{end}}

{{define "content"}}
{{template "host_chrome" .}}
{{$page := .Page}}
{{$host := $page.Host}}
<div class="max-w-[1280px] mx-auto px-8 pb-14 pt-6">

  <div class="flex items-center justify-between mb-4">
    <p class="text-pretty text-[12.5px] text-ink-mute leading-[1.6] max-w-[760px]">
      Recent jobs for this host — backups, prunes, checks, restores, repo init/probe, agent updates.
      Newest first, limited to the last 100. Click a row for the full log.
    </p>
  </div>

  {{if eq (len $page.Jobs) 0}}
    <div class="panel rounded-[7px] empty-state" style="border-radius: 7px;">
      <h3 class="text-base font-medium tracking-[-0.005em]">No jobs yet.</h3>
      <p class="text-pretty text-ink-mute text-[13px] mt-2 mx-auto max-w-[480px] leading-[1.65]">
        Trigger a backup from the Sources tab, or wait for a schedule to fire — jobs appear here as soon as they're queued.
      </p>
    </div>
  {{else}}
    <div class="panel rounded-[7px] overflow-hidden">
      <div class="jobs-row head hairline">
        <div>Kind</div>
        <div>Status</div>
        <div>Actor</div>
        <div>Started</div>
        <div>Duration</div>
        <div></div>
      </div>
      {{range $i, $j := $page.Jobs}}
        <div class="jobs-row clickable {{if not (eq $i 0)}}hairline{{end}}">
          <a href="/jobs/{{$j.ID}}" class="row-link" aria-label="Open job"></a>
          <div class="mono text-ink">{{$j.Kind}}</div>
          <div>
            {{if eq $j.Status "succeeded"}}
              <span class="mono text-[11px] text-ok">succeeded</span>
            {{else if eq $j.Status "failed"}}
              <span class="mono text-[11px] text-bad">failed</span>
            {{else if eq $j.Status "cancelled"}}
              <span class="mono text-[11px] text-warn">cancelled</span>
            {{else if eq $j.Status "running"}}
              <span class="mono text-[11px] text-accent">running</span>
            {{else}}
              <span class="mono text-[11px] text-ink-mid">{{$j.Status}}</span>
            {{end}}
          </div>
          <div class="mono text-[11.5px] text-ink-mid">{{$j.ActorKind}}</div>
          <div class="mono text-[11.5px] {{if $j.StartedAt}}text-ink-mid{{else}}text-ink-fade{{end}}"
               {{if $j.StartedAt}}title="{{$j.StartedAt.Format "2006-01-02 15:04:05 MST"}}"{{end}}>
            {{if $j.StartedAt}}{{relTime $j.StartedAt}}{{else}}<span class="text-ink-fade">queued</span>{{end}}
          </div>
          <div class="mono text-[11.5px] text-ink-mid">
            {{if and $j.StartedAt $j.FinishedAt}}{{durationHuman $j.StartedAt $j.FinishedAt}}{{else}}<span class="text-ink-fade">—</span>{{end}}
          </div>
          <div class="text-right text-ink-fade row-action">→</div>
        </div>
      {{end}}
    </div>
  {{end}}

</div>
{{end}}