Add data-driven pagination partial (todo §1); rows-per-page GET form + page-number links, zero-JS, query-param driven

views/partials/pagination.ejs

@@ -0,0 +1,60 @@
+<%#
+  Pagination footer: rows-per-page (GET form) + page numbers. Query-param driven, zero-JS.
+  Mirrors html-css-foundation markup; page items are <a>, inert ones (current/ellipsis/disabled) aren't.
+  Config (all optional; never throws):
+    label?    nav aria-label (default "Pagination")
+    summary?  { from, to, total }                                        → "from–to of <b>total</b>"
+    rows?     { name, value?, options, label?, submitLabel?, action?, hidden? }   rows-per-page form
+                options: (number | { value, label })[]; hidden: { name, value }[] carries list state
+    prev?, next?  { href? }                                              page step; omit href ⇒ disabled
+    pages?    { label, href?, current?, ellipsis? }[]
+%><%
+  const label = locals.label || "Pagination";
+  const summary = locals.summary;
+  const rows = locals.rows;
+  const prev = locals.prev;
+  const next = locals.next;
+  const pages = locals.pages || [];
+  const eq = (a, b) => String(a ?? "") === String(b);
+-%>
+<footer class="pager">
+<% if (summary) { -%>
+  <span><%= summary.from %>–<%= summary.to %> of <b><%= summary.total %></b></span>
+<% } -%>
+<% if (rows) { -%>
+  <form class="pager-rows" method="get"<% if (rows.action) { %> action="<%= rows.action %>"<% } %>>
+<% (rows.hidden || []).forEach((h) => { -%>
+    <input type="hidden" name="<%= h.name %>" value="<%= h.value %>">
+<% }) -%>
+    <label for="pager-rows"><%= rows.label || "Rows" %></label>
+    <span class="select"><select id="pager-rows" name="<%= rows.name %>"><% (rows.options || []).forEach((o) => { const v = o && o.value != null ? o.value : o; const t = o && o.label != null ? o.label : o; %><option value="<%= v %>"<% if (eq(rows.value, v)) { %> selected<% } %>><%= t %></option><% }) %></select></span>
+    <button class="page-btn" type="submit"><%= rows.submitLabel || "Go" %></button>
+  </form>
+<% } -%>
+  <div class="spacer"></div>
+  <nav class="page-nums" aria-label="<%= label %>">
+<% if (prev) { -%>
+<% if (prev.href) { -%>
+    <a class="page-btn" href="<%= prev.href %>" aria-label="Previous page"><svg class="ico ico-sm" style="transform:rotate(180deg)"><use href="#i-chev"/></svg></a>
+<% } else { -%>
+    <button class="page-btn" type="button" disabled aria-label="Previous page"><svg class="ico ico-sm" style="transform:rotate(180deg)"><use href="#i-chev"/></svg></button>
+<% } -%>
+<% } -%>
+<% pages.forEach((p) => { -%>
+<% if (p.ellipsis) { -%>
+    <span class="page-btn" aria-hidden="true"><%= p.label || "…" %></span>
+<% } else if (p.current) { -%>
+    <span class="page-btn" aria-current="page"><%= p.label %></span>
+<% } else { -%>
+    <a class="page-btn" href="<%= p.href %>"><%= p.label %></a>
+<% } -%>
+<% }) -%>
+<% if (next) { -%>
+<% if (next.href) { -%>
+    <a class="page-btn" href="<%= next.href %>" aria-label="Next page"><svg class="ico ico-sm"><use href="#i-chev"/></svg></a>
+<% } else { -%>
+    <button class="page-btn" type="button" disabled aria-label="Next page"><svg class="ico ico-sm"><use href="#i-chev"/></svg></button>
+<% } -%>
+<% } -%>
+  </nav>
+</footer>