{{define "content"}}
<h1>{{.Service.DisplayName}}</h1>
{{if .Error}}<p class="error">{{.Error}}</p>{{end}}
<table class="details">
  <tr><th>Kind</th><td>{{.Service.Kind}}</td></tr>
  <tr><th>Agent</th><td>{{if .Service.AgentName}}{{.Service.AgentName}}{{else}}Swarm{{end}}</td></tr>
  <tr><th>Image</th><td><code>{{shortRef .Service.ActualRef}}</code></td></tr>
  {{if .Service.ActualDigest}}<tr><th>Digest</th><td><code>{{.Service.ActualDigest}}</code></td></tr>{{end}}
  <tr><th>Status</th><td class="status status-{{.Service.Status}}">{{.Service.Status}}</td></tr>
  {{if .Service.DesiredRef}}<tr><th>Desired image</th><td><code>{{shortRef .Service.DesiredRef}}</code></td></tr>{{end}}
  {{if .ConfigFiles}}<tr><th>Config files</th><td>{{range .ConfigFiles}}<code>{{.}}</code><br>{{end}}</td></tr>{{end}}
</table>
{{if .Reason}}
<p>Update unavailable: {{.Reason}}.</p>
{{else}}
<form method="post" action="/services/{{.Service.ID}}/update">
  <input type="hidden" name="csrf_token" value="{{.CSRF}}">
  <button type="submit">Update</button>
</form>
<p class="muted">Pulls the current tag again and redeploys the service.</p>
{{end}}
<h2>Update history</h2>
<div id="history" hx-get="/fragments/services/{{.Service.ID}}/jobs" hx-trigger="sse:jobs" hx-swap="innerHTML">
  {{template "history" .}}
</div>
{{end}}

{{define "history"}}
<table>
  <thead><tr><th>Job</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 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="6">No updates yet.</td></tr>
  {{end}}
  </tbody>
</table>
{{end}}