{% props page: i64, per_page: i64, total: i64, noun: String, path: String, filtered: bool = false %}
{#- `path` keeps the current query string; links add `page=N` to it. Shows the first and last page, the current one and its neighbours. -#}
{%- let pages = ((total + per_page - 1) / per_page).max(1) %}
{%- let from = if total == 0 { 0 } else { (page - 1) * per_page + 1 } %}
{%- let to = (page * per_page).min(total) %}
{%- let join = if path.contains('?') { "&" } else { "?" } %}
{%- let links = {
let mut shown: Vec<i64> = vec![1, page - 1, page, page + 1, pages].into_iter().filter(|n| *n >= 1 && *n <= pages).collect();
shown.dedup();
let mut links = Vec::new();
for (i, n) in shown.iter().enumerate() {
if i > 0 && *n > shown[i - 1] + 1 { links.push((0, shown[i - 1] + 1, *n - 1)); }
links.push((*n, 0, 0));
}
links
} %}
<div class="ui-pagination-bar">
<p class="ui-pagination-summary" aria-live="polite">Showing <strong>{{ from }}–{{ to }}</strong> of <strong>{{ total }}</strong> {{ noun }}{% if filtered %} <.badge variant="secondary">Filtered</.badge>{% end %}</p>
{%- if pages > 1 %}
<nav class="ui-pagination" aria-label="Pagination">
<ul>
{%- if page > 1 %}
<li><a class="ui-page-link" href="{{ path }}{{ join }}page={{ page - 1 }}" rel="prev"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>Previous</a></li>
{%- end %}
{%- for (n, gap_from, gap_to) in links.iter() %}
{%- if *n == 0 %}
<li><span class="ui-page-ellipsis"><span class="ui-sr-only">{% if gap_from == gap_to %}Page {{ gap_from }} omitted{% else %}Pages {{ gap_from }} to {{ gap_to }} omitted{% end %}</span><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></span></li>
{%- else %}
<li><a class="ui-page-link" href="{{ path }}{{ join }}page={{ n }}"{% if *n == page %} aria-current="page"{% end %}>{{ n }}</a></li>
{%- end %}
{%- end %}
{%- if page < pages %}
<li><a class="ui-page-link" href="{{ path }}{{ join }}page={{ page + 1 }}" rel="next">Next<svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></a></li>
{%- end %}
</ul>
</nav>
{%- end %}
</div>