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

{{define "services"}}
{{range .Groups}}
<section>
  <h2>{{.Title}}</h2>
  <table>
    <thead><tr><th>Service</th><th>Image</th><th>Status</th><th>Mode</th></tr></thead>
    <tbody>
    {{range .Services}}
      <tr>
        <td><a href="/services/{{.ID}}">{{.DisplayName}}</a>{{if .Self}} <span class="badge">managed outside</span>{{end}}{{if .AvailableRef}} <span class="badge badge-update" title="{{.AvailableRef}}">update available</span>{{end}}</td>
        <td><code>{{shortRef .ActualRef}}</code></td>
        <td class="status status-{{.Status}}">{{.Status}}</td>
        <td>{{.UpdateMode}}
          <form method="post" action="/services/{{.ID}}/mode" class="mode">
            <input type="hidden" name="csrf_token" value="{{$.CSRF}}">
            <input type="hidden" name="return" value="overview">
            {{if eq .UpdateMode "auto"}}<input type="hidden" name="mode" value="manual">
            <button type="submit">Make manual</button>
            {{else}}<input type="hidden" name="mode" value="auto">
            <button type="submit"{{if .AutoBlocked}} disabled{{end}}>Make auto</button>{{if .AutoBlocked}} <span class="muted">{{.AutoBlocked}}</span>{{end}}{{end}}
          </form>
        </td>
      </tr>
    {{end}}
    </tbody>
  </table>
</section>
{{else}}
<p>No services reported yet. <a href="/agents">Add an agent</a> to get started.</p>
{{end}}
{{end}}