{{/* operator_list_controls.html
     Shared controls for governed operator lists (operator-list-scale).
     Defines, all taking a server.ListNav:

       listSearch   — the search form alone. Input names come from the
                      nav's QParam (parameter prefix applied) so several
                      embedded lists can share one URL; sibling-list state
                      (nav.ExtraInputs) rides along as hidden inputs
                      because a GET form replaces the whole query string.
       listControls — listSearch + optional facet pills, rendered above
                      the table (the standalone-page layout). Facet pills
                      are links (one click to set, "All" to clear), the
                      active pill marked.
       listTabs     — the nav-tabs rendering of FacetOptions, for embedded
                      lists whose facet is a small set of modes (e.g. the
                      grants ledger's Active/History). Unlike the pills
                      there is no synthetic "All": an option with Value ""
                      IS the default mode, so give it a real label.
                      Rendered inside a .card-header (card-header-tabs).
       listPager    — "Showing X–Y of N", the page-size picker when the
                      nav offers options, and Previous/Next, rendered
                      below the table. The true total comes from the
                      paged query's count(*) OVER() (design D2).
       listNoMatch  — the searched-or-filtered-to-nothing state, distinct
                      from the list's true-empty state (which
                      empty-state-guidance owns): names the term, links
                      back to the bare list.

     When nav.Target is set (embedded lists), every control issues a
     scoped htmx request — hx-get with hx-target/hx-select on the panel's
     selector, outerHTML swap, URL pushed — so only that panel re-renders
     and the page never scrolls (scroll-into-view is opt-in in htmx; a
     boosted full-page navigation is what jumps to the top). The plain
     href/action stays as the no-JS fallback.
*/}}

{{ define "listSearch" }}
<form method="get" action="{{ .BasePath }}" class="d-flex align-items-center gap-2 flex-grow-1" role="search"{{ if .Target }} hx-get="{{ .BasePath }}" hx-target="{{ .Target }}" hx-select="{{ .Target }}"{{ if .SyncSelect }} hx-select-oob="{{ .SyncSelect }}"{{ end }} hx-swap="outerHTML" hx-push-url="true"{{ end }}>
    {{ range $k, $vs := .ExtraInputs }}{{ range $vs }}<input type="hidden" name="{{ $k }}" value="{{ . }}">{{ end }}{{ end }}
    {{ if and .Facet .FacetParam }}<input type="hidden" name="{{ .FacetParam }}" value="{{ .Facet }}">{{ end }}
    {{ if .PerPageOffDefault }}<input type="hidden" name="{{ .PerParam }}" value="{{ .PerPage }}">{{ end }}
    <input type="search" name="{{ .QParam }}" value="{{ .Q }}" class="form-control form-control-sm w-auto flex-grow-1" placeholder="{{ .SearchPlaceholder }}" aria-label="Search this list">
    <button type="submit" class="btn btn-outline-secondary btn-sm">Search</button>
    {{ if .Q }}<a class="btn btn-link btn-sm px-1" href="{{ .ClearSearchURL }}"{{ if .Target }} hx-get="{{ .ClearSearchURL }}" hx-target="{{ .Target }}" hx-select="{{ .Target }}"{{ if .SyncSelect }} hx-select-oob="{{ .SyncSelect }}"{{ end }} hx-swap="outerHTML" hx-push-url="true"{{ end }}>Clear</a>{{ end }}
</form>
{{ end }}

{{ define "listControls" }}
<div class="d-flex flex-wrap align-items-center gap-2 mb-3">
    {{ template "listSearch" . }}
    {{ if .FacetOptions }}
    {{/* The pill list may shrink and wrap: an unshrinkable list of eight
         status pills is wider than a phone, and a flex item wider than the
         viewport widens the whole page (page-anatomy H7). */}}
    <ul class="nav nav-pills">
        <li class="nav-item"><a class="nav-link py-1 px-2 small {{ if not .Facet }}active{{ end }}" href="{{ .FacetURL "" }}">All</a></li>
        {{ range .FacetOptions }}
        <li class="nav-item"><a class="nav-link py-1 px-2 small {{ if $.FacetActive .Value }}active{{ end }}" href="{{ $.FacetURL .Value }}">{{ .Label }}</a></li>
        {{ end }}
    </ul>
    {{ end }}
</div>
{{ end }}

{{ define "listTabs" }}
<ul class="nav nav-tabs card-header-tabs">
    {{ range .FacetOptions }}
    <li class="nav-item"><a class="nav-link {{ if $.FacetActive .Value }}active{{ end }}" href="{{ $.FacetURL .Value }}"{{ if $.Target }} hx-get="{{ $.FacetURL .Value }}" hx-target="{{ $.Target }}" hx-select="{{ $.Target }}"{{ if $.SyncSelect }} hx-select-oob="{{ $.SyncSelect }}"{{ end }} hx-swap="outerHTML" hx-push-url="true"{{ end }}>{{ .Label }}</a></li>
    {{ end }}
</ul>
{{ end }}

{{ define "listPager" }}
{{ if gt .Total 0 }}
<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mt-2">
    <p class="small text-body-secondary mb-0">{{ .Showing }}</p>
    {{ if .PerPageOptions }}
    <p class="small text-body-secondary mb-0">Per page:
        {{ range .PerPageOptions }}
        {{ if $.PerPageActive . }}<strong>{{ . }}</strong>{{ else }}<a href="{{ $.PerPageURL . }}"{{ if $.Target }} hx-get="{{ $.PerPageURL . }}" hx-target="{{ $.Target }}" hx-select="{{ $.Target }}"{{ if $.SyncSelect }} hx-select-oob="{{ $.SyncSelect }}"{{ end }} hx-swap="outerHTML" hx-push-url="true"{{ end }}>{{ . }}</a>{{ end }}
        {{ end }}
    </p>
    {{ end }}
    {{ if gt .Pages 1 }}
    <nav aria-label="List pages">
        <ul class="pagination pagination-sm mb-0">
            <li class="page-item {{ if not .HasPrev }}disabled{{ end }}"><a class="page-link" href="{{ .PrevURL }}" {{ if not .HasPrev }}aria-disabled="true" tabindex="-1"{{ end }}{{ if and .Target .HasPrev }} hx-get="{{ .PrevURL }}" hx-target="{{ .Target }}" hx-select="{{ .Target }}"{{ if .SyncSelect }} hx-select-oob="{{ .SyncSelect }}"{{ end }} hx-swap="outerHTML" hx-push-url="true"{{ end }}>Previous</a></li>
            <li class="page-item disabled"><span class="page-link">Page {{ .Page }} of {{ .Pages }}</span></li>
            <li class="page-item {{ if not .HasNext }}disabled{{ end }}"><a class="page-link" href="{{ .NextURL }}" {{ if not .HasNext }}aria-disabled="true" tabindex="-1"{{ end }}{{ if and .Target .HasNext }} hx-get="{{ .NextURL }}" hx-target="{{ .Target }}" hx-select="{{ .Target }}"{{ if .SyncSelect }} hx-select-oob="{{ .SyncSelect }}"{{ end }} hx-swap="outerHTML" hx-push-url="true"{{ end }}>Next</a></li>
        </ul>
    </nav>
    {{ end }}
</div>
{{ end }}
{{ end }}

{{ define "listNoMatch" }}
<div class="text-center py-4">
    <p class="mb-1">No rows match{{ if .Q }} &quot;{{ .Q }}&quot;{{ end }}{{ if .Facet }}{{ if .Q }} with{{ else }} with{{ end }} the current filter{{ end }}.</p>
    <p class="small text-body-secondary mb-0"><a href="{{ .BasePath }}"{{ if .Target }} hx-get="{{ .BasePath }}" hx-target="{{ .Target }}" hx-select="{{ .Target }}"{{ if .SyncSelect }} hx-select-oob="{{ .SyncSelect }}"{{ end }} hx-swap="outerHTML" hx-push-url="true"{{ end }}>Clear search and filters</a></p>
</div>
{{ end }}