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>Show</span><select name="filter" onchange="this.form.submit()">
    {{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()">
    <option value=""{{if not .Site}} selected{{end}}>All sites</option>
    {{range .Sites}}<option value="{{.}}"{{if eq $.Site .}} selected{{end}}>{{.}}</option>{{end}}
  </select></label>
  <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}}">
  <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>
  <span class="c-ch">{{.Ch}}</span>
  <span>{{.Age}}</span>
  <span class="c-rd">{{.Readers}}</span>
  <span class="c-note">{{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}}<a class="ghost act" hx-post="/admin/series/{{.Key}}/poll" hx-target="closest .trow" hx-swap="outerHTML" hx-vals='{"band":{{if .Band}}1{{else}}0{{end}}}' href="#">Check now</a>{{end}}{{if .CanRemove}}<button class="ghost danger" 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-confirm="Removes this series and its stored cover. No Reader has it bookmarked; one re-bookmarking it recreates the row.">Remove</button>{{end}}</span>
  {{if .RemovalRefused}}<span class="row-msg">a Reader has bookmarked this Series again</span>{{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}}