admindb 2.4.1 → 2.5.0

package/dist/views/pages/table.hbs

@@ -1 +1 @@
-<div class="space-y-5">
  <div class="page-header">
    <div class="page-header-row flex-wrap lg:flex-nowrap">
      <div class="flex items-center gap-3.5">
        <span class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-primary/10 text-primary border border-primary/20">
          {{{icon "table" class="h-5 w-5"}}}
        </span>
        <div>
          <div class="page-pretitle">Table Browser</div>
          <div class="flex items-center gap-2">
            <h1 class="page-title font-mono text-xl sm:text-2xl">{{table}}</h1>
            {{#if isPostgres}}
              <span class="rounded bg-info/15 px-2 py-0.5 text-[10px] font-bold font-sans text-info border border-info/20">PostgreSQL</span>
            {{else}}
              <span class="rounded bg-emerald-500/15 px-2 py-0.5 text-[10px] font-bold font-sans text-emerald-600 dark:text-emerald-400 border border-emerald-500/20">SQLite</span>
            {{/if}}
          </div>
          <p class="text-xs text-base-content/55 mt-0.5">
            {{count}} row(s) · {{info.columns.length}} column(s)
            {{#if pkCols.length}}· PK <span class="font-mono font-semibold text-primary">{{join pkCols ", "}}</span>{{/if}}
          </p>
        </div>
      </div>
      <div class="page-actions flex-wrap">
        <a href="{{basePath}}/schema/{{encodeUri dbId}}/{{encodeUri table}}" class="btn btn-ghost btn-sm gap-1.5">
          {{{icon "schema" class="h-4 w-4"}}}
          Edit schema
        </a>
        <a href="{{basePath}}/export/{{encodeUri dbId}}" class="btn btn-ghost btn-sm gap-1.5">
          {{{icon "export" class="h-4 w-4"}}}
          SQL dump
        </a>
        <div class="dropdown dropdown-end">
          <div tabindex="0" role="button" class="btn btn-outline btn-sm gap-1.5">
            {{{icon "export" class="h-4 w-4"}}}
            Export
            {{{icon "chevronDown" class="h-3.5 w-3.5"}}}
          </div>
          <ul tabindex="0" class="dropdown-content menu z-50 w-40 rounded-xl border border-base-300 bg-base-100 p-1.5 shadow-lift">
            <li><a href="{{basePath}}/api/tables/{{encodeUri dbId}}/{{encodeUri table}}/export?format=csv">CSV</a></li>
            <li><a href="{{basePath}}/api/tables/{{encodeUri dbId}}/{{encodeUri table}}/export?format=json">JSON</a></li>
          </ul>
        </div>
        {{#unless readonly}}
          <button id="import-csv" type="button" class="btn btn-outline btn-sm gap-1.5">
            {{{icon "import" class="h-4 w-4"}}}
            Import CSV
          </button>
        {{/unless}}
        <a href="{{basePath}}/seed/{{encodeUri dbId}}/{{encodeUri table}}" class="btn btn-outline btn-sm gap-1.5">
          {{{icon "seed" class="h-4 w-4"}}}
          Seed data
        </a>
        {{#unless readonly}}
          <a href="{{basePath}}/tables/{{encodeUri dbId}}/{{encodeUri table}}/rows/new" class="btn btn-primary btn-sm gap-1.5">
            {{{icon "plus" class="h-4 w-4"}}}
            New row
          </a>
        {{/unless}}
      </div>
    </div>
  </div>
  <details class="app-card overflow-hidden" {{#if filterQS}}open{{/if}}>
    <summary class="group flex cursor-pointer list-none items-center justify-between gap-2 px-4 py-3 transition hover:bg-base-200/40 [&::-webkit-details-marker]:hidden">
      <span class="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-base-content/45">
        {{{icon "filter" class="h-4 w-4"}}}
        Filter rows
        {{#if filterQS}}<span class="chip chip-pk">active</span>{{/if}}
      </span>
      <span class="transition-transform group-open:rotate-180 text-base-content/40">
        {{{icon "chevronDown" class="h-4 w-4"}}}
      </span>
    </summary>
    <form id="filter-form" class="border-t border-base-200 p-4">
      <p class="mb-3 text-xs text-base-content/40">Filters adapt to each column's type: foreign keys, booleans, dates and numbers get dedicated controls. Text columns keep the operator syntax — <code>=exact</code> · <code>&gt;5</code> · <code>pre*</code> starts with · plain text = contains.</p>
      <div id="filter-fields" class="grid grid-cols-2 gap-2 md:grid-cols-3 xl:grid-cols-4"></div>
      <div class="mt-3 flex flex-wrap items-center gap-2">
        <button type="submit" class="btn btn-primary btn-sm gap-1.5">
          {{{icon "search" class="h-4 w-4"}}}
          Apply filter
        </button>
        <button type="button" id="clear-filter" class="btn btn-ghost btn-sm">Clear</button>
        {{#if filterQS}}
          <span class="text-xs text-base-content/50">Filtering <b class="tabular-nums">{{count}}</b> row(s).</span>
        {{/if}}
      </div>
    </form>
  </details>
  <div id="import-panel" class="app-card hidden p-4">
    <div class="mb-3 flex items-center justify-between">
      <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">Import CSV into <span class="font-mono normal-case">{{table}}</span></h2>
      <button id="import-csv-close" type="button" class="btn btn-ghost btn-xs" aria-label="Close">&times;</button>
    </div>
    <div class="space-y-3">
      <textarea id="import-csv-text" rows="6" class="field-input w-full font-mono text-[13px]" placeholder="id,name,email&#10;1,Ada,ada@example.com&#10;2,Bob,bob@example.com" spellcheck="false"></textarea>
      <div class="flex flex-wrap items-center gap-3">
        <input type="file" id="import-csv-file" class="file-input file-input-sm w-full max-w-xs" accept=".csv,text/csv" />
        <button id="import-csv-submit" type="button" class="btn btn-primary btn-sm gap-1.5">
          {{{icon "import" class="h-4 w-4"}}}
          Import
        </button>
      </div>
      <p class="text-xs text-base-content/45">The first row must be column names matching this table. Empty cells are treated as “not set” so database defaults apply. The import is transactional — a failed row rolls back everything.</p>
    </div>
  </div>
  {{#if rows.length}}
    <div class="app-card overflow-hidden">
      <div class="flex flex-wrap items-center justify-between gap-2 border-b border-base-200 px-4 py-2.5">
        <div class="flex flex-wrap items-center gap-3">
          <span class="text-sm text-base-content/65">Showing <b class="tabular-nums font-bold text-base-content">{{firstRow}}</b>–<b class="tabular-nums font-bold text-base-content">{{lastRow}}</b> of <b class="tabular-nums font-bold text-base-content">{{count}}</b> rows</span>
          <span class="hidden xl:inline-flex items-center gap-1.5 text-xs text-base-content/40 font-medium">
            <kbd class="kbd kbd-xs font-mono">Dbl-click</kbd> edit · <kbd class="kbd kbd-xs font-mono">↑↓←→</kbd> move · <kbd class="kbd kbd-xs font-mono">Space</kbd> toggle · <kbd class="kbd kbd-xs font-mono">Esc</kbd> cancel
          </span>
        </div>
        <div class="flex flex-wrap items-center gap-2.5">
          <button id="btn-columns-manager" type="button" class="btn btn-outline btn-xs gap-1.5 font-medium text-xs" title="Manage column visibility, order, and pinned columns">
            {{{icon "columns" class="h-3.5 w-3.5"}}}
            Columns
            <span id="col-count-badge" class="badge badge-sm badge-primary text-[10px] tabular-nums font-semibold">{{add info.columns.length refColumns.length}}/{{add info.columns.length refColumns.length}}</span>
          </button>
          <label class="flex items-center gap-2 text-xs text-base-content/55">
            Per page
            <select id="page-size" class="field-select !w-auto !py-1 !text-xs" data-table="{{table}}" data-orderby="{{orderBy}}" data-orderdir="{{orderDir}}" data-filters="{{filterQS}}">
              {{#each sizes}}<option value="{{this}}" {{#if (eq this ../pageSize)}}selected{{/if}}>{{this}}</option>{{/each}}
            </select>
          </label>
        </div>
      </div>
      <div id="bulk-bar" class="hidden items-center justify-between gap-2 border-b border-base-200 bg-primary/[0.04] px-4 py-2">
        <span class="text-sm font-medium text-base-content/80">
          <b id="bulk-count" class="tabular-nums text-primary">0</b> row(s) selected
        </span>
        <div class="flex flex-wrap items-center gap-1.5">
          <button id="bulk-export-csv" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
            {{{icon "export" class="h-3.5 w-3.5"}}}
            Export CSV
          </button>
          <button id="bulk-export-json" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
            {{{icon "export" class="h-3.5 w-3.5"}}}
            Export JSON
          </button>
          <button id="bulk-delete" type="button" class="btn btn-error btn-xs gap-1" {{#if readonly}}disabled{{/if}}>
            {{{icon "trash" class="h-3.5 w-3.5"}}}
            Delete
          </button>
          <button id="bulk-clear" type="button" class="btn btn-ghost btn-xs text-base-content/60">Clear</button>
        </div>
      </div>
      <div class="overflow-x-auto">
        <table id="main-table" class="table table-compact table-pin-rows">
          <thead>
            <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
              <th class="w-10 text-center font-semibold th-select-all">
                <input type="checkbox" id="select-all-rows" class="checkbox checkbox-primary checkbox-xs" title="Select all rows on this page" />
              </th>
              {{#each colHeaders}}
                <th class="whitespace-nowrap font-semibold" data-col="{{this.name}}">
                  <a href="{{this.href}}" class="sort-link {{#if this.active}}active{{/if}}" title="Sort by {{this.name}}">
                    <span class="font-mono normal-case">{{this.name}}</span>
                    {{#if this.pk}}<span class="chip chip-pk">PK</span>{{/if}}
                    <span class="sort-arrow">{{#if (eq this.dir 'desc')}}↓{{else}}↑{{/if}}</span>
                  </a>
                </th>
              {{/each}}
              {{#each refColumns}}
                <th class="whitespace-nowrap text-right font-semibold" data-col="ref:{{this.table}}" data-is-ref="true" data-ref-table="{{this.table}}" title="Rows in {{this.table}} where {{this.from}} references {{this.to}}">
                  <span class="font-mono normal-case">{{this.table}}</span>
                  <span class="chip chip-type text-[9px] ml-1 bg-secondary/15 text-secondary">REF</span>
                </th>
              {{/each}}
              <th class="text-right font-semibold sticky-col-actions">Actions</th>
            </tr>
          </thead>
          <tbody>
            {{#each rows}}
              <tr class="group hover:bg-primary/[0.04]" data-table="{{@root.table}}" data-pk="{{this.pkEncoded}}">
                <td class="w-10 text-center align-middle">
                  {{#if this.pkEncoded}}
                    <input type="checkbox" class="row-checkbox checkbox checkbox-primary checkbox-xs" value="{{this.pkEncoded}}" aria-label="Select this row" />
                  {{/if}}
                </td>
                {{#each this.cells}}
                  <td class="max-w-xs align-middle cell-editable {{#unless @root.readonly}}js-inline-cell{{/unless}}"
                      data-col="{{this.name}}" data-null="{{this.isNull}}" data-value="{{this.display}}"
                      data-blob="{{this.isBlob}}" data-json="{{this.isJson}}" data-image="{{this.isImage}}"
                      data-audio="{{this.isAudio}}" data-video="{{this.isVideo}}" data-pdf="{{this.isPdf}}"
                      data-mime="{{this.blobMime}}" data-type="{{this.type}}">
                    {{#if this.isNull}}
                      <span class="chip chip-null js-cell-value">NULL</span>
                    {{else if this.isImage}}
                      <div class="flex items-center gap-2 js-cell-value">
                        <img src="{{this.blobUrl}}" alt="{{this.name}}" class="h-7 max-w-12 rounded object-cover border border-base-300 bg-base-200 shadow-xs cursor-pointer js-inspect-btn" title="Inspect Image" />
                        <span class="chip chip-type text-[9px] font-mono">{{this.blobExt}} · {{this.blobSize}}</span>
                        <button type="button" class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover:opacity-100 transition-opacity js-inspect-btn" title="Inspect Image">
                          {{{icon "inspect" class="h-3 w-3"}}}
                        </button>
                      </div>
                    {{else if this.isAudio}}
                      <div class="flex items-center gap-1.5 js-cell-value">
                        <span class="inline-flex items-center gap-1 rounded-md bg-warning/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-warning cursor-pointer js-inspect-btn">🎵 {{this.blobExt}} · {{this.blobSize}}</span>
                        <button type="button" class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover:opacity-100 transition-opacity js-inspect-btn" title="Listen & Inspect Audio">
                          {{{icon "inspect" class="h-3 w-3"}}}
                        </button>
                      </div>
                    {{else if this.isVideo}}
                      <div class="flex items-center gap-1.5 js-cell-value">
                        <span class="inline-flex items-center gap-1 rounded-md bg-accent/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-accent cursor-pointer js-inspect-btn">🎬 {{this.blobExt}} · {{this.blobSize}}</span>
                        <button type="button" class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover:opacity-100 transition-opacity js-inspect-btn" title="Watch & Inspect Video">
                          {{{icon "inspect" class="h-3 w-3"}}}
                        </button>
                      </div>
                    {{else if this.isPdf}}
                      <div class="flex items-center gap-1.5 js-cell-value">
                        <span class="inline-flex items-center gap-1 rounded-md bg-error/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-error cursor-pointer js-inspect-btn">📄 PDF · {{this.blobSize}}</span>
                        <button type="button" class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover:opacity-100 transition-opacity js-inspect-btn" title="View PDF">
                          {{{icon "inspect" class="h-3 w-3"}}}
                        </button>
                      </div>
                    {{else if this.isBlob}}
                      <div class="flex items-center gap-1.5 js-cell-value">
                        <span class="inline-flex items-center gap-1 rounded-md bg-secondary/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-secondary cursor-pointer js-inspect-btn">🗃️ BLOB · {{this.blobSize}}</span>
                        <button type="button" class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover:opacity-100 transition-opacity js-inspect-btn" title="Inspect BLOB">
                          {{{icon "inspect" class="h-3 w-3"}}}
                        </button>
                      </div>
                    {{else if this.isJson}}
                      <div class="flex items-center gap-1.5 js-cell-value">
                        <span class="inline-flex items-center gap-1 rounded-md bg-info/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-info cursor-pointer js-inspect-btn">{ } JSON</span>
                        <span class="block max-w-[140px] truncate font-mono text-[12px] text-base-content/70" title="{{this.display}}">{{this.display}}</span>
                        <button type="button" class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover:opacity-100 transition-opacity js-inspect-btn" title="Inspect JSON">
                          {{{icon "inspect" class="h-3 w-3"}}}
                        </button>
                      </div>
                    {{else if this.isColor}}
                      <div class="flex items-center gap-1.5 js-cell-value">
                        <span class="inline-block h-3.5 w-3.5 rounded-full border border-base-300 shadow-xs shrink-0" style="background-color: {{this.display}}"></span>
                        <span class="font-mono text-[13px]">{{this.display}}</span>
                      </div>
                    {{else if this.isUrl}}
                      <div class="flex items-center gap-1.5 js-cell-value">
                        <span class="block max-w-xs truncate font-mono text-[13px] text-primary underline" title="{{this.display}}">{{this.display}}</span>
                        <a href="{{this.display}}" target="_blank" rel="noopener" class="text-base-content/40 hover:text-primary" title="Open link">↗</a>
                      </div>
                    {{else}}
                      <div class="flex items-center justify-between gap-1 group/cell">
                        <span class="js-cell-value block max-w-xs truncate font-mono text-[13px]" title="{{this.display}}">{{truncate this.display 120}}</span>
                        {{#if (gt this.display.length 30)}}
                          <button type="button" class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover/cell:opacity-100 transition-opacity js-inspect-btn shrink-0" title="Inspect text">
                            {{{icon "inspect" class="h-3 w-3"}}}
                          </button>
                        {{/if}}
                      </div>
                    {{/if}}
                  </td>
                {{/each}}
                {{#each this.refs}}
                  <td class="whitespace-nowrap text-right align-middle" data-col="ref:{{this.table}}" data-is-ref="true" data-ref-table="{{this.table}}">
                    {{#if this.value}}
                      <button type="button" class="js-ref-toggle inline-flex items-center gap-1.5 rounded-lg border border-base-300 bg-base-100 px-2 py-1 text-xs font-medium text-base-content/70 shadow-soft transition hover:border-primary/50 hover:text-primary {{#unless this.count}}opacity-50{{/unless}}"
                        data-table="{{@root.table}}" data-pk="{{../pkEncoded}}" data-ref-table="{{this.table}}"
                        aria-expanded="false" title="View {{this.table}} rows where {{this.from}} = {{this.value}}">
                        <span class="font-mono normal-case">{{this.table}}</span>
                        <span class="rounded-md bg-primary/10 px-1.5 py-0.5 font-semibold tabular-nums text-primary">{{this.count}}</span>
                        <span class="js-ref-chevron transition-transform inline-block">
                          {{{icon "chevronDown" class="h-3 w-3"}}}
                        </span>
                      </button>
                    {{else}}
                      <span class="text-xs text-base-content/35">&mdash;</span>
                    {{/if}}
                  </td>
                {{/each}}
                <td class="whitespace-nowrap text-right align-middle sticky-col-actions">
                  {{#if this.pkEncoded}}
                    <div class="row-actions">
                      {{#unless @root.readonly}}
                        <a href="{{@root.basePath}}/tables/{{encodeUri @root.dbId}}/{{encodeUri @root.table}}/rows/{{this.pkEncoded}}/edit" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" title="Edit row">
                          {{{icon "edit" class="h-3.5 w-3.5"}}}
                          Edit
                        </a>
                      {{/unless}}
                      <div class="dropdown dropdown-end">
                        <label tabindex="0" role="button" class="btn btn-ghost btn-xs btn-square text-base-content/60 hover:text-base-content" title="Row actions">
                          {{{icon "dotsVertical" class="h-3.5 w-3.5"}}}
                        </label>
                        <ul tabindex="0" class="dropdown-content menu z-50 w-44 rounded-xl border border-base-300 bg-base-100 p-1.5 shadow-lift text-xs">
                          <li>
                            <button type="button" class="js-row-copy-json flex items-center gap-2" data-pk="{{this.pkEncoded}}">
                              {{{icon "copy" class="h-3.5 w-3.5 text-base-content/60"}}}
                              Copy as JSON
                            </button>
                          </li>
                          <li>
                            <button type="button" class="js-row-copy-sql flex items-center gap-2" data-pk="{{this.pkEncoded}}">
                              {{{icon "sql" class="h-3.5 w-3.5 text-base-content/60"}}}
                              Copy SQL INSERT
                            </button>
                          </li>
                          {{#unless @root.readonly}}
                            <li>
                              <button type="button" class="js-row-duplicate flex items-center gap-2" data-pk="{{this.pkEncoded}}">
                                {{{icon "duplicate" class="h-3.5 w-3.5 text-base-content/60"}}}
                                Duplicate Row
                              </button>
                            </li>
                            <div class="divider my-1"></div>
                            <li>
                              <button type="button" class="js-delete-row flex items-center gap-2 text-error hover:bg-error/10" data-table="{{@root.table}}" data-pk="{{this.pkEncoded}}">
                                {{{icon "trash" class="h-3.5 w-3.5"}}}
                                Delete Row
                              </button>
                            </li>
                          {{/unless}}
                        </ul>
                      </div>
                    </div>
                  {{else}}
                    <span class="text-xs text-base-content/35">No PK</span>
                  {{/if}}
                </td>
              </tr>
            {{/each}}
          </tbody>
        </table>
      </div>
      {{#if (gt pages 1)}}
        <div class="flex flex-wrap items-center justify-between gap-2 border-t border-base-200 px-4 py-3">
          <span class="text-sm text-base-content/50">Page {{page}} of {{pages}}</span>
          <div class="flex gap-1.5">
            <a href="{{basePath}}/tables/{{encodeUri dbId}}/{{encodeUri table}}?page={{sub page 1}}&size={{pageSize}}&orderBy={{orderBy}}&orderDir={{orderDir}}{{#if filterQS}}&{{filterQS}}{{/if}}"
              class="btn btn-outline btn-sm {{#unless (gt page 1)}}btn-disabled{{/unless}}" aria-disabled="{{#if (gt page 1)}}false{{else}}true{{/if}}">
              {{{icon "chevronLeft" class="h-4 w-4"}}}
              Prev
            </a>
            <a href="{{basePath}}/tables/{{encodeUri dbId}}/{{encodeUri table}}?page={{add page 1}}&size={{pageSize}}&orderBy={{orderBy}}&orderDir={{orderDir}}{{#if filterQS}}&{{filterQS}}{{/if}}"
              class="btn btn-outline btn-sm {{#unless (lt page pages)}}btn-disabled{{/unless}}" aria-disabled="{{#if (lt page pages)}}false{{else}}true{{/if}}">
              Next
              {{{icon "chevronRight" class="h-4 w-4"}}}
            </a>
          </div>
        </div>
      {{/if}}
    </div>
  {{else}}
    <div class="empty-state">
      <span class="empty-icon">{{{icon "book" class="h-7 w-7"}}}</span>
      <p class="text-sm font-medium text-base-content/70">No rows in <span class="font-mono">{{table}}</span></p>
      <div class="mt-2 flex gap-2">
        {{#unless readonly}}
          <a href="{{basePath}}/tables/{{encodeUri dbId}}/{{encodeUri table}}/rows/new" class="btn btn-primary btn-sm">Insert a row</a>
          <a href="{{basePath}}/seed/{{encodeUri dbId}}/{{encodeUri table}}" class="btn btn-outline btn-sm">Generate sample data</a>
        {{/unless}}
        <a href="{{basePath}}/query/{{encodeUri dbId}}" class="btn btn-outline btn-sm">Run a query</a>
      </div>
    </div>
  {{/if}}
  <div class="modal-box max-w-lg p-0 overflow-hidden shadow-lift border border-base-300 bg-base-100">
    <div class="flex items-center justify-between border-b border-base-200 px-5 py-3.5 bg-base-200/50">
      <div class="flex items-center gap-2.5">
        <span class="grid h-8 w-8 place-items-center rounded-lg bg-primary/10 text-primary">
          {{{icon "columns" class="h-4 w-4"}}}
        </span>
        <div>
          <h3 class="font-bold text-sm text-base-content">Column Manager</h3>
          <p class="text-[11px] text-base-content/50">Visibility, custom ordering, and pinned columns</p>
        </div>
      </div>
      <form method="dialog">
        <button class="btn btn-ghost btn-xs btn-circle text-base-content/60" aria-label="Close">✕</button>
      </form>
    </div>
    <div class="p-4 space-y-3">
      <div class="flex flex-wrap items-center justify-between gap-2">
        <div class="relative flex-1 min-w-[160px]">
          <input type="text" id="col-search" class="field-input !py-1.5 !pl-8 !pr-3 !text-xs w-full" placeholder="Filter columns..." />
          <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-base-content/40 pointer-events-none">
            {{{icon "search" class="h-3.5 w-3.5"}}}
          </span>
        </div>
        <div class="flex items-center gap-1">
          <button type="button" id="col-btn-show-all" class="btn btn-ghost btn-xs text-xs font-medium">Show all</button>
          <button type="button" id="col-btn-hide-non-pk" class="btn btn-ghost btn-xs text-xs font-medium">PKs only</button>
          <button type="button" id="col-btn-reset" class="btn btn-ghost btn-xs text-xs text-warning hover:bg-warning/10">Reset</button>
        </div>
      </div>
      <div class="flex items-center justify-between text-[11px] text-base-content/50 px-0.5">
        <span>Drag ⠿ to reorder. Toggle checkbox to show/hide. Click 📌 to pin.</span>
        <span id="col-manager-summary" class="font-mono text-primary font-semibold"></span>
      </div>
      <div id="col-manager-list" class="space-y-1 max-h-[360px] overflow-y-auto pr-1">
      </div>
    </div>
    <div class="flex items-center justify-between border-t border-base-200 px-5 py-3 bg-base-200/40 text-xs">
      <span class="text-base-content/50 text-[11px]">Saved in browser for this table</span>
      <form method="dialog">
        <button class="btn btn-primary btn-sm">Done</button>
      </form>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop bg-black/40 backdrop-blur-xs">
    <button>close</button>
  </form>
+<div class="space-y-5">
  <div class="page-header">
    <div class="page-header-row flex-wrap lg:flex-nowrap">
      <div class="flex items-center gap-3.5">
        <span class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-primary/10 text-primary border border-primary/20">
          {{{icon "table" class="h-5 w-5"}}}
        </span>
        <div>
          <div class="page-pretitle">Table Browser</div>
          <div class="flex items-center gap-2">
            <h1 class="page-title font-mono text-xl sm:text-2xl">{{table}}</h1>
            {{#if isPostgres}}
              <span class="rounded bg-info/15 px-2 py-0.5 text-[10px] font-bold font-sans text-info border border-info/20">PostgreSQL</span>
            {{else}}
              <span class="rounded bg-emerald-500/15 px-2 py-0.5 text-[10px] font-bold font-sans text-emerald-600 dark:text-emerald-400 border border-emerald-500/20">SQLite</span>
            {{/if}}
          </div>
          <p class="text-xs text-base-content/55 mt-0.5">
            {{count}} row(s) · {{info.columns.length}} column(s)
            {{#if pkCols.length}}· PK <span class="font-mono font-semibold text-primary">{{join pkCols ", "}}</span>{{/if}}
          </p>
        </div>
      </div>
      <div class="page-actions flex-wrap">
        <a href="{{basePath}}/schema/{{encodeUri dbId}}/{{encodeUri table}}" class="btn btn-ghost btn-sm gap-1.5">
          {{{icon "schema" class="h-4 w-4"}}}
          Edit schema
        </a>
        <a href="{{basePath}}/export/{{encodeUri dbId}}" class="btn btn-ghost btn-sm gap-1.5">
          {{{icon "export" class="h-4 w-4"}}}
          SQL dump
        </a>
        <div class="dropdown dropdown-end">
          <div tabindex="0" role="button" class="btn btn-outline btn-sm gap-1.5">
            {{{icon "export" class="h-4 w-4"}}}
            Export
            {{{icon "chevronDown" class="h-3.5 w-3.5"}}}
          </div>
          <ul tabindex="0" class="dropdown-content menu z-50 w-40 rounded-xl border border-base-300 bg-base-100 p-1.5 shadow-lift">
            <li><a href="{{basePath}}/api/tables/{{encodeUri dbId}}/{{encodeUri table}}/export?format=csv">CSV</a></li>
            <li><a href="{{basePath}}/api/tables/{{encodeUri dbId}}/{{encodeUri table}}/export?format=json">JSON</a></li>
          </ul>
        </div>
        {{#unless readonly}}
          <button id="import-csv" type="button" class="btn btn-outline btn-sm gap-1.5">
            {{{icon "import" class="h-4 w-4"}}}
            Import CSV
          </button>
        {{/unless}}
        <a href="{{basePath}}/seed/{{encodeUri dbId}}/{{encodeUri table}}" class="btn btn-outline btn-sm gap-1.5">
          {{{icon "seed" class="h-4 w-4"}}}
          Seed data
        </a>
        {{#unless readonly}}
          <a href="{{basePath}}/tables/{{encodeUri dbId}}/{{encodeUri table}}/rows/new" class="btn btn-primary btn-sm gap-1.5">
            {{{icon "plus" class="h-4 w-4"}}}
            New row
          </a>
        {{/unless}}
      </div>
    </div>
  </div>
  <details class="app-card overflow-hidden" {{#if filterQS}}open{{/if}}>
    <summary class="group flex cursor-pointer list-none items-center justify-between gap-2 px-4 py-3 transition hover:bg-base-200/40 [&::-webkit-details-marker]:hidden">
      <span class="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-base-content/45">
        {{{icon "filter" class="h-4 w-4"}}}
        Filter rows
        {{#if filterQS}}<span class="chip chip-pk">active</span>{{/if}}
      </span>
      <span class="transition-transform group-open:rotate-180 text-base-content/40">
        {{{icon "chevronDown" class="h-4 w-4"}}}
      </span>
    </summary>
    <form id="filter-form" class="border-t border-base-200 p-4">
      <p class="mb-3 text-xs text-base-content/40">Filters adapt to each column's type: foreign keys, booleans, dates and numbers get dedicated controls. Text columns keep the operator syntax — <code>=exact</code> · <code>&gt;5</code> · <code>pre*</code> starts with · plain text = contains.</p>
      <div id="filter-fields" class="grid grid-cols-2 gap-2 md:grid-cols-3 xl:grid-cols-4"></div>
      <div class="mt-3 flex flex-wrap items-center gap-2">
        <button type="submit" class="btn btn-primary btn-sm gap-1.5">
          {{{icon "search" class="h-4 w-4"}}}
          Apply filter
        </button>
        <button type="button" id="clear-filter" class="btn btn-ghost btn-sm">Clear</button>
        {{#if filterQS}}
          <span class="text-xs text-base-content/50">Filtering <b class="tabular-nums">{{count}}</b> row(s).</span>
        {{/if}}
      </div>
    </form>
  </details>
  <div id="import-panel" class="app-card hidden p-4">
    <div class="mb-3 flex items-center justify-between">
      <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">Import CSV into <span class="font-mono normal-case">{{table}}</span></h2>
      <button id="import-csv-close" type="button" class="btn btn-ghost btn-xs" aria-label="Close">&times;</button>
    </div>
    <div class="space-y-3">
      <textarea id="import-csv-text" rows="6" class="field-input w-full font-mono text-[13px]" placeholder="id,name,email&#10;1,Ada,ada@example.com&#10;2,Bob,bob@example.com" spellcheck="false"></textarea>
      <div class="flex flex-wrap items-center gap-3">
        <input type="file" id="import-csv-file" class="file-input file-input-sm w-full max-w-xs" accept=".csv,text/csv" />
        <button id="import-csv-submit" type="button" class="btn btn-primary btn-sm gap-1.5">
          {{{icon "import" class="h-4 w-4"}}}
          Import
        </button>
      </div>
      <p class="text-xs text-base-content/45">The first row must be column names matching this table. Empty cells are treated as “not set” so database defaults apply. The import is transactional — a failed row rolls back everything.</p>
    </div>
  </div>
  {{#if rows.length}}
    <div class="app-card overflow-hidden">
      <div class="flex flex-wrap items-center justify-between gap-2 border-b border-base-200 px-4 py-2.5">
        <div class="flex flex-wrap items-center gap-3">
          <span class="text-sm text-base-content/65">Showing <b class="tabular-nums font-bold text-base-content">{{firstRow}}</b>–<b class="tabular-nums font-bold text-base-content">{{lastRow}}</b> of <b class="tabular-nums font-bold text-base-content">{{count}}</b> rows</span>
          <span class="hidden xl:inline-flex items-center gap-1.5 text-xs text-base-content/40 font-medium">
            <kbd class="kbd kbd-xs font-mono">Dbl-click</kbd> edit · <kbd class="kbd kbd-xs font-mono">↑↓←→</kbd> move · <kbd class="kbd kbd-xs font-mono">Space</kbd> toggle · <kbd class="kbd kbd-xs font-mono">Esc</kbd> cancel
          </span>
        </div>
        <div class="flex flex-wrap items-center gap-2.5">
          <button id="btn-columns-manager" type="button" class="btn btn-outline btn-xs gap-1.5 font-medium text-xs" title="Manage column visibility, order, and pinned columns">
            {{{icon "columns" class="h-3.5 w-3.5"}}}
            Columns
            <span id="col-count-badge" class="badge badge-sm badge-primary text-[10px] tabular-nums font-semibold">{{add info.columns.length refColumns.length}}/{{add info.columns.length refColumns.length}}</span>
          </button>
          <label class="flex items-center gap-2 text-xs text-base-content/55">
            Per page
            <select id="page-size" class="field-select !w-auto !py-1 !text-xs" data-db="{{dbId}}" data-table="{{table}}" data-orderby="{{orderBy}}" data-orderdir="{{orderDir}}" data-filters="{{filterQS}}">
              {{#each sizes}}<option value="{{this}}" {{#if (eq this ../pageSize)}}selected{{/if}}>{{this}}</option>{{/each}}
            </select>
          </label>
        </div>
      </div>
      <div id="bulk-bar" class="hidden items-center justify-between gap-2 border-b border-base-200 bg-primary/[0.04] px-4 py-2">
        <span class="text-sm font-medium text-base-content/80">
          <b id="bulk-count" class="tabular-nums text-primary">0</b> row(s) selected
        </span>
        <div class="flex flex-wrap items-center gap-1.5">
          <button id="bulk-export-csv" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
            {{{icon "export" class="h-3.5 w-3.5"}}}
            Export CSV
          </button>
          <button id="bulk-export-json" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
            {{{icon "export" class="h-3.5 w-3.5"}}}
            Export JSON
          </button>
          <button id="bulk-delete" type="button" class="btn btn-error btn-xs gap-1" {{#if readonly}}disabled{{/if}}>
            {{{icon "trash" class="h-3.5 w-3.5"}}}
            Delete
          </button>
          <button id="bulk-clear" type="button" class="btn btn-ghost btn-xs text-base-content/60">Clear</button>
        </div>
      </div>
      <div class="overflow-x-auto">
        <table id="main-table" class="table table-compact table-pin-rows">
          <thead>
            <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
              <th class="w-10 text-center font-semibold th-select-all">
                <input type="checkbox" id="select-all-rows" class="checkbox checkbox-primary checkbox-xs" title="Select all rows on this page" />
              </th>
              {{#each colHeaders}}
                <th class="whitespace-nowrap font-semibold" data-col="{{this.name}}">
                  <a href="{{this.href}}" class="sort-link {{#if this.active}}active{{/if}}" title="Sort by {{this.name}}">
                    <span class="font-mono normal-case">{{this.name}}</span>
                    {{#if this.pk}}<span class="chip chip-pk">PK</span>{{/if}}
                    <span class="sort-arrow">{{#if (eq this.dir 'desc')}}↓{{else}}↑{{/if}}</span>
                  </a>
                </th>
              {{/each}}
              {{#each refColumns}}
                <th class="whitespace-nowrap text-right font-semibold" data-col="ref:{{this.table}}" data-is-ref="true" data-ref-table="{{this.table}}" title="Rows in {{this.table}} where {{this.from}} references {{this.to}}">
                  <span class="font-mono normal-case">{{this.table}}</span>
                  <span class="chip chip-type text-[9px] ml-1 bg-secondary/15 text-secondary">REF</span>
                </th>
              {{/each}}
              <th class="text-right font-semibold sticky-col-actions">Actions</th>
            </tr>
          </thead>
          <tbody>
            {{#each rows}}
              <tr class="group hover:bg-primary/[0.04]" data-table="{{@root.table}}" data-pk="{{this.pkEncoded}}">
                <td class="w-10 text-center align-middle">
                  {{#if this.pkEncoded}}
                    <input type="checkbox" class="row-checkbox checkbox checkbox-primary checkbox-xs" value="{{this.pkEncoded}}" aria-label="Select this row" />
                  {{/if}}
                </td>
                {{#each this.cells}}
                  <td class="max-w-xs align-middle cell-editable {{#unless @root.readonly}}js-inline-cell{{/unless}}"
                      data-col="{{this.name}}" data-null="{{this.isNull}}" data-value="{{this.display}}"
                      data-blob="{{this.isBlob}}" data-json="{{this.isJson}}" data-image="{{this.isImage}}"
                      data-audio="{{this.isAudio}}" data-video="{{this.isVideo}}" data-pdf="{{this.isPdf}}"
                      data-mime="{{this.blobMime}}" data-type="{{this.type}}">
                    {{#if this.isNull}}
                      <span class="chip chip-null js-cell-value">NULL</span>
                    {{else if this.isImage}}
                      <div class="flex items-center gap-2 js-cell-value">
                        <img src="{{this.blobUrl}}" alt="{{this.name}}" class="h-7 max-w-12 rounded object-cover border border-base-300 bg-base-200 shadow-xs cursor-pointer js-inspect-btn" title="Inspect Image" />
                        <span class="chip chip-type text-[9px] font-mono">{{this.blobExt}} · {{this.blobSize}}</span>
                        <button type="button" class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover:opacity-100 transition-opacity js-inspect-btn" title="Inspect Image">
                          {{{icon "inspect" class="h-3 w-3"}}}
                        </button>
                      </div>
                    {{else if this.isAudio}}
                      <div class="flex items-center gap-1.5 js-cell-value">
                        <span class="inline-flex items-center gap-1 rounded-md bg-warning/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-warning cursor-pointer js-inspect-btn">🎵 {{this.blobExt}} · {{this.blobSize}}</span>
                        <button type="button" class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover:opacity-100 transition-opacity js-inspect-btn" title="Listen & Inspect Audio">
                          {{{icon "inspect" class="h-3 w-3"}}}
                        </button>
                      </div>
                    {{else if this.isVideo}}
                      <div class="flex items-center gap-1.5 js-cell-value">
                        <span class="inline-flex items-center gap-1 rounded-md bg-accent/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-accent cursor-pointer js-inspect-btn">🎬 {{this.blobExt}} · {{this.blobSize}}</span>
                        <button type="button" class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover:opacity-100 transition-opacity js-inspect-btn" title="Watch & Inspect Video">
                          {{{icon "inspect" class="h-3 w-3"}}}
                        </button>
                      </div>
                    {{else if this.isPdf}}
                      <div class="flex items-center gap-1.5 js-cell-value">
                        <span class="inline-flex items-center gap-1 rounded-md bg-error/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-error cursor-pointer js-inspect-btn">📄 PDF · {{this.blobSize}}</span>
                        <button type="button" class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover:opacity-100 transition-opacity js-inspect-btn" title="View PDF">
                          {{{icon "inspect" class="h-3 w-3"}}}
                        </button>
                      </div>
                    {{else if this.isBlob}}
                      <div class="flex items-center gap-1.5 js-cell-value">
                        <span class="inline-flex items-center gap-1 rounded-md bg-secondary/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-secondary cursor-pointer js-inspect-btn">🗃️ BLOB · {{this.blobSize}}</span>
                        <button type="button" class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover:opacity-100 transition-opacity js-inspect-btn" title="Inspect BLOB">
                          {{{icon "inspect" class="h-3 w-3"}}}
                        </button>
                      </div>
                    {{else if this.isJson}}
                      <div class="flex items-center gap-1.5 js-cell-value">
                        <span class="inline-flex items-center gap-1 rounded-md bg-info/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-info cursor-pointer js-inspect-btn">{ } JSON</span>
                        <span class="block max-w-[140px] truncate font-mono text-[12px] text-base-content/70" title="{{this.display}}">{{this.display}}</span>
                        <button type="button" class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover:opacity-100 transition-opacity js-inspect-btn" title="Inspect JSON">
                          {{{icon "inspect" class="h-3 w-3"}}}
                        </button>
                      </div>
                    {{else if this.isColor}}
                      <div class="flex items-center gap-1.5 js-cell-value">
                        <span class="inline-block h-3.5 w-3.5 rounded-full border border-base-300 shadow-xs shrink-0" style="background-color: {{this.display}}"></span>
                        <span class="font-mono text-[13px]">{{this.display}}</span>
                      </div>
                    {{else if this.isUrl}}
                      <div class="flex items-center gap-1.5 js-cell-value">
                        <span class="block max-w-xs truncate font-mono text-[13px] text-primary underline" title="{{this.display}}">{{this.display}}</span>
                        <a href="{{this.display}}" target="_blank" rel="noopener" class="text-base-content/40 hover:text-primary" title="Open link">↗</a>
                      </div>
                    {{else}}
                      <div class="flex items-center justify-between gap-1 group/cell">
                        <span class="js-cell-value block max-w-xs truncate font-mono text-[13px]" title="{{this.display}}">{{truncate this.display 120}}</span>
                        {{#if (gt this.display.length 30)}}
                          <button type="button" class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover/cell:opacity-100 transition-opacity js-inspect-btn shrink-0" title="Inspect text">
                            {{{icon "inspect" class="h-3 w-3"}}}
                          </button>
                        {{/if}}
                      </div>
                    {{/if}}
                  </td>
                {{/each}}
                {{#each this.refs}}
                  <td class="whitespace-nowrap text-right align-middle" data-col="ref:{{this.table}}" data-is-ref="true" data-ref-table="{{this.table}}">
                    {{#if this.value}}
                      <button type="button" class="js-ref-toggle inline-flex items-center gap-1.5 rounded-lg border border-base-300 bg-base-100 px-2 py-1 text-xs font-medium text-base-content/70 shadow-soft transition hover:border-primary/50 hover:text-primary {{#unless this.count}}opacity-50{{/unless}}"
                        data-table="{{@root.table}}" data-pk="{{../pkEncoded}}" data-ref-table="{{this.table}}"
                        aria-expanded="false" title="View {{this.table}} rows where {{this.from}} = {{this.value}}">
                        <span class="font-mono normal-case">{{this.table}}</span>
                        <span class="rounded-md bg-primary/10 px-1.5 py-0.5 font-semibold tabular-nums text-primary">{{this.count}}</span>
                        <span class="js-ref-chevron transition-transform inline-block">
                          {{{icon "chevronDown" class="h-3 w-3"}}}
                        </span>
                      </button>
                    {{else}}
                      <span class="text-xs text-base-content/35">&mdash;</span>
                    {{/if}}
                  </td>
                {{/each}}
                <td class="whitespace-nowrap text-right align-middle sticky-col-actions">
                  {{#if this.pkEncoded}}
                    <div class="row-actions">
                      {{#unless @root.readonly}}
                        <a href="{{@root.basePath}}/tables/{{encodeUri @root.dbId}}/{{encodeUri @root.table}}/rows/{{this.pkEncoded}}/edit" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" title="Edit row">
                          {{{icon "edit" class="h-3.5 w-3.5"}}}
                          Edit
                        </a>
                      {{/unless}}
                      <div class="dropdown dropdown-end">
                        <label tabindex="0" role="button" class="btn btn-ghost btn-xs btn-square text-base-content/60 hover:text-base-content" title="Row actions">
                          {{{icon "dotsVertical" class="h-3.5 w-3.5"}}}
                        </label>
                        <ul tabindex="0" class="dropdown-content menu z-50 w-44 rounded-xl border border-base-300 bg-base-100 p-1.5 shadow-lift text-xs">
                          <li>
                            <button type="button" class="js-row-copy-json flex items-center gap-2" data-pk="{{this.pkEncoded}}">
                              {{{icon "copy" class="h-3.5 w-3.5 text-base-content/60"}}}
                              Copy as JSON
                            </button>
                          </li>
                          <li>
                            <button type="button" class="js-row-copy-sql flex items-center gap-2" data-pk="{{this.pkEncoded}}">
                              {{{icon "sql" class="h-3.5 w-3.5 text-base-content/60"}}}
                              Copy SQL INSERT
                            </button>
                          </li>
                          {{#unless @root.readonly}}
                            <li>
                              <button type="button" class="js-row-duplicate flex items-center gap-2" data-pk="{{this.pkEncoded}}">
                                {{{icon "duplicate" class="h-3.5 w-3.5 text-base-content/60"}}}
                                Duplicate Row
                              </button>
                            </li>
                            <div class="divider my-1"></div>
                            <li>
                              <button type="button" class="js-delete-row flex items-center gap-2 text-error hover:bg-error/10" data-table="{{@root.table}}" data-pk="{{this.pkEncoded}}">
                                {{{icon "trash" class="h-3.5 w-3.5"}}}
                                Delete Row
                              </button>
                            </li>
                          {{/unless}}
                        </ul>
                      </div>
                    </div>
                  {{else}}
                    <span class="text-xs text-base-content/35">No PK</span>
                  {{/if}}
                </td>
              </tr>
            {{/each}}
          </tbody>
        </table>
      </div>
      {{#if (gt pages 1)}}
        <div class="flex flex-wrap items-center justify-between gap-2 border-t border-base-200 px-4 py-3">
          <span class="text-sm text-base-content/50">Page {{page}} of {{pages}}</span>
          <div class="flex gap-1.5">
            <a href="{{basePath}}/tables/{{encodeUri dbId}}/{{encodeUri table}}?page={{sub page 1}}&size={{pageSize}}&orderBy={{orderBy}}&orderDir={{orderDir}}{{#if filterQS}}&{{filterQS}}{{/if}}"
              class="btn btn-outline btn-sm {{#unless (gt page 1)}}btn-disabled{{/unless}}" aria-disabled="{{#if (gt page 1)}}false{{else}}true{{/if}}">
              {{{icon "chevronLeft" class="h-4 w-4"}}}
              Prev
            </a>
            <a href="{{basePath}}/tables/{{encodeUri dbId}}/{{encodeUri table}}?page={{add page 1}}&size={{pageSize}}&orderBy={{orderBy}}&orderDir={{orderDir}}{{#if filterQS}}&{{filterQS}}{{/if}}"
              class="btn btn-outline btn-sm {{#unless (lt page pages)}}btn-disabled{{/unless}}" aria-disabled="{{#if (lt page pages)}}false{{else}}true{{/if}}">
              Next
              {{{icon "chevronRight" class="h-4 w-4"}}}
            </a>
          </div>
        </div>
      {{/if}}
    </div>
  {{else}}
    <div class="empty-state">
      <span class="empty-icon">{{{icon "book" class="h-7 w-7"}}}</span>
      <p class="text-sm font-medium text-base-content/70">No rows in <span class="font-mono">{{table}}</span></p>
      <div class="mt-2 flex gap-2">
        {{#unless readonly}}
          <a href="{{basePath}}/tables/{{encodeUri dbId}}/{{encodeUri table}}/rows/new" class="btn btn-primary btn-sm">Insert a row</a>
          <a href="{{basePath}}/seed/{{encodeUri dbId}}/{{encodeUri table}}" class="btn btn-outline btn-sm">Generate sample data</a>
        {{/unless}}
        <a href="{{basePath}}/query/{{encodeUri dbId}}" class="btn btn-outline btn-sm">Run a query</a>
      </div>
    </div>
  {{/if}}
  <div class="modal-box max-w-lg p-0 overflow-hidden shadow-lift border border-base-300 bg-base-100">
    <div class="flex items-center justify-between border-b border-base-200 px-5 py-3.5 bg-base-200/50">
      <div class="flex items-center gap-2.5">
        <span class="grid h-8 w-8 place-items-center rounded-lg bg-primary/10 text-primary">
          {{{icon "columns" class="h-4 w-4"}}}
        </span>
        <div>
          <h3 class="font-bold text-sm text-base-content">Column Manager</h3>
          <p class="text-[11px] text-base-content/50">Visibility, custom ordering, and pinned columns</p>
        </div>
      </div>
      <form method="dialog">
        <button class="btn btn-ghost btn-xs btn-circle text-base-content/60" aria-label="Close">✕</button>
      </form>
    </div>
    <div class="p-4 space-y-3">
      <div class="flex flex-wrap items-center justify-between gap-2">
        <div class="relative flex-1 min-w-[160px]">
          <input type="text" id="col-search" class="field-input !py-1.5 !pl-8 !pr-3 !text-xs w-full" placeholder="Filter columns..." />
          <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-base-content/40 pointer-events-none">
            {{{icon "search" class="h-3.5 w-3.5"}}}
          </span>
        </div>
        <div class="flex items-center gap-1">
          <button type="button" id="col-btn-show-all" class="btn btn-ghost btn-xs text-xs font-medium">Show all</button>
          <button type="button" id="col-btn-hide-non-pk" class="btn btn-ghost btn-xs text-xs font-medium">PKs only</button>
          <button type="button" id="col-btn-reset" class="btn btn-ghost btn-xs text-xs text-warning hover:bg-warning/10">Reset</button>
        </div>
      </div>
      <div class="flex items-center justify-between text-[11px] text-base-content/50 px-0.5">
        <span>Drag ⠿ to reorder. Toggle checkbox to show/hide. Click 📌 to pin.</span>
        <span id="col-manager-summary" class="font-mono text-primary font-semibold"></span>
      </div>
      <div id="col-manager-list" class="space-y-1 max-h-[360px] overflow-y-auto pr-1">
      </div>
    </div>
    <div class="flex items-center justify-between border-t border-base-200 px-5 py-3 bg-base-200/40 text-xs">
      <span class="text-base-content/50 text-[11px]">Saved in browser for this table</span>
      <form method="dialog">
        <button class="btn btn-primary btn-sm">Done</button>
      </form>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop bg-black/40 backdrop-blur-xs">
    <button>close</button>
  </form>