fse-theme-default 0.3.0

package/src/pages/emails/password-reset.astro

@@ -0,0 +1,39 @@
+---
+import { ssr } from "fse-ssr/ssr";
+import EmailLayout from "../../layouts/EmailLayout.astro";
+
+const { t, reset_url } = ssr<{ reset_url: string }>();
+---
+
+<EmailLayout title={t.password_reset_email.subject}>
+  <h1 slot="header" style="margin: 0; color: #ffffff; font-size: 20px; font-weight: 600; letter-spacing: 0.025em;">
+    {t.password_reset_email.header}
+  </h1>
+
+  <p style="margin: 0; margin-bottom: 20px; color: #231f16; font-size: 16px; line-height: 1.625;">
+    {t.password_reset_email.body}
+  </p>
+
+  <div style="text-align: center; padding-top: 12px; padding-bottom: 28px;">
+    <a
+      href={reset_url}
+      target="_blank"
+      style="display: inline-block; padding: 14px 36px; background-color: #6a9b3c; color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 600; border-radius: 6px; letter-spacing: 0.025em;"
+    >
+      {t.password_reset_email.cta}
+    </a>
+  </div>
+
+  <p style="margin: 0; margin-bottom: 12px; color: #655650; font-size: 14px; line-height: 1.5;">
+    {t.password_reset_email.fallback}
+  </p>
+  <p style="margin: 0; word-break: break-all;">
+    <a href={reset_url} style="color: #6a9b3c; font-size: 12px; text-decoration: underline;">
+      {reset_url}
+    </a>
+  </p>
+
+  <p slot="footer" style="margin: 0; color: #655650; font-size: 12px; line-height: 1.625;">
+    {t.password_reset_email.footer}
+  </p>
+</EmailLayout>

package/src/pages/emails/verify-email-change.astro

@@ -0,0 +1,39 @@
+---
+import { ssr } from "fse-ssr/ssr";
+import EmailLayout from "../../layouts/EmailLayout.astro";
+
+const { t, verify_url } = ssr<{ verify_url: string }>();
+---
+
+<EmailLayout title={t.verify_email_change.subject}>
+  <h1 slot="header" style="margin: 0; color: #ffffff; font-size: 20px; font-weight: 600; letter-spacing: 0.025em;">
+    {t.verify_email_change.header}
+  </h1>
+
+  <p style="margin: 0; margin-bottom: 20px; color: #231f16; font-size: 16px; line-height: 1.625;">
+    {t.verify_email_change.body}
+  </p>
+
+  <div style="text-align: center; padding-top: 12px; padding-bottom: 28px;">
+    <a
+      href={verify_url}
+      target="_blank"
+      style="display: inline-block; padding: 14px 36px; background-color: #6a9b3c; color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 600; border-radius: 6px; letter-spacing: 0.025em;"
+    >
+      {t.verify_email_change.cta}
+    </a>
+  </div>
+
+  <p style="margin: 0; margin-bottom: 12px; color: #655650; font-size: 14px; line-height: 1.5;">
+    {t.verify_email_change.fallback}
+  </p>
+  <p style="margin: 0; word-break: break-all;">
+    <a href={verify_url} style="color: #6a9b3c; font-size: 12px; text-decoration: underline;">
+      {verify_url}
+    </a>
+  </p>
+
+  <p slot="footer" style="margin: 0; color: #655650; font-size: 12px; line-height: 1.625;">
+    {t.verify_email_change.footer}
+  </p>
+</EmailLayout>

package/src/pages/emails/verify.astro

@@ -0,0 +1,39 @@
+---
+import { ssr } from "fse-ssr/ssr";
+import EmailLayout from "../../layouts/EmailLayout.astro";
+
+const { t, verify_url } = ssr<{ verify_url: string }>();
+---
+
+<EmailLayout title={t.verify_email.subject}>
+  <h1 slot="header" style="margin: 0; color: #ffffff; font-size: 20px; font-weight: 600; letter-spacing: 0.025em;">
+    {t.verify_email.header}
+  </h1>
+
+  <p style="margin: 0; margin-bottom: 20px; color: #231f16; font-size: 16px; line-height: 1.625;">
+    {t.verify_email.body}
+  </p>
+
+  <div style="text-align: center; padding-top: 12px; padding-bottom: 28px;">
+    <a
+      href={verify_url}
+      target="_blank"
+      style="display: inline-block; padding: 14px 36px; background-color: #6a9b3c; color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 600; border-radius: 6px; letter-spacing: 0.025em;"
+    >
+      {t.verify_email.cta}
+    </a>
+  </div>
+
+  <p style="margin: 0; margin-bottom: 12px; color: #655650; font-size: 14px; line-height: 1.5;">
+    {t.verify_email.fallback}
+  </p>
+  <p style="margin: 0; word-break: break-all;">
+    <a href={verify_url} style="color: #6a9b3c; font-size: 12px; text-decoration: underline;">
+      {verify_url}
+    </a>
+  </p>
+
+  <p slot="footer" style="margin: 0; color: #655650; font-size: 12px; line-height: 1.625;">
+    {t.verify_email.footer}
+  </p>
+</EmailLayout>

package/src/pages/error.astro

@@ -0,0 +1,26 @@
+---
+/** Error page for signed-in users (the framework renders `error`). */
+import { ssr } from "fse-ssr/ssr";
+import Layout from "../layouts/Layout.astro";
+import type { ErrorPage } from "../types/pages";
+
+const { t, error, status, lang_prefix } = ssr<ErrorPage & { status: number; lang_prefix: string }>();
+---
+
+<Layout title={t.common.error ?? "Error"}>
+  <main class="grid place-items-center min-h-[60vh]">
+    <div class="w-full max-w-md text-center flex flex-col items-center gap-5">
+      <div class="w-12 h-12 rounded-full bg-red-50 border border-red-200 flex items-center justify-center">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-red-500">
+          <circle cx="12" cy="12" r="10"></circle><path d="M12 8v4m0 4h.01"></path>
+        </svg>
+      </div>
+      <div>
+        <p class="text-xs font-semibold text-secondary-400 mb-1">{status}</p>
+        <h1 class="text-base font-semibold text-secondary-900 mb-1">{t.common.error ?? "Error"}</h1>
+        <p class="text-sm text-secondary-500">{error}</p>
+      </div>
+      <a href={`${lang_prefix}/`} class="btn-secondary">{t.common.back_home ?? "Back to home"}</a>
+    </div>
+  </main>
+</Layout>

package/src/pages/forgot-password.astro

@@ -0,0 +1,67 @@
+---
+import { ssr } from "fse-ssr/ssr";
+import Input from "../components/Input.astro";
+import Logo from "../components/Logo.astro";
+import Layout from "../layouts/Layout.astro";
+
+const { t, error, success } = ssr<{ error?: string; success?: string }>();
+const errors = t.errors as Record<string, string>;
+const messages = t.messages as Record<string, string>;
+---
+
+<Layout title={t.forgot_password.title} sidebar={false}>
+  <main class="min-h-screen w-full grid place-items-center bg-secondary-50 px-4 py-12">
+    <div class="w-full max-w-sm">
+      <div class="flex justify-center mb-8">
+        <a href="/">
+          <Logo class="h-12 w-auto" />
+        </a>
+      </div>
+
+      <div class="bg-white border border-secondary-200 rounded-xl overflow-hidden">
+        <div class="px-6 pt-6 pb-2">
+          <h1 class="text-lg font-semibold text-secondary-900 mb-1">
+            {t.forgot_password.title}
+          </h1>
+          <p class="text-sm text-secondary-500">
+            {t.forgot_password.description}
+          </p>
+        </div>
+
+        <form action="/forgot-password" method="POST" data-astro-reload>
+          <div class="px-6 py-4">
+            <Input id="email" type="email" placeholder={t.forgot_password.email} required={true} />
+          </div>
+
+          <div class="px-6 pb-5">
+            <button class="btn-primary w-full h-10 disabled:cursor-not-allowed disabled:opacity-50">
+              <span>{t.forgot_password.submit}</span>
+            </button>
+          </div>
+
+          {error && (
+            <div class="px-6 pb-4">
+              <div class="w-full px-4 py-3 text-sm text-red-600 border border-red-200 rounded-lg bg-red-50" role="alert">
+                <p>{errors[error] ?? error}</p>
+              </div>
+            </div>
+          )}
+
+          {success && (
+            <div class="px-6 pb-4">
+              <div class="w-full px-4 py-3 text-sm text-primary-700 border border-primary-200 rounded-lg bg-primary-50" role="alert">
+                <p>{messages[success] ?? success}</p>
+              </div>
+            </div>
+          )}
+        </form>
+
+        <div class="px-6 py-4 border-t border-secondary-100 text-center">
+          <a href="/login" class="text-sm text-primary-600 hover:text-primary-700 hover:underline font-medium">
+            {t.forgot_password.back_to_login}
+          </a>
+        </div>
+      </div>
+    </div>
+  </main>
+</Layout>

package/src/pages/fse/form.astro

@@ -0,0 +1,169 @@
+---
+/**
+ * Generic create/edit form — one page serves both (the server passes
+ * `is_new`). Widgets come from the column metadata; validation errors are
+ * re-rendered per field with codes translated through the app's locales.
+ * Without `can_edit` (no write permission, or the model's hooks locked the
+ * row) the same form renders disabled and without a save button. An
+ * existing row also shows its allowed row actions and links to its nested
+ * models and link tables; a nested model links back to its parent row.
+ */
+import { ssr } from "fse-ssr/ssr";
+import type { SsrValue } from "fse-ssr/ssr";
+import Layout from "../../layouts/Layout.astro";
+import type { ModelFormPage } from "../../types";
+
+const { t, lang_prefix, meta, row, errors, is_new, can_edit, can_delete, actions, parent } =
+  ssr<ModelFormPage>();
+const title = t.models[meta.table].title ?? meta.table;
+const formErrors = t.form_errors as Record<string, SsrValue<string>>;
+const inputClass =
+  "w-full px-3 py-2 text-sm border border-secondary-200 rounded-lg bg-white focus:outline-hidden focus:ring-2 focus:ring-primary-500";
+---
+
+<Layout title={title}>
+  <main class="max-w-2xl">
+    {parent && (
+      <a class="mb-2 inline-block text-sm text-secondary-500 hover:text-secondary-800" href={`${lang_prefix}${parent.meta.base_path}/${parent.row.id}`}>
+        ← {parent.row[parent.meta.title_field]}
+      </a>
+    )}
+    <div class="mb-6 flex items-center justify-between gap-4">
+      <h1 class="section-title">{title}</h1>
+      <a class="btn-ghost" href={`${lang_prefix}${meta.base_path}`}>{t.model_ui.back ?? "Back"}</a>
+    </div>
+
+    {!is_new && meta.has_subpages && (
+      <nav class="mb-6 flex flex-wrap gap-2">
+        {meta.children.map((child) => (
+          <a class="btn-secondary" href={`${lang_prefix}${meta.base_path}/${row.id}/${child.segment}`}>
+            {t.models[child.table].title ?? child.table}
+          </a>
+        ))}
+        {meta.links.map((link) => (
+          <a class="btn-secondary" href={`${lang_prefix}${meta.base_path}/${row.id}/${link.segment}`}>
+            {t.models[link.table].title ?? link.table}
+          </a>
+        ))}
+      </nav>
+    )}
+
+    {!can_edit && !is_new && (
+      <p class="mb-4 text-sm text-secondary-500">{t.model_ui.read_only ?? "This entry is read-only."}</p>
+    )}
+
+    <form
+      method="post"
+      action={is_new ? `${lang_prefix}${meta.base_path}/create` : `${lang_prefix}${meta.base_path}/${row.id}`}
+      class="bg-white border border-secondary-200 rounded-xl p-6 flex flex-col gap-5"
+    >
+      <fieldset disabled={!can_edit} class="contents">
+      {meta.form_columns.map((col) => (
+        <div>
+          <label for={col.name} class="block text-sm font-medium mb-1.5">
+            {t.models[meta.table].fields[col.name] ?? col.name}
+          </label>
+
+          {col.widget === "textarea" && (
+            <textarea id={col.name} name={col.name} rows="5" required={col.required} class={inputClass}>{row[col.name] ?? ""}</textarea>
+          )}
+          {col.widget === "json" && (
+            <textarea id={col.name} name={col.name} rows="5" class={`${inputClass} font-mono`}>{row[col.name] ?? ""}</textarea>
+          )}
+          {col.widget === "select" && (
+            <select id={col.name} name={col.name} required={col.required} class={inputClass}>
+              {!col.required && <option value="">—</option>}
+              {col.options && col.options.map((option) => (
+                <option value={option} selected={row[col.name] === option}>
+                  {t.models[meta.table].options[option] ?? option}
+                </option>
+              ))}
+            </select>
+          )}
+          {col.widget === "relation" && (
+            col.options ? (
+              <select id={col.name} name={col.name} required={col.required} class={inputClass}>
+                <option value="">{t.model_ui.choose ?? "Choose..."}</option>
+                {col.options.map((option) => (
+                  <option value={option.id} selected={row[col.name] === option.id}>{option.title}</option>
+                ))}
+              </select>
+            ) : (
+              <input id={col.name} type="number" name={col.name} value={row[col.name] ?? ""} required={col.required} class={inputClass} />
+            )
+          )}
+          {col.widget === "checkbox" && (
+            <input id={col.name} type="checkbox" name={col.name} value="true" checked={row[col.name]} class="h-4 w-4 rounded border-secondary-300 accent-primary-600" />
+          )}
+          {col.widget === "number" && (
+            <input id={col.name} type="number" step="any" name={col.name} value={row[col.name] ?? ""} required={col.required} class={inputClass} />
+          )}
+          {col.widget === "datetime" && (
+            <input id={col.name} type="datetime-local" name={col.name} value={row[col.name] ?? ""} required={col.required} class={inputClass} />
+          )}
+          {col.widget === "date" && (
+            <input id={col.name} type="date" name={col.name} value={row[col.name] ?? ""} required={col.required} class={inputClass} />
+          )}
+          {col.widget === "email" && (
+            <input id={col.name} type="email" name={col.name} value={row[col.name] ?? ""} required={col.required} class={inputClass} />
+          )}
+          {col.widget === "url" && (
+            <input id={col.name} type="url" name={col.name} value={row[col.name] ?? ""} required={col.required} class={inputClass} />
+          )}
+          {col.widget === "text" && (
+            <input id={col.name} type="text" name={col.name} value={row[col.name] ?? ""} required={col.required} class={inputClass} />
+          )}
+
+          {errors.map((error) => error.field === col.name && (
+            <p class="mt-1.5 text-sm text-red-600">
+              {formErrors[error.code] ?? error.code}
+            </p>
+          ))}
+        </div>
+      ))}
+      </fieldset>
+
+      <div class="flex items-center gap-3 pt-2">
+        {can_edit && (
+          <button type="submit" class="btn-primary">
+            {t.model_ui.save ?? "Save"}
+          </button>
+        )}
+        <a class="btn-secondary" href={`${lang_prefix}${meta.base_path}`}>{t.model_ui.cancel ?? "Cancel"}</a>
+        {can_delete && (
+          <button
+            type="button"
+            class="btn-danger ml-auto"
+            data-fse-delete={`${lang_prefix}${meta.base_path}/${row.id}`}
+            data-back={`${lang_prefix}${meta.base_path}`}
+            data-confirm={t.model_ui.confirm_delete ?? "Delete this entry?"}
+          >
+            {t.model_ui.delete ?? "Delete"}
+          </button>
+        )}
+      </div>
+    </form>
+
+    {actions.length > 0 && (
+      <div class="mt-4 flex flex-wrap gap-2">
+        {actions.map((action) => (
+          <form method="post" action={`${lang_prefix}${meta.base_path}/${row.id}/actions/${action}`}>
+            <button type="submit" class="btn-secondary">
+              {t.models[meta.table].actions[action] ?? action}
+            </button>
+          </form>
+        ))}
+      </div>
+    )}
+  </main>
+
+  <script>
+    for (const btn of document.querySelectorAll<HTMLButtonElement>("[data-fse-delete]")) {
+      btn.addEventListener("click", async () => {
+        if (!confirm(btn.getAttribute("data-confirm") ?? "Delete?")) return;
+        const res = await fetch(btn.getAttribute("data-fse-delete") ?? "", { method: "DELETE" });
+        if (res.ok) location.href = btn.getAttribute("data-back") ?? "/";
+      });
+    }
+  </script>
+</Layout>

package/src/pages/fse/links.astro

@@ -0,0 +1,104 @@
+---
+/**
+ * Generic many-to-many page (`#[model(link = ...)]`): the rows of another
+ * model linked to one row, with a search to add more and a button to remove
+ * each. Mounted at `{owner base}/{id}/{segment}`; override it per owner with
+ * a page at that namespace (e.g. `event-manager/managers`).
+ */
+import { ssr } from "fse-ssr/ssr";
+import Layout from "../../layouts/Layout.astro";
+import type { ModelLinksPage } from "../../types";
+
+const { t, lang_prefix, parent, link, linked, can_write } = ssr<ModelLinksPage>();
+const title = t.models[link.table].title ?? link.table;
+---
+
+<Layout title={title}>
+  <main class="max-w-2xl">
+    <a class="mb-2 inline-block text-sm text-secondary-500 hover:text-secondary-800" href={`${lang_prefix}${parent.meta.base_path}/${parent.row.id}`}>
+      ← {parent.row[parent.meta.title_field]}
+    </a>
+    <h1 class="section-title mb-6">{title}</h1>
+
+    <div class="bg-white border border-secondary-200 rounded-xl">
+      {linked.length === 0 && (
+        <p class="p-6 text-sm text-secondary-500">{t.model_ui.no_links ?? "Nothing linked yet."}</p>
+      )}
+      {linked.map((item) => (
+        <div class="flex items-center justify-between gap-4 px-4 py-3 border-b border-secondary-100 last:border-b-0">
+          <span>{item.title}</span>
+          {can_write && (
+            <button
+              type="button"
+              class="btn-ghost"
+              data-fse-unlink={`${lang_prefix}${link.base_path}/${item.id}`}
+            >
+              {t.model_ui.remove_link ?? "Remove"}
+            </button>
+          )}
+        </div>
+      ))}
+    </div>
+
+    {can_write && (
+      <div class="mt-6" data-fse-link-picker={`${lang_prefix}${link.base_path}`}>
+        <input
+          type="search"
+          data-fse-link-search
+          placeholder={t.model_ui.search_to_add ?? "Search to add..."}
+          class="w-full px-3 py-2 text-sm border border-secondary-200 rounded-lg bg-white focus:outline-hidden focus:ring-2 focus:ring-primary-500"
+        />
+        <form method="post" action={`${lang_prefix}${link.base_path}`} data-fse-link-results class="mt-2 flex flex-col gap-1"></form>
+        <template data-fse-link-labels data-add={t.model_ui.add_link ?? "Add"} data-linked={t.model_ui.linked ?? "Linked"}></template>
+      </div>
+    )}
+  </main>
+
+  <script>
+    for (const btn of document.querySelectorAll<HTMLButtonElement>("[data-fse-unlink]")) {
+      btn.addEventListener("click", async () => {
+        const res = await fetch(btn.getAttribute("data-fse-unlink") ?? "", { method: "DELETE" });
+        if (res.ok) location.reload();
+      });
+    }
+
+    const picker = document.querySelector<HTMLElement>("[data-fse-link-picker]");
+    const search = picker?.querySelector<HTMLInputElement>("[data-fse-link-search]");
+    const results = picker?.querySelector<HTMLFormElement>("[data-fse-link-results]");
+    const labels = picker?.querySelector<HTMLElement>("[data-fse-link-labels]");
+    let timer: number | undefined;
+    search?.addEventListener("input", () => {
+      window.clearTimeout(timer);
+      timer = window.setTimeout(async () => {
+        const base = picker?.getAttribute("data-fse-link-picker") ?? "";
+        const res = await fetch(`${base}/candidates?search=${encodeURIComponent(search.value)}`);
+        if (!res.ok || !results) return;
+        const { rows } = (await res.json()) as { rows: { id: number; title: string; linked: boolean }[] };
+        results.replaceChildren(
+          ...rows.map((row) => {
+            const line = document.createElement("div");
+            line.className = "flex items-center justify-between gap-4 px-3 py-2 rounded-lg hover:bg-secondary-50";
+            const name = document.createElement("span");
+            name.textContent = String(row.title);
+            line.append(name);
+            if (row.linked) {
+              const done = document.createElement("span");
+              done.className = "text-sm text-secondary-400";
+              done.textContent = labels?.dataset.linked ?? "Linked";
+              line.append(done);
+            } else {
+              const add = document.createElement("button");
+              add.type = "submit";
+              add.name = "id";
+              add.value = String(row.id);
+              add.className = "btn-secondary";
+              add.textContent = labels?.dataset.add ?? "Add";
+              line.append(add);
+            }
+            return line;
+          }),
+        );
+      }, 200);
+    });
+  </script>
+</Layout>

package/src/pages/fse/list.astro

@@ -0,0 +1,166 @@
+---
+/**
+ * Generic admin list page — rendered for every #[model] struct that doesn't
+ * bring its own list template. Columns, search, filters and pagination all
+ * come from the model metadata the framework injects; labels resolve from
+ * the app's locales (models.{table}.fields.{column}) with the raw name as
+ * fallback.
+ */
+import { ssr } from "fse-ssr/ssr";
+import Layout from "../../layouts/Layout.astro";
+import type { ModelListPage } from "../../types";
+
+const { t, lang_prefix, meta, rows, page, total_pages, total, has_prev, has_next, prev_page, next_page, search, filters, can_create, parent } =
+  ssr<ModelListPage>();
+const title = t.models[meta.table].title ?? meta.table;
+---
+
+<Layout title={title}>
+  <main>
+    {parent && (
+      <a class="mb-2 inline-block text-sm text-secondary-500 hover:text-secondary-800" href={`${lang_prefix}${parent.meta.base_path}/${parent.row.id}`}>
+        ← {parent.row[parent.meta.title_field]}
+      </a>
+    )}
+    <div class="mb-6 flex items-center justify-between gap-4">
+      <h1 class="section-title">{title}</h1>
+      {can_create && (
+        <a class="btn-primary" href={`${lang_prefix}${meta.base_path}/create`}>
+          {t.model_ui.new ?? "New"}
+        </a>
+      )}
+    </div>
+
+    <div class="bg-white border border-secondary-200 rounded-xl overflow-hidden">
+      <form method="get" class="flex flex-wrap items-center gap-3 p-4 border-b border-secondary-200">
+        <input
+          type="search"
+          name="search"
+          value={search ?? ""}
+          placeholder={t.model_ui.search ?? "Search..."}
+          class="flex-1 min-w-40 px-3 py-2 text-sm border border-secondary-200 rounded-lg bg-white focus:outline-hidden focus:ring-2 focus:ring-primary-500"
+        />
+        {meta.filter_columns.map((col) => (
+          <>
+            {col.filter === "exact" && (
+              <select
+                name={col.name}
+                class="px-3 py-2 text-sm border border-secondary-200 rounded-lg bg-white"
+              >
+                <option value="">{t.models[meta.table].fields[col.name] ?? col.name}</option>
+                {col.options && col.options.map((option) => (
+                  <option value={option} selected={filters[col.name] === option}>
+                    {t.models[meta.table].options[option] ?? option}
+                  </option>
+                ))}
+              </select>
+            )}
+            {col.filter === "contains" && (
+              <input
+                type="text"
+                name={col.name}
+                value={filters[col.name]}
+                placeholder={t.models[meta.table].fields[col.name] ?? col.name}
+                class="min-w-32 px-3 py-2 text-sm border border-secondary-200 rounded-lg bg-white"
+              />
+            )}
+            {col.filter === "range" && (
+              <span class="flex items-center gap-1.5 text-sm text-secondary-500">
+                {t.models[meta.table].fields[col.name] ?? col.name}
+                {col.filter_params.map((param) => (
+                  <input
+                    type={col.widget === "number" ? "number" : "date"}
+                    name={param}
+                    value={filters[param]}
+                    class="px-2 py-2 text-sm border border-secondary-200 rounded-lg bg-white"
+                  />
+                ))}
+              </span>
+            )}
+          </>
+        ))}
+        <button class="btn-secondary" type="submit">{t.model_ui.filter ?? "Filter"}</button>
+      </form>
+
+      <table class="w-full text-sm">
+        <thead>
+          <tr class="text-left text-secondary-500 border-b border-secondary-200">
+            {meta.list_columns.map((col) => (
+              <th class="px-4 py-3 font-medium">
+                <a href={`?sort=${col.name}&search=${search ?? ""}`}>
+                  {t.models[meta.table].fields[col.name] ?? col.name}
+                </a>
+              </th>
+            ))}
+            <th class="px-4 py-3"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => (
+            <tr class="border-b border-secondary-100 last:border-b-0 hover:bg-secondary-50">
+              {meta.list_columns.map((col) => (
+                <td class="px-4 py-3">
+                  {col.relation ? (
+                    row[col.relation] && row[col.relation].title
+                  ) : (
+                    row[col.display]
+                  )}
+                </td>
+              ))}
+              <td class="px-4 py-3 text-right whitespace-nowrap">
+                {row._actions && row._actions.map((action: string) => (
+                  <form method="post" class="inline" action={`${lang_prefix}${meta.base_path}/${row.id}/actions/${action}`}>
+                    <button type="submit" class="btn-ghost">{t.models[meta.table].actions[action] ?? action}</button>
+                  </form>
+                ))}
+                <a class="btn-ghost" href={`${lang_prefix}${meta.base_path}/${row.id}`}>
+                  {t.model_ui.edit ?? "Edit"}
+                </a>
+                {meta.can_write && !meta.no_delete && (
+                  <button
+                    type="button"
+                    class="btn-danger"
+                    data-fse-delete={`${lang_prefix}${meta.base_path}/${row.id}`}
+                    data-confirm={t.model_ui.confirm_delete ?? "Delete this entry?"}
+                  >
+                    {t.model_ui.delete ?? "Delete"}
+                  </button>
+                )}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {rows.length === 0 && (
+        <p class="p-6 text-sm text-secondary-500">{t.model_ui.no_entries ?? "No entries yet."}</p>
+      )}
+
+      <div class="flex items-center justify-between gap-4 p-4 border-t border-secondary-200 text-sm text-secondary-500">
+        <span>{total} {t.model_ui.entries ?? "entries"}</span>
+        <div class="flex items-center gap-2">
+          {has_prev && (
+            <a class="btn-ghost" href={`?page=${prev_page}&search=${search ?? ""}`}>
+              {t.model_ui.prev ?? "Previous"}
+            </a>
+          )}
+          <span>{page} / {total_pages}</span>
+          {has_next && (
+            <a class="btn-ghost" href={`?page=${next_page}&search=${search ?? ""}`}>
+              {t.model_ui.next ?? "Next"}
+            </a>
+          )}
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <script>
+    for (const btn of document.querySelectorAll<HTMLButtonElement>("[data-fse-delete]")) {
+      btn.addEventListener("click", async () => {
+        if (!confirm(btn.getAttribute("data-confirm") ?? "Delete?")) return;
+        const res = await fetch(btn.getAttribute("data-fse-delete") ?? "", { method: "DELETE" });
+        if (res.ok) location.reload();
+      });
+    }
+  </script>
+</Layout>