{{define "content"}}
<h1>Jobs</h1>
<div id="jobs" hx-get="/fragments/jobs" hx-trigger="sse:jobs" hx-swap="innerHTML">
  {{template "jobs" .}}
</div>
{{end}}

{{define "jobs"}}
<table>
  <thead><tr><th>Job</th><th>Service</th><th>Status</th><th>From → to</th><th>Requested by</th><th>Created</th><th>Duration</th></tr></thead>
  <tbody>
  {{range .Jobs}}
    <tr>
      <td><a href="/jobs/{{.ID}}">#{{.ID}}</a></td>
      <td><a href="/services/{{.ServiceID}}">{{.ServiceName}}</a></td>
      <td class="status status-job-{{.Status}}">{{.Status}}</td>
      <td><code>{{shortRef .FromRef}}</code> → <code>{{shortRef .ToRef}}</code></td>
      <td>{{.RequestedBy}}</td>
      <td>{{.CreatedAt.Format "2006-01-02 15:04"}}</td>
      <td>{{duration .}}</td>
    </tr>
  {{else}}
    <tr><td colspan="7">No jobs yet.</td></tr>
  {{end}}
  </tbody>
</table>
{{end}}