{{template "base" .}}
{{define "content"}}
<h2>Repositories</h2>

<div class="filters">
  <form
    hx-get=""
    hx-target="#table"
    hx-select="#table"
    hx-swap="outerHTML"
    hx-trigger="every 10s"
  >
    <input type="text" name="did" placeholder="DID" value="{{.FilterByDid}}">
    <input type="text" name="knot" placeholder="Knot Domain" value="{{.FilterByKnot}}">
    <select name="state">
      <option value="">-- State --</option>
      {{ range const.AllRepoStates }}
      <option value="{{.}}" {{ if eq $.FilterByState . }}selected{{end}}>{{.}}</option>
      {{ end }}
    </select>
    <button type="submit">Filter</button>
    <a href="/repos">Clear</a>
  </form>
</div>

<div id="table">
  <div class="repo-state-indicators">
    {{range .FilterByState.AllStates}}
      <span class="state-pill state-{{.}}">
        {{.}}: {{index $.RepoCounts .}}
      </span>
    {{end}}
  </div>
  <table>
    <thead>
      <tr>
        <th>DID</th>
        <th>Name</th>
        <th>Knot</th>
        <th>State</th>
        <th>Retry</th>
        <th>Retry After</th>
        <th>Error Message</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      {{range .Repos}}
      <tr>
        <td><code>{{.Did}}</code></td>
        <td>{{.Name}}</td>
        <td>{{.KnotDomain}}</td>
        <td><strong>{{.State}}</strong></td>
        <td>{{.RetryCount}}</td>
        <td>{{readt .RetryAfter}}</td>
        <td>{{.ErrorMsg}}</td>
        <td>
          <form
            {{ if .State.IsResyncing -}}
              hx-post="/api/cancelRepoResync"
            {{- else -}}
              hx-post="/api/triggerRepoResync"
            {{- end }}
            hx-swap="none"
            hx-disabled-elt="find button"
          >
            <input type="hidden" name="repo" value="{{.AtUri}}">
            <button type="submit">{{ if .State.IsResyncing }}cancel{{ else }}resync{{ end }}</button>
          </form>
        </td>
      </tr>
      {{else}}
      <tr><td colspan="99">No repositories found.</td></tr>
      {{end}}
    </tbody>
  </table>
</div>

<div class="pagination">
  {{if gt .Page 1}}
    <a href="?page={{sub .Page 1}}&did={{.FilterByDid}}&knot={{.FilterByKnot}}&state={{.FilterByState}}">« Previous</a>
  {{end}}
  <span>Page {{.Page}}</span>
  <a href="?page={{add .Page 1}}&did={{.FilterByDid}}&knot={{.FilterByKnot}}&state={{.FilterByState}}">Next »</a>
</div>
{{end}}