{{ define "operator_tools_pattern.html" }}
{{ template "demo_doc_start" . }}
    {{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Universal operator/admin dashboard pattern: tool queue, batch actions, safety checks, import/export shortcuts, and explicit confirmation paths." "back_url" "/" "back_text" "← Back to catalog") }}

    <section class="panel panel-composite" id="operator-workbench">
      <div class="panel-subsection" id="operator-filters">
      <div class="panel-head">
        <h2>Tool Scope Tabs</h2>
        <div class="meta">{{ .VisibleCount }} visible jobs · {{ .SelectedCount }} selected</div>
      </div>
      <div class="operator-toolbar operator-scope-toolbar" role="toolbar" aria-label="Scope and queue filters">
        <div class="tool-group" role="group" aria-label="Tool scope">
          <a class="tool-btn tool-tab {{ if eq .Scope "assets" }}active{{ end }}" href="{{ index .ScopeURLs "assets" }}">Assets</a>
          <a class="tool-btn tool-tab {{ if eq .Scope "components" }}active{{ end }}" href="{{ index .ScopeURLs "components" }}">Components</a>
          <a class="tool-btn tool-tab {{ if eq .Scope "imports" }}active{{ end }}" href="{{ index .ScopeURLs "imports" }}">Imports</a>
          <a class="tool-btn tool-tab {{ if eq .Scope "maintenance" }}active{{ end }}" href="{{ index .ScopeURLs "maintenance" }}">Maintenance</a>
          <a class="tool-btn tool-tab {{ if eq .Scope "all" }}active{{ end }}" href="{{ index .ScopeURLs "all" }}">All</a>
        </div>
        <div class="tool-group" role="group" aria-label="Queue status">
          <a class="tool-btn tool-tab {{ if eq .Queue "all" }}active{{ end }}" href="{{ index .QueueURLs "all" }}">All queue states</a>
          <a class="tool-btn tool-tab {{ if eq .Queue "queued" }}active{{ end }}" href="{{ index .QueueURLs "queued" }}">Queued</a>
          <a class="tool-btn tool-tab {{ if eq .Queue "running" }}active{{ end }}" href="{{ index .QueueURLs "running" }}">Running</a>
          <a class="tool-btn tool-tab {{ if eq .Queue "failed" }}active{{ end }}" href="{{ index .QueueURLs "failed" }}">Failed</a>
          <a class="tool-btn tool-tab {{ if eq .Queue "done" }}active{{ end }}" href="{{ index .QueueURLs "done" }}">Done</a>
        </div>
      </div>
      </div>

      <div class="panel-subsection panel-subsection-divider" id="operator-queue">
      <div class="panel-head">
        <h2>Operations Queue</h2>
        <div class="meta">Complex dashboards may include multiple tables; standardize row actions and statuses first.</div>
      </div>
      {{ if .ActionMessage }}<div class="notice">{{ .ActionMessage }}</div>{{ end }}
      <p class="meta" style="margin-bottom:12px;">
        Selected on this view: {{ .SelectedVisible }}{{ if gt .SelectionOutside 0 }} · Selected outside current filter: {{ .SelectionOutside }}{{ end }}
      </p>
      <div class="meta" style="margin-bottom:12px;">Batch controls must keep scope/filter context explicit.</div>
      <div class="table-toolbar" role="toolbar" aria-label="Operator tooling actions">
        <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="{{ .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="{{ .ClearSelectionURL }}" title="Clear selection" aria-label="Clear selection"><svg class="tool-svg" aria-hidden="true"><use href="#ico-clear-selection"></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="{{ .RunSelectedURL }}" title="Run selected" aria-label="Run selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-run"></use></svg></a>
            <a class="tool-icon-btn tool-icon-btn-danger" href="{{ .CancelSelectedURL }}" title="Cancel selected" aria-label="Cancel selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-cancel"></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="{{ .ImportPreviewURL }}" title="Import batch preview" aria-label="Import batch preview"><svg class="tool-svg" aria-hidden="true"><use href="#ico-import"></use></svg></a>
            <a class="tool-icon-btn" href="{{ .ExportFilteredURL }}" title="Export filtered" aria-label="Export filtered"><svg class="tool-svg" aria-hidden="true"><use href="#ico-export-filtered"></use></svg></a>
            <a class="tool-icon-btn" href="{{ .ExportSelectedURL }}" 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="{{ .RetrySelectedURL }}" title="Retry selected" aria-label="Retry selected"><svg class="tool-svg" aria-hidden="true"><use href="#ico-retry"></use></svg></a>
            <a class="tool-icon-btn" href="{{ .OpenReviewModalURL }}" title="Open confirm modal" aria-label="Open confirm modal"><svg class="tool-svg" aria-hidden="true"><use href="#ico-confirm"></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="{{ index .ScopeURLs "all" }}" title="All scope" aria-label="All scope"><svg class="tool-svg" aria-hidden="true"><use href="#ico-scope"></use></svg></a>
            <a class="tool-icon-btn" href="{{ index .QueueURLs "all" }}" title="All queue states" aria-label="All queue states"><svg class="tool-svg" aria-hidden="true"><use href="#ico-queue"></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>Job ID</th>
              <th>Tool</th>
              <th>Scope</th>
              <th>Mode</th>
              <th>Status</th>
              <th>Owner</th>
              <th>Started</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 {{ .ID }}">{{ if .Selected }}☑{{ else }}☐{{ end }}</a></td>
              <td class="job-id-cell"><code>{{ .ID }}</code></td>
              <td>{{ .Tool }}</td>
              <td>{{ .Scope }}</td>
              <td>{{ .Mode }}</td>
              <td><span class="status status-{{ .Status }}">{{ .Status }}</span></td>
              <td>{{ .Owner }}</td>
              <td>{{ .StartedAt }}</td>
              <td class="action-cell action-icons actions-col">
                <a class="icon-link" href="{{ .RetryURL }}" title="Retry" aria-label="Retry"><svg class="tool-svg" aria-hidden="true"><use href="#ico-retry"></use></svg></a>
                <a class="icon-link icon-link-danger" href="{{ .CancelURL }}" title="Cancel" aria-label="Cancel"><svg class="tool-svg" aria-hidden="true"><use href="#ico-cancel"></use></svg></a>
                <a class="icon-link" href="{{ .ExportURL }}" title="Export" aria-label="Export"><svg class="tool-svg" aria-hidden="true"><use href="#ico-export"></use></svg></a>
                <a class="icon-link" href="{{ .InspectURL }}" title="Inspect" aria-label="Inspect"><svg class="tool-svg" aria-hidden="true"><use href="#ico-inspect"></use></svg></a>
              </td>
            </tr>
            {{ else }}
            <tr><td colspan="9"><span class="meta">No queued items for this scope/filter combination.</span></td></tr>
            {{ end }}
          </tbody>
        </table>
      </div>
      </div>
    </section>

    <section class="panel" id="operator-safety">
      <div class="panel-head"><h2>Safety Checklist</h2></div>
      <ul class="meta">
        {{ range .SafetyChecklist }}
        <li>{{ . }}</li>
        {{ end }}
      </ul>
      <div class="panel-head" style="margin-top:14px;"><h2>Recent Operator Notes</h2></div>
      <ul class="meta">
        {{ range .RecentActivityNotes }}
        <li>{{ . }}</li>
        {{ end }}
      </ul>
    </section>
{{ template "demo_doc_end" . }}
{{ end }}