{{define "content"}}
<h1>Job #{{.Job.ID}}</h1>
<p><a href="/services/{{.Job.ServiceID}}">{{.Job.ServiceName}}</a></p>
{{template "job" .}}
{{end}}

{{/* The wrapper is part of the fragment and swapped as outerHTML, so a finished job drops the polling timer. The timer recovers from a dropped SSE signal. */}}
{{define "job"}}
<div id="job" hx-get="/fragments/jobs/{{.Job.ID}}" hx-trigger="sse:job-{{.Job.ID}}{{if .Job.Active}}, every 2s{{end}}" hx-swap="outerHTML">
<table class="details">
  <tr><th>Status</th><td class="status status-job-{{.Job.Status}}">{{.Job.Status}}</td></tr>
  <tr><th>From</th><td><code>{{shortRef .Job.FromRef}}</code></td></tr>
  <tr><th>To</th><td><code>{{shortRef .Job.ToRef}}</code></td></tr>
  <tr><th>Requested by</th><td>{{.Job.RequestedBy}}</td></tr>
  <tr><th>Created</th><td>{{.Job.CreatedAt.Format "2006-01-02 15:04:05"}}</td></tr>
  <tr><th>Duration</th><td>{{duration .Job}}</td></tr>
</table>
{{if .Job.Error}}<p class="error">{{.Job.Error}}</p>{{end}}
{{if .Job.OutputTruncated}}<p class="muted">Earlier output truncated.</p>{{end}}
<pre class="log">{{.Job.Output}}</pre>
</div>
{{end}}