mangaBookmark/backend/internal/web/templates/series-list.html

{{/* The Series list: every Series across every Reader's library, filtered by
     one hygiene rule and narrowed by Site and Library. Filter, Site, Library
     and page all live in the query string, so the list's state is an address
     that can be bookmarked: the two selects submit the GET form, and the
     Library segment links and the pager preserve the filter and Site. */}}
{{define "series-list"}}
<form class="filterbar" id="filterbar" method="get" action="/admin/series">
  <input type="hidden" name="kind" value="{{.Kind}}">
  <label class="fsel"><span>Filter</span><select name="filter" onchange="this.form.submit()" aria-label="Filter series — changes apply immediately">
    {{range .Filters}}<option value="{{.Name}}"{{if .Selected}} selected{{end}}>{{.Label}} ({{.Count}})</option>{{end}}
  </select></label>
  <label class="fsel"><span>Site</span><select name="site" onchange="this.form.submit()" aria-label="Filter by site — changes apply immediately">
    <option value=""{{if not .Site}} selected{{end}}>All sites</option>
    {{range .Sites}}<option value="{{.}}"{{if eq $.Site .}} selected{{end}}>{{.}}</option>{{end}}
  </select></label>
  <noscript><button type="submit" class="ghost">Apply</button></noscript>
  <span class="segrow">
    <a href="{{.KindBoth}}"{{if not .Kind}} class="active"{{end}}>both</a>
    <a href="{{.KindManga}}"{{if eq .Kind "manga"}} class="active"{{end}}>manga</a>
    <a href="{{.KindNovel}}"{{if eq .Kind "novel"}} class="active"{{end}}>novels</a>
  </span>
</form>
{{template "series-list-head" .}}
{{if .Rows}}
<div class="tbl series">
  <div class="thead"><span>Site</span><span class="c-ch">Ch</span><span>Checked</span><span class="c-rd">Readers</span><span>Notes</span><span></span></div>
  {{range .Rows}}{{template "series-row" .}}{{end}}
</div>
<div class="pager">
  {{if .PrevHref}}<a class="pg" href="{{.PrevHref}}">‹ prev</a>{{else}}<span class="pg disabled">‹ prev</span>{{end}}
  <span>{{.Range}}</span>
  {{if .NextHref}}<a class="pg" href="{{.NextHref}}">next ›</a>{{else}}<span class="pg disabled">next ›</span>{{end}}
</div>
{{else}}
<div class="empty"><strong>No series</strong><p>Nothing matches <em>{{.FilterLabel}}</em>.</p></div>
{{end}}
{{end}}

{{/* series-row is one Series list row, and the answer a Check now press swaps
     into the row's place (hx-target="closest .trow"): it must render the
     pending marker the press created. The control is absent on a Series with
     no page to fetch and on an orphan, so the owner is never offered a button
     that can never do anything. */}}
{{define "series-row"}}
<div class="trow{{if .Attention}} attention{{end}}{{if .Band}} band{{end}}" id="row-{{.Key}}">
  <span class="c-title"><a href="/admin/series/{{.Key}}">{{.Title}}</a>{{if .Pending}}<span class="mark">{{.Requested}}</span>{{end}}</span>
  <span class="c-site site-{{.Site}}">{{.Site}}</span>
  {{/* data-label is the column word for the phone layout, which drops the
       thead: "1200.25 3d 4" says nothing without it. */}}
  <span class="c-ch" data-label="ch">{{.Ch}}</span>
  <span data-label="checked">{{.Age}}</span>
  <span class="c-rd" data-label="readers">{{.Readers}}</span>
  <span class="c-note">{{if .Failure}}<span class="mark">{{.Failure}}</span>{{end}}{{range .Notes}}<span class="mark">{{.}}</span>{{end}}{{if .More}}<span class="mark mark-faint">+{{.More}}</span>{{end}}{{if .Finished}}<span class="mark mark-faint">finished</span>{{end}}</span>
  <span class="c-act">{{if .CanPoll}}<button type="button" class="ghost"
        hx-post="/admin/series/{{.Key}}/poll" hx-target="closest .trow" hx-swap="outerHTML"
        hx-indicator="closest .trow" hx-disabled-elt="this"
        hx-vals='{"band":{{if .Band}}1{{else}}0{{end}}}'>Check now</button>{{end}}{{if .CanRemove}}<button type="button" class="ghost danger"
        aria-expanded="false" aria-controls="confirm-remove-{{.Key}}"
        onclick="document.getElementById('confirm-remove-{{.Key}}').hidden = false; this.setAttribute('aria-expanded','true')">Remove</button>{{end}}</span>
  {{if .RemovalRefused}}<span class="row-msg">a Reader has bookmarked this Series again</span>{{end}}
  {{if .CanRemove}}<div class="confirm-row" id="confirm-remove-{{.Key}}" role="group" aria-live="polite" hidden>
    <span>Remove “{{.Title}}”? Progress is lost.</span>
    <div>
      <button type="button" class="danger-solid"
              hx-post="/admin/series/{{.Key}}/remove" hx-target="closest .trow" hx-swap="outerHTML"
              hx-include="#filterbar" hx-vals='{"band":{{if .Band}}1{{else}}0{{end}}}'
              hx-indicator="closest .trow" hx-disabled-elt="this">Remove</button>
      <button type="button" onclick="document.getElementById('confirm-remove-{{.Key}}').hidden = true; document.querySelector('#row-{{.Key}} .c-act .danger').setAttribute('aria-expanded','false')">Cancel</button>
    </div>
  </div>{{end}}
</div>
{{end}}

{{/* series-list-head is the list's heading — the count and the label are one
     fact. The removal answer renders it out of band (the OOB flag, like the
     chrome partials) so the heading never lies past the row that made it,
     and inline here it is the page's own heading. The id is the OOB swap's
     hook; hx-swap-oob sits on the element the answer carries. */}}
{{define "series-list-head"}}
<div class="listhead" id="series-listhead"{{if .OOB}} hx-swap-oob="true"{{end}}>{{.Total}} series <span class="lbl">· <em>{{.FilterLabel}}</em></span></div>
{{end}}