admindb 2.1.1 → 2.3.0

package/dist/views/pages/error.hbs

@@ -1,10 +1 @@
-<div class="mx-auto mt-16 max-w-md space-y-6 text-center">
-  <div class="mx-auto grid h-20 w-20 place-items-center rounded-3xl bg-error/10 text-error">
-    {{{icon "warning" class="h-10 w-10"}}}
-  </div>
-  <div>
-    <h1 class="text-5xl font-extrabold tracking-tight text-error">{{status}}</h1>
-    <p class="mt-2 text-base-content/60">{{error}}</p>
-  </div>
-  <a href="{{basePath}}/" class="btn btn-primary">Back to home</a>
-</div>
+<div class="mx-auto mt-16 max-w-md space-y-6 text-center">
  <div class="mx-auto grid h-20 w-20 place-items-center rounded-3xl bg-error/10 text-error">
    {{{icon "warning" class="h-10 w-10"}}}
  </div>
  <div>
    <h1 class="text-5xl font-extrabold tracking-tight text-error">{{status}}</h1>
    <p class="mt-2 text-base-content/60">{{error}}</p>
  </div>
  <a href="{{basePath}}/" class="btn btn-primary">Back to home</a>

package/dist/views/pages/form.hbs

@@ -1,59 +1 @@
-<div class="mx-auto max-w-3xl space-y-5">
-  <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-5 w-5"}}}
-    </a>
-    <div>
-      <h1 class="text-2xl font-bold tracking-tight">
-        {{#if (eq mode 'edit')}}Edit row{{else}}New row{{/if}}
-        <span class="text-base-content/40">in</span> <span class="font-mono text-primary">{{table}}</span>
-      </h1>
-      <p class="text-sm text-base-content/55">{{infoSummary}}</p>
-    </div>
-  </div>
-  <div class="app-card">
-    <div class="border-b border-base-200 px-6 py-4">
-      <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">Row fields</h2>
-    </div>
-    <div class="p-6">
-      <div id="row-fields" class="grid grid-cols-1 gap-x-6 gap-y-5 md:grid-cols-2"></div>
-      <div id="form-error" class="hidden"></div>
-      <div class="mt-6 flex flex-wrap items-center gap-2 border-t border-base-200 pt-5">
-        {{#unless readonly}}
-          <button id="row-submit" type="button" class="btn btn-primary">
-            {{#if (eq mode 'edit')}}Update row{{else}}Insert row{{/if}}
-          </button>
-          <button id="row-generate" type="button" class="btn btn-outline gap-1.5">
-            {{{icon "sql" class="h-4 w-4"}}}
-            Get query
-          </button>
-        {{else}}
-          <span class="text-sm font-medium text-warning">This database is read-only — rows cannot be {{#if (eq mode 'edit')}}updated{{else}}inserted{{/if}}.</span>
-        {{/unless}}
-        <a href="{{basePath}}/tables/{{table}}" class="btn btn-ghost">Cancel</a>
-      </div>
-      <p class="mt-3 text-xs text-base-content/40">
-        Columns with defaults are pre-filled from the schema. Empty fields are treated as "not set" (DB defaults
-        apply). <code class="font-mono">0</code> is a valid value. "Get query" only previews the SQL — it never executes.
-      </p>
-    </div>
-  </div>
-  <div id="generated-sql" class="hidden">
-    <div class="app-card">
-      <div class="flex items-center justify-between border-b border-base-200 px-6 py-4">
-        <h2 class="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-base-content/45">
-          <span class="grid h-6 w-6 place-items-center rounded-md bg-primary/10 text-primary">
-            {{{icon "sql" class="h-4 w-4"}}}
-          </span>
-          Generated SQL
-        </h2>
-        <button id="copy-sql" type="button" class="btn btn-ghost btn-xs gap-1">Copy</button>
-      </div>
-      <div class="p-4">
-        <pre class="code-panel"><code id="generated-sql-code"></code></pre>
-      </div>
-    </div>
-  </div>
-</div>
-<script id="form-config" type="application/json">{{{json config}}}</script>
-<script src="{{basePath}}/js/forms.js" defer></script>
+<div class="mx-auto max-w-3xl space-y-5">
  <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">{{#if (eq mode 'edit')}}Record Editor{{else}}Record Inserter{{/if}}</div>
          <h1 class="page-title text-xl sm:text-2xl">
            {{#if (eq mode 'edit')}}Edit row{{else}}New row{{/if}}
            <span class="text-base-content/40 font-normal">in</span> <span class="font-mono text-primary">{{table}}</span>
          </h1>
          <p class="text-xs text-base-content/55 mt-0.5">{{infoSummary}}</p>
        </div>
      </div>
    </div>
  </div>
  <div class="app-card">
    <div class="border-b border-base-200 px-6 py-4">
      <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">Row fields</h2>
    </div>
    <div class="p-6">
      <div id="row-fields" class="grid grid-cols-1 gap-x-6 gap-y-5 md:grid-cols-2"></div>
      <div id="form-error" class="hidden"></div>
      <div class="mt-6 flex flex-wrap items-center gap-2 border-t border-base-200 pt-5">
        {{#unless readonly}}
          <button id="row-submit" type="button" class="btn btn-primary">
            {{#if (eq mode 'edit')}}Update row{{else}}Insert row{{/if}}
          </button>
          <button id="row-generate" type="button" class="btn btn-outline gap-1.5">
            {{{icon "sql" class="h-4 w-4"}}}
            Get query
          </button>
        {{else}}
          <span class="text-sm font-medium text-warning">This database is read-only — rows cannot be {{#if (eq mode 'edit')}}updated{{else}}inserted{{/if}}.</span>
        {{/unless}}
        <a href="{{basePath}}/tables/{{table}}" class="btn btn-ghost">Cancel</a>
      </div>
      <p class="mt-3 text-xs text-base-content/40">
        Columns with defaults are pre-filled from the schema. Empty fields are treated as "not set" (DB defaults
        apply). <code class="font-mono">0</code> is a valid value. "Get query" only previews the SQL — it never executes.
      </p>
    </div>
  </div>
  <div id="generated-sql" class="hidden">
    <div class="app-card">
      <div class="flex items-center justify-between border-b border-base-200 px-6 py-4">
        <h2 class="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-base-content/45">
          <span class="grid h-6 w-6 place-items-center rounded-md bg-primary/10 text-primary">
            {{{icon "sql" class="h-4 w-4"}}}
          </span>
          Generated SQL
        </h2>
        <button id="copy-sql" type="button" class="btn btn-ghost btn-xs gap-1">Copy</button>
      </div>
      <div class="p-4">
        <pre class="code-panel"><code id="generated-sql-code"></code></pre>
      </div>
    </div>
  </div>

package/dist/views/pages/home.hbs

@@ -1,124 +1 @@
-<div class="space-y-8">
-  <div class="flex flex-wrap items-end justify-between gap-4">
-    <div>
-      <p class="text-sm font-semibold uppercase tracking-wider text-primary">Overview</p>
-      <h1 class="mt-1 text-3xl font-extrabold tracking-tight">Database</h1>
-      <p class="mt-1.5 text-sm text-base-content/55">Browse, edit, and query the connected database from your browser.</p>
-    </div>
-    <div class="flex gap-2">
-      <a href="{{basePath}}/query" class="btn btn-ghost btn-sm gap-1.5">
-        {{{icon "query" class="h-4 w-4"}}}
-        Query
-      </a>
-      {{#unless readonly}}
-        <a href="{{basePath}}/designer" class="btn btn-primary btn-sm gap-1.5">
-          {{{icon "plus" class="h-4 w-4"}}}
-          New table
-        </a>
-      {{/unless}}
-    </div>
-  </div>
-  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
-    <div class="stat-card">
-      <span class="stat-icon bg-primary/10 text-primary">
-        {{{icon "table" class="h-6 w-6"}}}
-      </span>
-      <div>
-        <div class="text-2xl font-extrabold tabular-nums">{{tables.length}}</div>
-        <div class="text-[13px] text-base-content/50">Tables</div>
-      </div>
-    </div>
-    <div class="stat-card">
-      <span class="stat-icon bg-secondary/10 text-secondary">
-        {{{icon "stats" class="h-6 w-6"}}}
-      </span>
-      <div>
-        <div class="text-2xl font-extrabold tabular-nums">{{totalRows}}</div>
-        <div class="text-[13px] text-base-content/50">Total rows</div>
-      </div>
-    </div>
-    <div class="stat-card">
-      <span class="stat-icon bg-accent/10 text-accent">
-        {{{icon "seed" class="h-6 w-6"}}}
-      </span>
-      <div>
-        <div class="text-2xl font-extrabold tabular-nums">{{savedQueries}}</div>
-        <div class="text-[13px] text-base-content/50">Saved queries</div>
-      </div>
-    </div>
-    <div class="stat-card">
-      <span class="stat-icon {{#if isPostgres}}bg-info/10 text-info{{else}}bg-emerald-500/10 text-emerald-500{{/if}}">
-        {{{icon "database" class="h-6 w-6"}}}
-      </span>
-      <div>
-        <div class="flex items-center gap-1.5">
-          <span class="text-xl font-extrabold">{{dialectName}}</span>
-          {{#if readonly}}
-            <span class="rounded bg-warning/20 px-1.5 py-0.5 text-[10px] font-bold uppercase text-warning">Read-only</span>
-          {{else}}
-            <span class="rounded bg-success/20 px-1.5 py-0.5 text-[10px] font-bold uppercase text-success">Writable</span>
-          {{/if}}
-        </div>
-        <div class="truncate font-mono text-xs text-base-content/50" title="{{dbPath}}">{{dbPath}}</div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="mb-3 flex items-center justify-between">
-      <h2 class="text-lg font-bold">Tables</h2>
-      <span class="text-sm text-base-content/45">{{tables.length}} total</span>
-    </div>
-    {{#if tables.length}}
-      <div class="app-card overflow-hidden">
-        <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="text-right font-semibold">Columns</th>
-                <th class="text-right font-semibold">Rows</th>
-                <th class="text-right font-semibold">Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              {{#each tables}}
-                <tr class="group hover:bg-base-200/50">
-                  <td>
-                    <a href="{{../basePath}}/tables/{{this}}" class="inline-flex items-center gap-2.5 font-medium">
-                      <span class="grid h-8 w-8 place-items-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary/20">
-                        {{{icon "table" class="h-4 w-4"}}}
-                      </span>
-                      <span class="font-mono text-[13.5px]">{{this}}</span>
-                    </a>
-                  </td>
-                  <td class="text-right tabular-nums text-base-content/60">{{lookup ../cols this}}</td>
-                  <td class="text-right tabular-nums text-base-content/60">{{lookup ../counts this}}</td>
-                  <td class="text-right">
-                    <a href="{{../basePath}}/tables/{{this}}" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
-                      Browse
-                      {{{icon "arrowRight" class="h-3.5 w-3.5"}}}
-                    </a>
-                  </td>
-                </tr>
-              {{/each}}
-            </tbody>
-          </table>
-        </div>
-      </div>
-    {{else}}
-      <div class="empty-state">
-        <span class="empty-icon">
-          {{{icon "table" class="h-7 w-7"}}}
-        </span>
-        <p class="text-sm font-medium text-base-content/70">No tables yet</p>
-        <p class="max-w-sm text-sm text-base-content/45">Create one with the table designer, or run a SQL statement in the query editor to get started.</p>
-        <div class="mt-2 flex gap-2">
-          {{#unless readonly}}
-            <a href="{{basePath}}/designer" class="btn btn-primary btn-sm">New table</a>
-          {{/unless}}
-          <a href="{{basePath}}/query" class="btn btn-outline btn-sm">Query editor</a>
-        </div>
-      </div>
-    {{/if}}
-  </div>
-</div>
+<div class="space-y-8">
  <div class="page-header">
    <div class="page-header-row">
      <div>
        <div class="page-pretitle">Overview</div>
        <h1 class="page-title">Database</h1>
        <p class="mt-0.5 text-xs text-base-content/60">Browse, edit, and query the connected database from your browser.</p>
      </div>
      <div class="page-actions">
        <a href="{{basePath}}/query" class="btn btn-ghost btn-sm gap-1.5">
          {{{icon "query" class="h-4 w-4"}}}
          Query
        </a>
        {{#unless readonly}}
          <a href="{{basePath}}/designer" class="btn btn-primary btn-sm gap-1.5">
            {{{icon "plus" class="h-4 w-4"}}}
            New table
          </a>
        {{/unless}}
      </div>
    </div>
  </div>
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
    <div class="stat-card">
      <span class="stat-icon bg-primary/10 text-primary">
        {{{icon "table" class="h-6 w-6"}}}
      </span>
      <div>
        <div class="text-2xl font-extrabold tabular-nums">{{tables.length}}</div>
        <div class="text-[13px] text-base-content/50">Tables</div>
      </div>
    </div>
    <div class="stat-card">
      <span class="stat-icon bg-secondary/10 text-secondary">
        {{{icon "stats" class="h-6 w-6"}}}
      </span>
      <div>
        <div class="text-2xl font-extrabold tabular-nums">{{totalRows}}</div>
        <div class="text-[13px] text-base-content/50">Total rows</div>
      </div>
    </div>
    <div class="stat-card">
      <span class="stat-icon bg-accent/10 text-accent">
        {{{icon "seed" class="h-6 w-6"}}}
      </span>
      <div>
        <div class="text-2xl font-extrabold tabular-nums">{{savedQueries}}</div>
        <div class="text-[13px] text-base-content/50">Saved queries</div>
      </div>
    </div>
    <div class="stat-card">
      <span class="stat-icon {{#if isPostgres}}bg-info/10 text-info{{else}}bg-emerald-500/10 text-emerald-500{{/if}}">
        {{{icon "database" class="h-6 w-6"}}}
      </span>
      <div>
        <div class="flex items-center gap-1.5">
          <span class="text-xl font-extrabold">{{dialectName}}</span>
          {{#if readonly}}
            <span class="rounded bg-warning/20 px-1.5 py-0.5 text-[10px] font-bold uppercase text-warning">Read-only</span>
          {{else}}
            <span class="rounded bg-success/20 px-1.5 py-0.5 text-[10px] font-bold uppercase text-success">Writable</span>
          {{/if}}
        </div>
        <div class="truncate font-mono text-xs text-base-content/50" title="{{dbPath}}">{{dbPath}}</div>
      </div>
    </div>
  </div>
  <div>
    <div class="mb-3 flex items-center justify-between">
      <h2 class="text-lg font-bold">Tables</h2>
      <span class="text-sm text-base-content/45">{{tables.length}} total</span>
    </div>
    {{#if tables.length}}
      {{#unless readonly}}
      <div id="home-bulk-toolbar"
        style="max-height: 0; overflow: hidden; transition: max-height 0.22s cubic-bezier(0.4,0,0.2,1), opacity 0.18s ease; opacity: 0;"
        aria-hidden="true">
        <div class="mb-3 flex flex-wrap items-center gap-3 rounded-xl border border-base-300 bg-base-100 px-4 py-3 shadow-soft">
          <span id="home-bulk-count"
            class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-xs font-bold text-primary">
            <span id="home-bulk-count-num">0</span> selected
          </span>
          <div class="h-4 w-px bg-base-300"></div>
          <div class="dropdown dropdown-bottom" id="home-dd-clear">
            <button tabindex="0" id="home-btn-clear"
              class="btn btn-sm btn-warning gap-1.5 font-semibold">
              {{{icon "refresh" class="h-3.5 w-3.5"}}}
              Clear Rows
              {{{icon "chevronDown" class="h-3 w-3 opacity-60"}}}
            </button>
            <ul tabindex="0"
              class="dropdown-content menu bg-base-100 rounded-xl border border-base-300 shadow-lift z-30 mt-1 w-64 p-2 text-sm">
              <li>
                <button id="home-clear-normal" class="flex items-start gap-2.5 rounded-lg px-3 py-2.5 hover:bg-base-200 text-left w-full">
                  <span class="mt-0.5 text-warning shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
                  <span>
                    <span class="block font-semibold">Clear rows</span>
                    <span class="block text-xs text-base-content/50">Deletes all rows; fails if FK references exist</span>
                  </span>
                </button>
              </li>
              <li>
                <button id="home-clear-force" class="flex items-start gap-2.5 rounded-lg px-3 py-2.5 hover:bg-error/10 text-left w-full text-error">
                  <span class="mt-0.5 shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
                  <span>
                    <span class="block font-semibold">Force Clear <span class="text-[10px] font-bold uppercase tracking-wide rounded bg-error/15 px-1 py-0.5 ml-1">ignore FK</span></span>
                    <span class="block text-xs text-error/60">Disables FK checks; deletes regardless of references</span>
                  </span>
                </button>
              </li>
            </ul>
          </div>
          <div class="dropdown dropdown-bottom" id="home-dd-drop">
            <button tabindex="0" id="home-btn-drop"
              class="btn btn-sm btn-error gap-1.5 font-semibold text-white">
              {{{icon "warning" class="h-3.5 w-3.5"}}}
              Drop Tables
              {{{icon "chevronDown" class="h-3 w-3 opacity-60"}}}
            </button>
            <ul tabindex="0"
              class="dropdown-content menu bg-base-100 rounded-xl border border-base-300 shadow-lift z-30 mt-1 w-64 p-2 text-sm">
              <li>
                <button id="home-drop-normal" class="flex items-start gap-2.5 rounded-lg px-3 py-2.5 hover:bg-base-200 text-left w-full">
                  <span class="mt-0.5 text-error shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
                  <span>
                    <span class="block font-semibold">Drop tables</span>
                    <span class="block text-xs text-base-content/50">Permanently deletes tables and all data</span>
                  </span>
                </button>
              </li>
              <li>
                <button id="home-drop-force" class="flex items-start gap-2.5 rounded-lg px-3 py-2.5 hover:bg-error/10 text-left w-full text-error">
                  <span class="mt-0.5 shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
                  <span>
                    <span class="block font-semibold">Force Drop <span class="text-[10px] font-bold uppercase tracking-wide rounded bg-error/15 px-1 py-0.5 ml-1">ignore FK</span></span>
                    <span class="block text-xs text-error/60">Drops with FK checks disabled; cascades on Postgres</span>
                  </span>
                </button>
              </li>
            </ul>
          </div>
          <div class="ml-auto">
            <button id="home-bulk-deselect"
              class="btn btn-ghost btn-sm gap-1 text-base-content/50 hover:text-base-content">
              {{{icon "x" class="h-3.5 w-3.5"}}}
              Deselect all
            </button>
          </div>
        </div>
      </div>
      {{/unless}}
      <div class="app-card overflow-hidden">
        <div class="overflow-x-auto">
          <table class="table table-sm" id="home-tables-table">
            <thead>
              <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
                {{#unless readonly}}
                <th class="w-10">
                  <input type="checkbox" id="home-select-all"
                    class="checkbox checkbox-sm checkbox-primary"
                    title="Select all tables" />
                </th>
                {{/unless}}
                <th class="font-semibold">Table</th>
                <th class="text-right font-semibold">Columns</th>
                <th class="text-right font-semibold">Rows</th>
                <th class="text-right font-semibold">Actions</th>
              </tr>
            </thead>
            <tbody>
              {{#each tables}}
                <tr class="group hover:bg-base-200/50 home-table-row" data-table="{{this}}">
                  {{#unless ../readonly}}
                  <td class="w-10">
                    <input type="checkbox"
                      class="checkbox checkbox-sm checkbox-primary home-table-checkbox"
                      data-table="{{this}}"
                      title="Select {{this}}" />
                  </td>
                  {{/unless}}
                  <td>
                    <a href="{{../basePath}}/tables/{{this}}" class="inline-flex items-center gap-2.5 font-medium">
                      <span class="grid h-8 w-8 place-items-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary/20">
                        {{{icon "table" class="h-4 w-4"}}}
                      </span>
                      <span class="font-mono text-[13.5px]">{{this}}</span>
                    </a>
                  </td>
                  <td class="text-right tabular-nums text-base-content/60">{{lookup ../cols this}}</td>
                  <td class="text-right tabular-nums text-base-content/60">{{lookup ../counts this}}</td>
                  <td class="text-right">
                    <a href="{{../basePath}}/tables/{{this}}" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
                      Browse
                      {{{icon "arrowRight" class="h-3.5 w-3.5"}}}
                    </a>
                  </td>
                </tr>
              {{/each}}
            </tbody>
          </table>
        </div>
      </div>
    {{else}}
      <div class="empty-state">
        <span class="empty-icon">
          {{{icon "table" class="h-7 w-7"}}}
        </span>
        <p class="text-sm font-medium text-base-content/70">No tables yet</p>
        <p class="max-w-sm text-sm text-base-content/45">Create one with the table designer, or run a SQL statement in the query editor to get started.</p>
        <div class="mt-2 flex gap-2">
          {{#unless readonly}}
            <a href="{{basePath}}/designer" class="btn btn-primary btn-sm">New table</a>
          {{/unless}}
          <a href="{{basePath}}/query" class="btn btn-outline btn-sm">Query editor</a>
        </div>
      </div>
    {{/if}}
  </div>

package/dist/views/pages/info.hbs

@@ -0,0 +1 @@
+<div class="space-y-6">
  <div class="page-header">
    <div class="page-header-row">
      <div>
        <div class="page-pretitle">{{dialect}} Database</div>
        <h1 class="page-title">Info & Settings</h1>
        <p class="mt-0.5 text-xs text-base-content/60">Database configuration, settings, and schema DDL overview.</p>
      </div>
    </div>
  </div>
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-1 space-y-6">
      {{#if isDefaultPassword}}
        <div class="alert alert-warning text-xs shadow-xs rounded-2xl border border-warning/30 p-3.5">
          {{{icon "warning" class="h-5 w-5 shrink-0 text-warning"}}}
          <div>
            <div class="font-bold text-sm">Default Password in Use</div>
            <div class="text-base-content/80 mt-0.5 leading-relaxed">Console is running with default password (<code class="font-mono font-semibold">admin</code>). Run <code class="font-mono font-semibold">npm run generatehash</code> and set <code class="font-mono font-semibold">ADMINDB_PASSWORD</code>.</div>
          </div>
        </div>
      {{/if}}
      <div class="app-card overflow-hidden">
        <div class="border-b border-base-200 bg-base-200/40 px-4 py-3">
          <h2 class="text-sm font-bold uppercase tracking-wider text-base-content/80">Settings / Configuration</h2>
        </div>
        <div class="p-0">
          <table class="table table-sm w-full">
            <tbody>
              {{#each settings}}
              <tr class="hover:bg-base-200/20">
                <td class="font-medium text-base-content/70 w-1/2">{{@key}}</td>
                <td class="font-mono text-xs">{{this}}</td>
              </tr>
              {{else}}
              <tr>
                <td colspan="2" class="p-4 text-center text-sm text-base-content/40">No settings available</td>
              </tr>
              {{/each}}
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="lg:col-span-2 space-y-6">
      <div class="app-card overflow-hidden flex flex-col h-[75vh]">
        <div class="border-b border-base-200 bg-base-200/40 px-4 py-3 flex items-center justify-between">
          <div class="flex items-center gap-3">
            <h2 class="text-sm font-bold uppercase tracking-wider text-base-content/80">Schema DDL</h2>
            <span class="badge badge-sm badge-ghost font-mono text-[10px] uppercase font-bold">{{dialect}}</span>
          </div>
          <button id="btn-copy-ddl" class="btn btn-sm btn-ghost gap-1.5" disabled>
            {{{icon "copy" class="h-4 w-4"}}}
            Copy
          </button>
        </div>
        <div class="bg-base-300 p-4 overflow-y-auto flex-1 relative">
          <div id="ddl-loader" class="absolute inset-0 flex flex-col items-center justify-center text-base-content/50 gap-3">
            {{{icon "spinner" class="h-6 w-6 animate-spin text-primary"}}}
            <p class="text-sm font-medium">Extracting schema definitions...</p>
          </div>
          <div id="ddl-error" class="hidden absolute inset-0 flex flex-col items-center justify-center text-error gap-3 bg-base-300">
            {{{icon "error" class="h-8 w-8"}}}
            <p class="text-sm font-medium">Failed to load schema.</p>
          </div>
          <pre id="ddl-container" class="hidden m-0 h-full"><code class="language-sql text-sm text-base-content/80 whitespace-pre-wrap"></code></pre>
        </div>
      </div>
    </div>
  </div>
  document.addEventListener('DOMContentLoaded', async () => {
    const loader = document.getElementById('ddl-loader');
    const container = document.getElementById('ddl-container');
    const codeBlock = container.querySelector('code');
    const btnCopy = document.getElementById('btn-copy-ddl');
    const errorBox = document.getElementById('ddl-error');
    try {
      const res = await fetch('{{basePath}}/api/info/ddl');
      const json = await res.json();
      loader.classList.add('hidden');
      if (json.success && json.data) {
        if (window.Utils && window.Utils.highlightSql) {
          codeBlock.innerHTML = window.Utils.highlightSql(json.data);
        } else {
          codeBlock.textContent = json.data;
        }
        container.classList.remove('hidden');
        btnCopy.disabled = false;
        btnCopy.addEventListener('click', async () => {
          try {
            await navigator.clipboard.writeText(json.data);
            const originalText = btnCopy.innerHTML;
            btnCopy.innerHTML = `{{{icon "check" class="h-4 w-4"}}} Copied!`;
            btnCopy.classList.add('text-success');
            setTimeout(() => {
              btnCopy.innerHTML = originalText;
              btnCopy.classList.remove('text-success');
            }, 2000);
          } catch (err) {
            console.error('Failed to copy', err);
          }
        });
      } else {
        if (json.success && !json.data) {
          codeBlock.textContent = '-- No tables defined in the database.';
          container.classList.remove('hidden');
        } else {
          throw new Error(json.error || 'Failed to fetch DDL');
        }
      }
    } catch (err) {
      loader.classList.add('hidden');
      errorBox.classList.remove('hidden');
      errorBox.querySelector('p').textContent = err.message || 'Failed to load schema.';
    }
  });