{{ 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 segmented-wide" role="toolbar" aria-label="Segmented status filter">
        <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="table-toolbar" role="toolbar" aria-label="Selection controls">
        <div class="toolbar-group" role="group" aria-label="Selection">
          <div class="toolbar-group-title">Selection</div>
          <div class="toolbar-group-buttons">
            <a class="tool-icon-btn" href="{{ .SelectVisibleURL }}" title="Select visible" aria-label="Select visible"><svg class="tool-svg" aria-hidden="true"><use href="#ico-select-visible"></use></svg></a>
            <a class="tool-icon-btn" href="{{ .SelectFilteredURL }}" title="Select filtered" aria-label="Select filtered"><svg class="tool-svg" aria-hidden="true"><use href="#ico-select-filtered"></use></svg></a>
            <a class="tool-icon-btn" href="{{ .ClearVisibleURL }}" title="Clear visible" aria-label="Clear visible"><svg class="tool-svg" aria-hidden="true"><use href="#ico-clear-visible"></use></svg></a>
            <a class="tool-icon-btn" href="{{ .ClearFilteredURL }}" title="Clear filtered" aria-label="Clear filtered"><svg class="tool-svg" aria-hidden="true"><use href="#ico-clear-filtered"></use></svg></a>
          </div>
        </div>
        <div class="toolbar-group" role="group" aria-label="Actions">
          <div class="toolbar-group-title">Actions</div>
          <div class="toolbar-group-buttons">
            <a class="tool-icon-btn tool-icon-btn-primary" href="{{ .OpenEditSelectedURL }}" title="Edit selected" aria-label="Edit selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-edit"></use></svg></a>
            <a class="tool-icon-btn tool-icon-btn-danger" href="{{ .OpenDeleteSelectedURL }}" title="Remove selected" aria-label="Remove selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-remove"></use></svg></a>
          </div>
        </div>
        <div class="toolbar-group" role="group" aria-label="Import and export">
          <div class="toolbar-group-title">Import/Export</div>
          <div class="toolbar-group-buttons">
            <a class="tool-icon-btn" href="/patterns/io" title="Import" aria-label="Import"><svg class="tool-svg" aria-hidden="true"><use href="#ico-import"></use></svg></a>
            <a class="tool-icon-btn" href="{{ .BulkExportURL }}" title="Export selected" aria-label="Export selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-export-selected"></use></svg></a>
          </div>
        </div>
        <div class="toolbar-group" role="group" aria-label="Task actions">
          <div class="toolbar-group-title">Task Actions</div>
          <div class="toolbar-group-buttons">
            <a class="tool-icon-btn" href="{{ .BulkReviewURL }}" title="Mark for review" aria-label="Mark for review"><svg class="tool-svg" aria-hidden="true"><use href="#ico-review"></use></svg></a>
            <a class="tool-icon-btn" href="{{ .BulkRetrySyncURL }}" title="Retry sync" aria-label="Retry sync"><svg class="tool-svg" aria-hidden="true"><use href="#ico-retry"></use></svg></a>
          </div>
        </div>
        <div class="toolbar-group" role="group" aria-label="Misc">
          <div class="toolbar-group-title">Misc</div>
          <div class="toolbar-group-buttons">
            <a class="tool-icon-btn" href="{{ .ClearSelectionURL }}" title="Clear selection" aria-label="Clear selection"><svg class="tool-svg" aria-hidden="true"><use href="#ico-clear-selection"></use></svg></a>
            <a class="tool-icon-btn tool-icon-btn-danger" href="{{ .BulkArchiveURL }}" title="Archive" aria-label="Archive"><svg class="tool-svg" aria-hidden="true"><use href="#ico-remove"></use></svg></a>
          </div>
        </div>
      </div>

      <div class="table-wrap">
        <table class="ui-table">
          <thead>
            <tr>
              <th class="select-col" aria-label="Select"></th>
              <th>Name</th>
              <th>Category</th>
              <th>Status</th>
              <th class="actions-col" aria-label="Actions"></th>
            </tr>
          </thead>
          <tbody>
            {{ range .Rows }}
            <tr>
              <td class="select-col"><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 action-icons actions-col">
                <a class="icon-link" href="{{ .EditURL }}" title="Edit" aria-label="Edit"><svg class="tool-svg" aria-hidden="true"><use href="#ico-edit"></use></svg></a>
                <a class="icon-link icon-link-danger" href="{{ .RemoveURL }}" title="Remove" aria-label="Remove"><svg class="tool-svg" aria-hidden="true"><use href="#ico-remove"></use></svg></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 }}