{% props q: String = "", placeholder: String = "Filter…", params: String = "", page: i64 = 1, pages: i64 = 1, per: i64 = 10, selected: i64 = 0, total: i64 = 0, toolbar: Slot = Slot::default(), inner_block: Slot %}
{#- A GET form. inner_block: the table's thead and tbody; toolbar: facet filters, reset, view options; params: the query without page (q=…&sort=…), kept by the pager's links. #}
{%- let link = |n: i64| if params.is_empty() { format!("?page={n}&per={per}") } else { format!("?{params}&page={n}&per={per}") } %}
<form class="ui-dt" method="get" data-ui="data-table">
<div class="ui-dt-toolbar">
<input class="ui-input" type="search" name="q" value="{{ q }}" placeholder="{{ placeholder }}" aria-label="{{ placeholder }}">
{{ toolbar }}
</div>
<div class="ui-dt-frame"><div class="ui-table-wrap"><table class="ui-table">{{ inner_block }}</table></div></div>
<div class="ui-dt-footer"><span class="ui-muted">{{ selected }} of {{ total }} row(s) selected.</span>
<div class="ui-dt-pager"><span style="display:flex;align-items:center;gap:8px;font-weight:500">Rows per page<span class="ui-select-wrap" style="width:72px"><select class="ui-native-select" name="per" aria-label="Rows per page">{% for n in [10_i64, 20, 50] %}<option{% if n == per %} selected{% end %}>{{ n }}</option>{% end %}</select><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span></span>
<span style="font-weight:500">Page {{ page }} of {{ pages }}</span>
<span class="ui-row" style="gap:4px"><a class="ui-btn" data-variant="outline" data-size="icon-sm" aria-label="First page"{% if page <= 1 %} aria-disabled="true"{% end %} href="{{ link(1) }}"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg></a><a class="ui-btn" data-variant="outline" data-size="icon-sm" aria-label="Previous page"{% if page <= 1 %} aria-disabled="true"{% end %} href="{{ link((page - 1).max(1)) }}"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></a><a class="ui-btn" data-variant="outline" data-size="icon-sm" aria-label="Next page"{% if page >= pages %} aria-disabled="true"{% end %} href="{{ link((page + 1).min(pages)) }}"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></a><a class="ui-btn" data-variant="outline" data-size="icon-sm" aria-label="Last page"{% if page >= pages %} aria-disabled="true"{% end %} href="{{ link(pages) }}"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg></a></span></div></div>
</form>