<%# Filter bar: a real GET form so filtering is server-side and zero-JS. Mirrors the html-css-foundation markup. Config: rows: Control[][] rows of controls, laid out left→right pills, clearHref, label, action, applyLabel Control.type ∈ search | segmented | select | chips | daterange | spacer. search { name, placeholder?, value?, label? } segmented { name, legend?, value?, options:{value,label,count?}[] } (radios) select { name, label, value?, options:{value,label}[] } chips { name, legend?, value?:string[], options:{value,label}[] } (checkboxes) daterange { legend?, from:{name,value?,label?}, to:{name,value?,label?} } %><% const action = locals.action || ""; const label = locals.label || "Filter"; const rows = locals.rows || []; const pills = locals.pills || []; const clearHref = locals.clearHref || "?"; const applyLabel = locals.applyLabel || "Apply filters"; const eq = (a, b) => String(a ?? "") === String(b); -%>

action="<%= action %>"<% } %> aria-label="<%= label %>"> <% rows.forEach((row) => { -%>

<% row.forEach((c) => { -%> <% if (c.type === "search") { -%> "<% if (c.value) { %> value="<%= c.value %>"<% } %>> <% } else if (c.type === "segmented") { -%>

<% c.options.forEach((o) => { %> checked<% } %>><%= o.label %><% if (o.count != null) { %><%= o.count %><% } %><% }) %>

<% } else if (c.type === "select") { -%> <% } else if (c.type === "chips") { -%>

<% (c.options).forEach((o) => { const on = (c.value || []).map(String).includes(String(o.value)); %> checked<% } %>><%= o.label %><% }) %>

<% } else if (c.type === "daterange") { -%>

value="<%= c.from.value %>"<% } %>> value="<%= c.to.value %>"<% } %>>

<% } else if (c.type === "spacer") { -%>

<% } -%> <% }) -%>

<% }) -%>

<% if (pills.length) { -%>

Applied<% pills.forEach((p) => { %><%= p.label %>: <%= p.value %> <% }) %>Clear all

<% } -%>