bible/demo/web/templates/controls_pattern.html

{{ define "controls_pattern.html" }}
{{ template "demo_doc_start" . }}
    {{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Canonical actions, segmented filters, row selection and bulk-action control bar." "back_url" "/" "back_text" "← Back to catalog") }}

    <section class="panel" id="controls-buttons">
      <div class="panel-head"><h2>Buttons</h2></div>
      <div class="button-demo-row">
        <button class="btn btn-primary" type="button">Apply changes</button>
        <button class="btn btn-secondary" type="button">Review selection</button>
        <button class="btn btn-danger" type="button">Archive selected</button>
        <button class="btn btn-ghost" type="button">Reset filters</button>
        <button class="btn" type="button" disabled>Disabled</button>
        {{ if .SimulateLoading }}
        <a class="btn btn-secondary is-loading" aria-disabled="true" href="{{ .ClearLoadingURL }}">Loading…</a>
        {{ else }}
        <a class="btn btn-secondary" href="{{ .SimulateLoadingURL }}">Simulate loading</a>
        {{ end }}
      </div>
      <div class="button-demo-row">
        <a class="btn btn-primary" href="/patterns/io?export_ready=1">Export</a>
        <a class="btn btn-secondary" href="/patterns/io">Import</a>
        <a class="btn btn-ghost" href="/patterns/modals?open=edit&stage=edit#modal-open-states">Open modal</a>
      </div>
    </section>

    <section class="panel panel-composite" id="controls-workbench">
      <div class="panel-subsection" id="controls-segments">
      <div class="panel-head">
        <h2>Segmented Status Filter</h2>
        <div class="meta">{{ .Pager.TotalItems }} filtered · page {{ .Pager.Page }}/{{ .Pager.TotalPages }} · {{ .SelectedCount }} selected</div>
      </div>
      <div class="segmented">
        <a class="segment {{ if eq .Segment "all" }}active{{ end }}" href="{{ index .SegmentURLs "all" }}">All ({{ index .SegmentedCounts "all" }})</a>
        <a class="segment {{ if eq .Segment "ready" }}active{{ end }}" href="{{ index .SegmentURLs "ready" }}">Ready ({{ index .SegmentedCounts "ready" }})</a>
        <a class="segment {{ if eq .Segment "warning" }}active{{ end }}" href="{{ index .SegmentURLs "warning" }}">Warning ({{ index .SegmentedCounts "warning" }})</a>
        <a class="segment {{ if eq .Segment "review" }}active{{ end }}" href="{{ index .SegmentURLs "review" }}">Review ({{ index .SegmentedCounts "review" }})</a>
      </div>
      </div>

      <div class="panel-subsection panel-subsection-divider" id="controls-selection">
      <div class="panel-head">
        <h2>Selection Table</h2>
        <div class="meta">Checkbox rows + bulk action preview + global selection across pages</div>
      </div>

      {{ if .ActionMessage }}<div class="notice">{{ .ActionMessage }}</div>{{ end }}
      <p class="meta" style="margin-bottom:12px;">
        Visible on this page: {{ .VisibleCount }} · Selected on this page: {{ .SelectedVisible }}{{ if gt .SelectedHidden 0 }} · Selected on other page(s): {{ .SelectedHidden }}{{ end }}
      </p>

      <div class="bulk-bar">
        <a class="btn btn-secondary" href="{{ .SelectVisibleURL }}">Select visible</a>
        <a class="btn btn-secondary" href="{{ .SelectFilteredURL }}">Select filtered</a>
        <a class="btn btn-secondary" href="{{ .ClearVisibleURL }}">Clear visible</a>
        <a class="btn btn-secondary" href="{{ .ClearFilteredURL }}">Clear filtered</a>
        <a class="btn btn-primary" href="{{ .OpenEditSelectedURL }}">Edit selected</a>
        <a class="btn btn-secondary" href="{{ .OpenDeleteSelectedURL }}">Remove selected</a>
        <a class="btn btn-ghost" href="{{ .ClearSelectionURL }}">Clear selection</a>
        <details class="inline-menu">
          <summary class="btn btn-secondary">More actions</summary>
          <div class="inline-menu-list">
            <a class="menu-item" href="{{ .BulkReviewURL }}">Mark for review</a>
            <a class="menu-item" href="{{ .BulkExportURL }}">Export selected</a>
            <a class="menu-item" href="{{ .BulkRetrySyncURL }}">Retry sync</a>
            <a class="menu-item danger" href="{{ .BulkArchiveURL }}">Archive</a>
          </div>
        </details>
      </div>

      <div class="table-wrap">
        <table class="ui-table">
          <thead>
            <tr>
              <th>Select</th>
              <th>Name</th>
              <th>Category</th>
              <th>Status</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {{ range .Rows }}
            <tr>
              <td><a class="check-toggle {{ if .Selected }}checked{{ end }}" href="{{ .ToggleURL }}" aria-label="Toggle row {{ .ID }}">{{ if .Selected }}☑{{ else }}☐{{ end }}</a></td>
              <td>{{ .Name }}</td>
              <td>{{ .Type }}</td>
              <td><span class="status status-{{ .Status }}">{{ .Status }}</span></td>
              <td class="action-cell">
                <a class="text-link" href="{{ .EditURL }}">Edit</a>
                <a class="text-link" href="{{ .RemoveURL }}">Remove</a>
              </td>
            </tr>
            {{ end }}
          </tbody>
        </table>
      </div>

      {{ if gt .Pager.TotalPages 1 }}
      <nav class="pager pager-dots" aria-label="Pagination">
        {{ range .Pager.Links }}
          {{ if .Ellipsis }}
          <span class="ellipsis" aria-hidden="true">…</span>
          {{ else if .Current }}
          <a class="current" aria-current="page" href="{{ .URL }}" aria-label="Page {{ .Label }}, current">{{ .Label }}</a>
          {{ else }}
          <a href="{{ .URL }}" aria-label="Go to page {{ .Label }}">{{ .Label }}</a>
          {{ end }}
        {{ end }}
      </nav>
      {{ end }}
      </div>
    </section>
{{ template "demo_doc_end" . }}
{{ end }}