{{define "partials/monloader_pairing.html"}}
<div id="monloader-pairing"{{if not .Paired}} hx-get="/internal/monloader-pairing?paired={{.Paired}}" hx-trigger="every 3s" hx-swap="outerHTML"{{end}}>
  {{$csrf := .CSRFToken}}
  {{if .Pending}}
  <div class="pairing-pending">
  <p class="pairing-pending-msg">monloader is requesting to pair. Approve or deny below.</p>
  <div class="table-scroll">
  <table class="gallery-table">
    <thead><tr><th>App</th><th>Source</th><th>Scopes</th><th>Approve</th><th>Deny</th></tr></thead>
    <tbody>
      {{range .Pending}}
      <tr>
        <td>{{.App}}</td>
        <td>{{.Source}}</td>
        <td>{{range $i, $s := .Scopes}}{{if $i}} {{end}}{{$s}}{{end}}</td>
        <td>
          <form hx-post="/settings/monloader/pair/{{.ID}}/approve" hx-target="#monloader-pairing" hx-swap="outerHTML" style="display:inline">
            <input type="hidden" name="_csrf" value="{{$csrf}}">
            <button type="submit" class="btn-sm btn-success">Approve</button>
          </form>
        </td>
        <td>
          <form hx-post="/settings/monloader/pair/{{.ID}}/deny" hx-target="#monloader-pairing" hx-swap="outerHTML" style="display:inline">
            <input type="hidden" name="_csrf" value="{{$csrf}}">
            <button type="submit" class="btn-sm">Deny</button>
          </form>
        </td>
      </tr>
      {{end}}
    </tbody>
  </table>
  </div>
  </div>
  {{end}}
  {{if .Paired}}
  <p class="field-hint">Paired with monloader{{if .PeerURL}} at <code>{{.PeerURL}}</code>{{end}}.
    <form hx-post="/settings/monloader/pair/remove" hx-target="#monloader-pairing" hx-swap="outerHTML"
          hx-confirm="Remove the monloader pairing?" data-confirm-ok="Remove"
          data-confirm-danger="monloader must re-pair before it can push again." style="display:inline">
      <input type="hidden" name="_csrf" value="{{$csrf}}">
      <button type="submit" class="btn-sm btn-danger">Remove pairing</button>
    </form>
  </p>
  {{else}}
  <p class="field-hint">Set up the pairing with monloader. In monloader click "connect to monbooru", then approve the request here.</p>
  {{end}}
</div>
{{end}}