mangaBookmark/backend/internal/web/templates/readers.html

{{/* The Reader roster, on the owner's administrative page. Re-rendered whole
     as the response to an action so the counts and marks it shows cannot
     describe the state before the tap. Both actions are confirm-gated: one
     signs a Reader out of every device at once, the other wipes a record.

     Owner-only at route registration, so nothing here re-tests who is asking. */}}
{{define "readers"}}
<section class="readers" id="readers">
  <h2>Readers</h2>
  <p class="setup-copy">Everyone who has signed in through Discord. Revoking
    signs a Reader out of every device; their library and bookmarks are
    untouched, and they can sign in again. The Sighting counters record how
    often a later Poll confirmed or contradicted what that Reader's browser
    reported; enough contradictions stop their reports deferring a Poll, and
    clearing the marks gives that back.</p>
  {{if .Readers}}
  <ul class="readerlist">
    {{range .Readers}}
    <li id="reader-{{.ID}}">
      <span class="reader-id">{{.DiscordID}}</span>
      <span class="reader-sessions">{{.Sessions}} session{{if ne .Sessions 1}}s{{end}}</span>
      <span class="reader-sightings">{{.Agreements}} confirmed / {{.Disagreements}} contradicted</span>
      {{/* Blocked is spelled out rather than left to be worked out from two
           numbers and a threshold. */}}
      {{if .Blocked}}<span class="reader-blocked">deferral blocked</span>{{end}}
      <span class="reader-actions">
        {{/* Clearing restores a privilege, so its confirm wears the calm wash,
             not destruction. Revocation destroys sessions, so it wears danger.
             Both are confirm-gated — the opener never posts. */}}
        <button type="button" class="ghost" aria-expanded="false" aria-controls="confirm-clear-{{.ID}}"
                onclick="document.getElementById('confirm-clear-{{.ID}}').hidden = false; this.setAttribute('aria-expanded','true')">Clear marks</button>
        {{if and .Sessions (ne .ID $.OwnerID)}}
        <button type="button" class="ghost danger" aria-expanded="false" aria-controls="confirm-revoke-{{.ID}}"
                onclick="document.getElementById('confirm-revoke-{{.ID}}').hidden = false; this.setAttribute('aria-expanded','true')">Revoke sessions</button>
        {{end}}
      </span>
      <div class="confirm-row calm" id="confirm-clear-{{.ID}}" role="group" aria-live="polite" hidden>
        <span>Clear this Reader's Sighting record?</span>
        <div>
          <button type="button" class="go"
                  hx-post="/readers/{{.ID}}/clear-marks" hx-target="#readers" hx-swap="outerHTML"
                  hx-indicator="#readers" hx-disabled-elt="this">Clear</button>
          <button type="button" onclick="document.getElementById('confirm-clear-{{.ID}}').hidden = true; var b=document.querySelector('[aria-controls=\'confirm-clear-{{.ID}}\']'); if(b){b.setAttribute('aria-expanded','false'); b.focus();}">Cancel</button>
        </div>
      </div>
      {{if and .Sessions (ne .ID $.OwnerID)}}
      <div class="confirm-row" id="confirm-revoke-{{.ID}}" role="group" aria-live="polite" hidden>
        <span>Revoke this Reader's sessions?</span>
        <div>
          <button type="button" class="danger-solid"
                  hx-post="/readers/{{.ID}}/revoke" hx-target="#readers" hx-swap="outerHTML"
                  hx-indicator="#readers" hx-disabled-elt="this">Revoke</button>
          <button type="button" onclick="document.getElementById('confirm-revoke-{{.ID}}').hidden = true; var b=document.querySelector('[aria-controls=\'confirm-revoke-{{.ID}}\']'); if(b){b.setAttribute('aria-expanded','false'); b.focus();}">Cancel</button>
        </div>
      </div>
      {{end}}
    </li>
    {{end}}
  </ul>
  {{else}}
  <p class="empty">No readers yet — the roster appears after the first Discord sign-in.</p>
  {{end}}
  <p class="error-inline" role="status" hidden></p>
</section>
{{end}}