{{define "content"}}
<h1>Agents</h1>
<form method="post" action="/agents" class="inline">
  <input type="hidden" name="csrf_token" value="{{.CSRF}}">
  <label>Name <input name="name" required placeholder="node-2"></label>
  <button type="submit">Add agent</button>
</form>
{{if .Error}}<p class="error">{{.Error}}</p>{{end}}
<div id="agents" hx-get="/fragments/agents" hx-trigger="sse:agents" hx-swap="innerHTML">
  {{template "agents" .}}
</div>
{{end}}

{{define "agents"}}
<table>
  <thead><tr><th>Name</th><th>Hostname</th><th>State</th><th>Version</th><th>Swarm manager</th><th>Last seen</th><th></th></tr></thead>
  <tbody>
  {{range .Agents}}
    <tr>
      <td>{{.Name}}</td>
      <td>{{.Hostname}}</td>
      <td>{{if .RevokedAt}}<span class="status status-stopped">revoked</span>{{else if .Online}}<span class="status status-running">online</span>{{else}}<span class="status status-degraded">offline</span>{{end}}</td>
      <td>{{.AgentVersion}}</td>
      <td>{{if .SwarmManager}}yes{{end}}</td>
      <td>{{with .LastSeenAt}}{{.Format "2006-01-02 15:04"}}{{end}}</td>
      <td>{{if not .RevokedAt}}
        <form method="post" action="/agents/{{.ID}}/revoke" onsubmit="return confirm('Revoke {{.Name}}? It is disconnected immediately and must be added again to come back.')">
          <input type="hidden" name="csrf_token" value="{{$.CSRF}}">
          <button type="submit">Revoke</button>
        </form>
      {{end}}</td>
    </tr>
  {{else}}
    <tr><td colspan="7">No agents yet.</td></tr>
  {{end}}
  </tbody>
</table>
{{end}}