admindb 2.1.1 → 2.3.0

package/dist/views/pages/schema.hbs

@@ -1,298 +1 @@
-<div class="space-y-6">
-  <div class="flex flex-wrap items-center justify-between gap-3">
-    <div class="flex items-center gap-3.5">
-      <a href="{{basePath}}/tables/{{table}}" class="btn btn-circle btn-ghost btn-sm" aria-label="Back to table">
-        {{{icon "arrowLeft" class="h-5 w-5"}}}
-      </a>
-      <div>
-        <p class="text-sm font-semibold uppercase tracking-wider text-primary">Schema editor</p>
-        <h1 class="font-mono text-2xl font-bold tracking-tight">{{table}}</h1>
-      </div>
-    </div>
-    <div class="flex flex-wrap gap-2">
-      <a href="{{basePath}}/tables/{{table}}" class="btn btn-ghost btn-sm gap-1.5">
-        {{{icon "table" class="h-4 w-4"}}}
-        View data
-      </a>
-      <a href="{{basePath}}/query" class="btn btn-outline btn-sm gap-1.5">
-        {{{icon "query" class="h-4 w-4"}}}
-        Query
-      </a>
-    </div>
-  </div>
-  <div class="app-card p-5">
-    <div class="flex flex-wrap items-end gap-3">
-      <div class="w-full max-w-sm">
-        <label class="field-label" for="table-rename-input">Table name</label>
-        <input id="table-rename-input" class="field-input font-mono" value="{{table}}" spellcheck="false" autocomplete="off" {{#if isInternal}}disabled{{/if}} {{#if readonly}}disabled{{/if}} />
-      </div>
-      <button id="rename-table" type="button" class="btn btn-primary btn-sm mb-0.5" {{#if isInternal}}disabled{{/if}} {{#if readonly}}disabled{{/if}}>
-        {{{icon "edit" class="h-4 w-4"}}}
-        Rename table
-      </button>
-      {{#if isInternal}}<span class="mb-1 text-xs text-base-content/45">Internal tables cannot be renamed.</span>{{/if}}
-    </div>
-  </div>
-  <div class="app-card overflow-hidden">
-    <div class="flex flex-wrap items-center justify-between gap-2 border-b border-base-200 px-5 py-4">
-      <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">
-        Columns
-        <span class="ml-1 rounded-md bg-base-200 px-1.5 py-0.5 text-[10px] text-base-content/50">{{schema.columns.length}}</span>
-      </h2>
-      <button id="add-column" type="button" class="btn btn-outline btn-sm gap-1.5" {{#if readonly}}disabled{{/if}}>
-        {{{icon "plus" class="h-4 w-4"}}}
-        Add column
-      </button>
-    </div>
-    <div id="add-column-panel" class="hidden border-b border-base-200 p-4">
-      <div class="mb-2 text-xs font-bold uppercase tracking-wider text-primary">Add New Column</div>
-      <div id="add-column-form" class="grid grid-cols-2 items-end gap-2.5 sm:grid-cols-12"></div>
-      <div id="add-column-error" class="hidden mt-3"></div>
-      <div class="mt-3.5 flex gap-2">
-        <button id="add-column-submit" type="button" class="btn btn-primary btn-sm">Add column</button>
-        <button id="add-column-cancel" type="button" class="btn btn-ghost btn-sm">Cancel</button>
-      </div>
-    </div>
-    <div id="edit-column-panel" class="hidden border-b border-base-200 bg-base-200/30 p-4">
-      <div class="mb-2.5 flex items-center justify-between">
-        <div class="flex items-center gap-2">
-          <span class="text-xs font-bold uppercase tracking-wider text-primary">Edit Column:</span>
-          <span id="edit-column-target" class="font-mono text-sm font-bold text-base-content"></span>
-        </div>
-        <span class="text-[11px] text-base-content/45">Change data type, default value, primary key, nullability, uniqueness, or foreign key.</span>
-      </div>
-      <div id="edit-column-form" class="grid grid-cols-2 items-end gap-2.5 sm:grid-cols-12"></div>
-      <div id="edit-column-error" class="hidden mt-3"></div>
-      <div class="mt-3.5 flex gap-2">
-        <button id="edit-column-submit" type="button" class="btn btn-primary btn-sm">Save Changes</button>
-        <button id="edit-column-cancel" type="button" class="btn btn-ghost btn-sm">Cancel</button>
-      </div>
-    </div>
-    <div class="overflow-x-auto">
-      <table class="table table-sm">
-        <thead>
-          <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
-            <th class="font-semibold">Name</th>
-            <th class="font-semibold">Type</th>
-            <th class="font-semibold">Constraints</th>
-            <th class="font-semibold">Default</th>
-            <th class="text-right font-semibold">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {{#each schema.columns}}
-            <tr class="hover:bg-primary/[0.04]">
-              <td class="col-name-cell align-middle" data-column="{{this.name}}">
-                <span class="name-display font-mono text-[13px] font-semibold">{{this.name}}</span>
-              </td>
-              <td class="align-middle"><span class="chip chip-type">{{this.type}}</span></td>
-              <td class="align-middle">
-                <div class="flex flex-wrap gap-1">
-                  {{#if (gt this.pk 0)}}<span class="chip chip-pk">PK</span>{{/if}}
-                  {{#if this.notnull}}<span class="chip chip-type">NOT NULL</span>{{/if}}
-                  {{#if this.unique}}{{#unless (gt this.pk 0)}}<span class="chip chip-type">UNIQUE</span>{{/unless}}{{/if}}
-                  {{#if this.fk}}<span class="chip chip-type">FK → {{this.fk.table}}.{{this.fk.to}}</span>{{/if}}
-                  {{#if this.indexed}}<span class="chip chip-type">INDEX</span>{{/if}}
-                  {{#if this.referencedBy.length}}<span class="chip chip-null" title="Referenced by {{this.referencedBy.length}} table(s)">REF × {{this.referencedBy.length}}</span>{{/if}}
-                </div>
-              </td>
-              <td class="align-middle font-mono text-[13px] text-base-content/60">
-                {{#if this.dflt_value}}{{this.dflt_value}}{{else}}<span class="text-base-content/25">—</span>{{/if}}
-              </td>
-              <td class="whitespace-nowrap text-right align-middle">
-                <div class="flex items-center justify-end gap-1">
-                  <button type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary col-edit"
-                    data-column="{{this.name}}"
-                    data-type="{{this.type}}"
-                    data-pk="{{#if (gt this.pk 0)}}true{{else}}false{{/if}}"
-                    data-notnull="{{#if this.notnull}}true{{else}}false{{/if}}"
-                    data-unique="{{#if this.unique}}true{{else}}false{{/if}}"
-                    data-default="{{this.dflt_value}}"
-                    data-fk-table="{{this.fk.table}}"
-                    data-fk-to="{{this.fk.to}}"
-                    {{#if ../readonly}}disabled{{/if}}>
-                    {{{icon "edit" class="h-3.5 w-3.5"}}}
-                    Edit
-                  </button>
-                  <button type="button" class="btn btn-ghost btn-xs gap-1 text-error col-drop" {{#if ../readonly}}disabled{{/if}} {{#unless this.canDrop}}disabled title="{{join this.dropBlockers "; "}}"{{/unless}}>
-                    {{{icon "trash" class="h-3.5 w-3.5"}}}
-                    Delete
-                  </button>
-                </div>
-              </td>
-            </tr>
-          {{/each}}
-        </tbody>
-      </table>
-    </div>
-  </div>
-  {{#if schema.foreignKeys.length}}
-    <div class="app-card overflow-hidden">
-      <div class="border-b border-base-200 px-5 py-4">
-        <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">Foreign keys</h2>
-      </div>
-      <div class="overflow-x-auto">
-        <table class="table table-sm">
-          <thead>
-            <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
-              <th class="font-semibold">Column</th>
-              <th class="font-semibold">References</th>
-              <th class="font-semibold">On delete</th>
-              <th class="font-semibold">On update</th>
-            </tr>
-          </thead>
-          <tbody>
-            {{#each schema.foreignKeys}}
-              <tr class="hover:bg-primary/[0.04]">
-                <td class="align-middle font-mono text-[13px]">{{this.from}}</td>
-                <td class="align-middle font-mono text-[13px] text-primary">{{this.table}}.{{this.to}}</td>
-                <td class="align-middle text-[13px] text-base-content/60">{{this.on_delete}}</td>
-                <td class="align-middle text-[13px] text-base-content/60">{{this.on_update}}</td>
-              </tr>
-            {{/each}}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  {{/if}}
-  <div class="app-card overflow-hidden">
-    <div class="flex flex-wrap items-center justify-between gap-2 border-b border-base-200 px-5 py-4">
-      <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">
-        Indexes
-        <span class="ml-1 rounded-md bg-base-200 px-1.5 py-0.5 text-[10px] text-base-content/50">{{schema.indexes.length}}</span>
-      </h2>
-      <button id="add-index" type="button" class="btn btn-outline btn-sm gap-1.5" {{#if readonly}}disabled{{/if}}>
-        {{{icon "plus" class="h-4 w-4"}}}
-        Add index
-      </button>
-    </div>
-    <div id="add-index-panel" class="hidden border-b border-base-200 p-4">
-      <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
-        <div>
-          <label class="field-label" for="index-name">Index name <span class="text-base-content/40">(optional)</span></label>
-          <input id="index-name" class="field-input font-mono" placeholder="idx_users_email" spellcheck="false" autocomplete="off" />
-        </div>
-        <div class="flex items-end pb-1">
-          <label class="flex cursor-pointer items-center gap-2">
-            <input id="index-unique" type="checkbox" class="checkbox checkbox-primary checkbox-sm" />
-            <span class="text-sm font-medium text-base-content/70">Unique index</span>
-          </label>
-        </div>
-        <div class="sm:col-span-3">
-          <label class="field-label">Columns <span class="text-base-content/40">— click in the order they should appear</span></label>
-          <div id="index-columns" class="flex flex-wrap gap-2">
-            {{#each schema.columns}}
-              <button type="button" class="index-col-btn rounded-lg border border-base-300 px-2.5 py-1.5 text-[13px] font-mono hover:border-primary/50" data-column="{{this.name}}">
-                <span class="index-col-num mr-1 hidden rounded bg-primary/15 px-1 text-[10px] font-bold text-primary">1</span>{{this.name}}
-              </button>
-            {{/each}}
-          </div>
-        </div>
-      </div>
-      <div id="index-preview" class="mt-3 hidden">
-        <div class="rounded-xl bg-base-200/60 p-3">
-          <div class="mb-1 text-[10px] font-semibold uppercase tracking-wider text-base-content/40">Generated SQL</div>
-          <pre class="code-panel !m-0"><code id="index-preview-code"></code></pre>
-        </div>
-      </div>
-      <div id="add-index-error" class="mt-3 hidden"></div>
-      <div class="mt-3 flex gap-2">
-        <button id="add-index-submit" type="button" class="btn btn-primary btn-sm">Create index</button>
-        <button id="add-index-cancel" type="button" class="btn btn-ghost btn-sm">Cancel</button>
-      </div>
-    </div>
-    <div class="overflow-x-auto">
-      {{#if schema.indexes.length}}
-        <table class="table table-sm">
-          <thead>
-            <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
-              <th class="font-semibold">Name</th>
-              <th class="font-semibold">Columns</th>
-              <th class="font-semibold">Kind</th>
-              <th class="font-semibold">SQL</th>
-              <th class="text-right font-semibold">Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            {{#each schema.indexes}}
-              <tr class="hover:bg-primary/[0.04]">
-                <td class="align-middle font-mono text-[13px]">{{this.name}}</td>
-                <td class="align-middle font-mono text-[13px] text-base-content/70">{{join this.columns ", "}}</td>
-                <td class="align-middle">
-                  <div class="flex flex-wrap gap-1">
-                    {{#if this.unique}}<span class="chip chip-type">UNIQUE</span>{{else}}<span class="chip chip-type">INDEX</span>{{/if}}
-                    {{#unless (eq this.origin 'c')}}<span class="chip chip-null" title="Automatic index (created by SQLite)">AUTO</span>{{/unless}}
-                  </div>
-                </td>
-                <td class="align-middle">
-                  {{#if this.sql}}
-                    <details class="group">
-                      <summary class="cursor-pointer text-xs font-medium text-primary/80 hover:text-primary">View SQL</summary>
-                      <pre class="mt-1 max-w-[26rem] overflow-x-auto rounded-lg bg-base-200/70 p-2 font-mono text-[11px] leading-relaxed text-base-content/70">{{this.sql}}</pre>
-                    </details>
-                  {{else}}
-                    <span class="text-base-content/30">—</span>
-                  {{/if}}
-                </td>
-                <td class="whitespace-nowrap text-right align-middle">
-                  <button type="button" class="btn btn-ghost btn-xs gap-1 text-error index-drop"
-                    data-index="{{this.name}}" {{#if ../readonly}}disabled{{/if}} {{#unless (eq this.origin 'c')}}disabled title="Automatic index — cannot be dropped"{{/unless}}>
-                    {{{icon "trash" class="h-3.5 w-3.5"}}}
-                    Drop
-                  </button>
-                </td>
-              </tr>
-            {{/each}}
-          </tbody>
-        </table>
-      {{else}}
-        <div class="px-5 py-8 text-center text-sm text-base-content/45">No indexes on this table yet.</div>
-      {{/if}}
-    </div>
-  </div>
-  {{#if schema.references.length}}
-    <div class="app-card overflow-hidden">
-      <div class="border-b border-base-200 px-5 py-4">
-        <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">Referenced by</h2>
-      </div>
-      <div class="overflow-x-auto">
-        <table class="table table-sm">
-          <thead>
-            <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
-              <th class="font-semibold">Table</th>
-              <th class="font-semibold">Via</th>
-            </tr>
-          </thead>
-          <tbody>
-            {{#each schema.references}}
-              <tr class="hover:bg-primary/[0.04]">
-                <td class="align-middle font-mono text-[13px]">{{this.table}}</td>
-                <td class="align-middle font-mono text-[13px] text-base-content/70">{{this.from}} → {{this.to}}</td>
-              </tr>
-            {{/each}}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  {{/if}}
-  {{#unless isInternal}}
-    <div class="rounded-2xl border border-error/25 bg-error/[0.03] p-5">
-      <h2 class="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-error">
-        {{{icon "warning" class="h-4 w-4"}}}
-        Danger zone
-      </h2>
-      <p class="mt-1 text-sm text-base-content/55">Dropping this table permanently removes its schema and all of its data.</p>
-      <div class="mt-3 flex flex-wrap items-center gap-3">
-        <button id="drop-table" type="button" class="btn btn-error btn-sm" {{#if readonly}}disabled{{/if}} {{#if schema.references.length}}disabled title="Referenced by {{schema.references.length}} table(s)"{{/if}}>
-          Drop table
-        </button>
-        {{#if readonly}}<span class="text-xs text-base-content/50">Read-only — table changes are disabled.</span>{{/if}}
-        {{#if schema.references.length}}
-          <span class="text-xs text-base-content/50">Cannot drop — referenced by {{schema.references.length}} table(s).</span>
-        {{/if}}
-      </div>
-    </div>
-  {{/unless}}
-</div>
-<script id="schema-config" type="application/json">{{{json config}}}</script>
-<script src="{{basePath}}/js/schema.js" defer></script>
+<div class="space-y-6">
  <div class="page-header">
    <div class="page-header-row">
      <div class="flex items-center gap-3">
        <a href="{{basePath}}/tables/{{table}}" class="btn btn-circle btn-ghost btn-sm" aria-label="Back to table">
          {{{icon "arrowLeft" class="h-4 w-4"}}}
        </a>
        <div>
          <div class="page-pretitle">Schema Editor</div>
          <h1 class="page-title font-mono text-xl sm:text-2xl">{{table}}</h1>
        </div>
      </div>
      <div class="page-actions">
        <a href="{{basePath}}/tables/{{table}}" class="btn btn-ghost btn-sm gap-1.5">
          {{{icon "table" class="h-4 w-4"}}}
          View data
        </a>
        <a href="{{basePath}}/query" class="btn btn-outline btn-sm gap-1.5">
          {{{icon "query" class="h-4 w-4"}}}
          Query
        </a>
      </div>
    </div>
  </div>
  <div class="app-card p-5">
    <div class="flex flex-wrap items-end gap-3">
      <div class="w-full max-w-sm">
        <label class="field-label" for="table-rename-input">Table name</label>
        <input id="table-rename-input" class="field-input font-mono" value="{{table}}" spellcheck="false" autocomplete="off" {{#if isInternal}}disabled{{/if}} {{#if readonly}}disabled{{/if}} />
      </div>
      <button id="rename-table" type="button" class="btn btn-primary btn-sm mb-0.5" {{#if isInternal}}disabled{{/if}} {{#if readonly}}disabled{{/if}}>
        {{{icon "edit" class="h-4 w-4"}}}
        Rename table
      </button>
      {{#if isInternal}}<span class="mb-1 text-xs text-base-content/45">Internal tables cannot be renamed.</span>{{/if}}
    </div>
  </div>
  <div class="app-card overflow-hidden">
    <div class="flex flex-wrap items-center justify-between gap-2 border-b border-base-200 px-5 py-4">
      <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">
        Columns
        <span class="ml-1 rounded-md bg-base-200 px-1.5 py-0.5 text-[10px] text-base-content/50">{{schema.columns.length}}</span>
      </h2>
      <button id="add-column" type="button" class="btn btn-outline btn-sm gap-1.5" {{#if readonly}}disabled{{/if}}>
        {{{icon "plus" class="h-4 w-4"}}}
        Add column
      </button>
    </div>
    <div id="add-column-panel" class="hidden border-b border-base-200 p-4">
      <div class="mb-2 text-xs font-bold uppercase tracking-wider text-primary">Add New Column</div>
      <div id="add-column-form" class="grid grid-cols-2 items-end gap-2.5 sm:grid-cols-12"></div>
      <div id="add-column-error" class="hidden mt-3"></div>
      <div class="mt-3.5 flex gap-2">
        <button id="add-column-submit" type="button" class="btn btn-primary btn-sm">Add column</button>
        <button id="add-column-cancel" type="button" class="btn btn-ghost btn-sm">Cancel</button>
      </div>
    </div>
    <div id="edit-column-panel" class="hidden border-b border-base-200 bg-base-200/30 p-4">
      <div class="mb-2.5 flex items-center justify-between">
        <div class="flex items-center gap-2">
          <span class="text-xs font-bold uppercase tracking-wider text-primary">Edit Column:</span>
          <span id="edit-column-target" class="font-mono text-sm font-bold text-base-content"></span>
        </div>
        <span class="text-[11px] text-base-content/45">Change data type, default value, primary key, nullability, uniqueness, or foreign key.</span>
      </div>
      <div id="edit-column-form" class="grid grid-cols-2 items-end gap-2.5 sm:grid-cols-12"></div>
      <div id="edit-column-error" class="hidden mt-3"></div>
      <div class="mt-3.5 flex gap-2">
        <button id="edit-column-submit" type="button" class="btn btn-primary btn-sm">Save Changes</button>
        <button id="edit-column-cancel" type="button" class="btn btn-ghost btn-sm">Cancel</button>
      </div>
    </div>
    <div class="overflow-x-auto">
      <table class="table table-sm">
        <thead>
          <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
            <th class="font-semibold">Name</th>
            <th class="font-semibold">Type</th>
            <th class="font-semibold">Constraints</th>
            <th class="font-semibold">Default</th>
            <th class="text-right font-semibold">Actions</th>
          </tr>
        </thead>
        <tbody>
          {{#each schema.columns}}
            <tr class="hover:bg-primary/[0.04]">
              <td class="col-name-cell align-middle" data-column="{{this.name}}">
                <span class="name-display font-mono text-[13px] font-semibold">{{this.name}}</span>
              </td>
              <td class="align-middle"><span class="chip chip-type">{{this.type}}</span></td>
              <td class="align-middle">
                <div class="flex flex-wrap gap-1">
                  {{#if (gt this.pk 0)}}<span class="chip chip-pk">PK</span>{{/if}}
                  {{#if this.notnull}}<span class="chip chip-type">NOT NULL</span>{{/if}}
                  {{#if this.unique}}{{#unless (gt this.pk 0)}}<span class="chip chip-type">UNIQUE</span>{{/unless}}{{/if}}
                  {{#if this.fk}}<span class="chip chip-type">FK → {{this.fk.table}}.{{this.fk.to}}</span>{{/if}}
                  {{#if this.indexed}}<span class="chip chip-type">INDEX</span>{{/if}}
                  {{#if this.referencedBy.length}}<span class="chip chip-null" title="Referenced by {{this.referencedBy.length}} table(s)">REF × {{this.referencedBy.length}}</span>{{/if}}
                </div>
              </td>
              <td class="align-middle font-mono text-[13px] text-base-content/60">
                {{#if this.dflt_value}}{{this.dflt_value}}{{else}}<span class="text-base-content/25">—</span>{{/if}}
              </td>
              <td class="whitespace-nowrap text-right align-middle">
                <div class="flex items-center justify-end gap-1">
                  <button type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary col-edit"
                    data-column="{{this.name}}"
                    data-type="{{this.type}}"
                    data-pk="{{#if (gt this.pk 0)}}true{{else}}false{{/if}}"
                    data-notnull="{{#if this.notnull}}true{{else}}false{{/if}}"
                    data-unique="{{#if this.unique}}true{{else}}false{{/if}}"
                    data-default="{{this.dflt_value}}"
                    data-fk-table="{{this.fk.table}}"
                    data-fk-to="{{this.fk.to}}"
                    {{#if ../readonly}}disabled{{/if}}>
                    {{{icon "edit" class="h-3.5 w-3.5"}}}
                    Edit
                  </button>
                  <button type="button" class="btn btn-ghost btn-xs gap-1 text-error col-drop" {{#if ../readonly}}disabled{{/if}} {{#unless this.canDrop}}disabled title="{{join this.dropBlockers "; "}}"{{/unless}}>
                    {{{icon "trash" class="h-3.5 w-3.5"}}}
                    Delete
                  </button>
                </div>
              </td>
            </tr>
          {{/each}}
        </tbody>
      </table>
    </div>
  </div>
  {{#if schema.foreignKeys.length}}
    <div class="app-card overflow-hidden">
      <div class="border-b border-base-200 px-5 py-4">
        <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">Foreign keys</h2>
      </div>
      <div class="overflow-x-auto">
        <table class="table table-sm">
          <thead>
            <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
              <th class="font-semibold">Column</th>
              <th class="font-semibold">References</th>
              <th class="font-semibold">On delete</th>
              <th class="font-semibold">On update</th>
            </tr>
          </thead>
          <tbody>
            {{#each schema.foreignKeys}}
              <tr class="hover:bg-primary/[0.04]">
                <td class="align-middle font-mono text-[13px]">{{this.from}}</td>
                <td class="align-middle font-mono text-[13px] text-primary">{{this.table}}.{{this.to}}</td>
                <td class="align-middle text-[13px] text-base-content/60">{{this.on_delete}}</td>
                <td class="align-middle text-[13px] text-base-content/60">{{this.on_update}}</td>
              </tr>
            {{/each}}
          </tbody>
        </table>
      </div>
    </div>
  {{/if}}
  <div class="app-card overflow-hidden">
    <div class="flex flex-wrap items-center justify-between gap-2 border-b border-base-200 px-5 py-4">
      <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">
        Indexes
        <span class="ml-1 rounded-md bg-base-200 px-1.5 py-0.5 text-[10px] text-base-content/50">{{schema.indexes.length}}</span>
      </h2>
      <button id="add-index" type="button" class="btn btn-outline btn-sm gap-1.5" {{#if readonly}}disabled{{/if}}>
        {{{icon "plus" class="h-4 w-4"}}}
        Add index
      </button>
    </div>
    <div id="add-index-panel" class="hidden border-b border-base-200 p-4">
      <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
        <div>
          <label class="field-label" for="index-name">Index name <span class="text-base-content/40">(optional)</span></label>
          <input id="index-name" class="field-input font-mono" placeholder="idx_users_email" spellcheck="false" autocomplete="off" />
        </div>
        <div class="flex items-end pb-1">
          <label class="flex cursor-pointer items-center gap-2">
            <input id="index-unique" type="checkbox" class="checkbox checkbox-primary checkbox-sm" />
            <span class="text-sm font-medium text-base-content/70">Unique index</span>
          </label>
        </div>
        <div class="sm:col-span-3">
          <label class="field-label">Columns <span class="text-base-content/40">— click in the order they should appear</span></label>
          <div id="index-columns" class="flex flex-wrap gap-2">
            {{#each schema.columns}}
              <button type="button" class="index-col-btn rounded-lg border border-base-300 px-2.5 py-1.5 text-[13px] font-mono hover:border-primary/50" data-column="{{this.name}}">
                <span class="index-col-num mr-1 hidden rounded bg-primary/15 px-1 text-[10px] font-bold text-primary">1</span>{{this.name}}
              </button>
            {{/each}}
          </div>
        </div>
      </div>
      <div id="index-preview" class="mt-3 hidden">
        <div class="rounded-xl bg-base-200/60 p-3">
          <div class="mb-1 text-[10px] font-semibold uppercase tracking-wider text-base-content/40">Generated SQL</div>
          <pre class="code-panel !m-0"><code id="index-preview-code"></code></pre>
        </div>
      </div>
      <div id="add-index-error" class="mt-3 hidden"></div>
      <div class="mt-3 flex gap-2">
        <button id="add-index-submit" type="button" class="btn btn-primary btn-sm">Create index</button>
        <button id="add-index-cancel" type="button" class="btn btn-ghost btn-sm">Cancel</button>
      </div>
    </div>
    <div class="overflow-x-auto">
      {{#if schema.indexes.length}}
        <table class="table table-sm">
          <thead>
            <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
              <th class="font-semibold">Name</th>
              <th class="font-semibold">Columns</th>
              <th class="font-semibold">Kind</th>
              <th class="font-semibold">SQL</th>
              <th class="text-right font-semibold">Actions</th>
            </tr>
          </thead>
          <tbody>
            {{#each schema.indexes}}
              <tr class="hover:bg-primary/[0.04]">
                <td class="align-middle font-mono text-[13px]">{{this.name}}</td>
                <td class="align-middle font-mono text-[13px] text-base-content/70">{{join this.columns ", "}}</td>
                <td class="align-middle">
                  <div class="flex flex-wrap gap-1">
                    {{#if this.unique}}<span class="chip chip-type">UNIQUE</span>{{else}}<span class="chip chip-type">INDEX</span>{{/if}}
                    {{#unless (eq this.origin 'c')}}<span class="chip chip-null" title="Automatic index (created by SQLite)">AUTO</span>{{/unless}}
                  </div>
                </td>
                <td class="align-middle">
                  {{#if this.sql}}
                    <details class="group">
                      <summary class="cursor-pointer text-xs font-medium text-primary/80 hover:text-primary">View SQL</summary>
                      <pre class="mt-1 max-w-[26rem] overflow-x-auto rounded-lg bg-base-200/70 p-2 font-mono text-[11px] leading-relaxed text-base-content/70">{{this.sql}}</pre>
                    </details>
                  {{else}}
                    <span class="text-base-content/30">—</span>
                  {{/if}}
                </td>
                <td class="whitespace-nowrap text-right align-middle">
                  <button type="button" class="btn btn-ghost btn-xs gap-1 text-error index-drop"
                    data-index="{{this.name}}" {{#if ../readonly}}disabled{{/if}} {{#unless (eq this.origin 'c')}}disabled title="Automatic index — cannot be dropped"{{/unless}}>
                    {{{icon "trash" class="h-3.5 w-3.5"}}}
                    Drop
                  </button>
                </td>
              </tr>
            {{/each}}
          </tbody>
        </table>
      {{else}}
        <div class="px-5 py-8 text-center text-sm text-base-content/45">No indexes on this table yet.</div>
      {{/if}}
    </div>
  </div>
  {{#if schema.references.length}}
    <div class="app-card overflow-hidden">
      <div class="border-b border-base-200 px-5 py-4">
        <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">Referenced by</h2>
      </div>
      <div class="overflow-x-auto">
        <table class="table table-sm">
          <thead>
            <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
              <th class="font-semibold">Table</th>
              <th class="font-semibold">Via</th>
            </tr>
          </thead>
          <tbody>
            {{#each schema.references}}
              <tr class="hover:bg-primary/[0.04]">
                <td class="align-middle font-mono text-[13px]">{{this.table}}</td>
                <td class="align-middle font-mono text-[13px] text-base-content/70">{{this.from}} → {{this.to}}</td>
              </tr>
            {{/each}}
          </tbody>
        </table>
      </div>
    </div>
  {{/if}}
  {{#unless isInternal}}
    <div class="rounded-2xl border border-error/25 bg-error/[0.03] p-5">
      <h2 class="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-error">
        {{{icon "warning" class="h-4 w-4"}}}
        Danger zone
      </h2>
      <p class="mt-1 text-sm text-base-content/55">Dropping this table permanently removes its schema and all of its data.</p>
      <div class="mt-3 flex flex-wrap items-center gap-3">
        <button id="drop-table" type="button" class="btn btn-error btn-sm" {{#if readonly}}disabled{{/if}} {{#if schema.references.length}}disabled title="Referenced by {{schema.references.length}} table(s)"{{/if}}>
          Drop table
        </button>
        {{#if readonly}}<span class="text-xs text-base-content/50">Read-only — table changes are disabled.</span>{{/if}}
        {{#if schema.references.length}}
          <span class="text-xs text-base-content/50">Cannot drop — referenced by {{schema.references.length}} table(s).</span>
        {{/if}}
      </div>
    </div>
  {{/unless}}