pgkiln 0.84.0 → 0.86.0

package/src/builder/blueprints.ts

@@ -16,6 +16,7 @@ import { devDbForApp } from '../workspace-db.ts';
 import { isAdmin } from './locks.ts';
 import { back, BASE, csrf, developer, flash, region, send, shell, type Req } from './ui.ts';
 import { WIZARD_KINDS } from './wizards.ts';
+import { scopedTx as tx } from './i18n.ts';
 
 // Create → From a blueprint (migration 063, src/blueprint.ts): saved
 // blueprints, an editor (JSON), an AI draft from a description (the App
@@ -68,38 +69,38 @@ const signed = (s: Session, spec: string, sig: unknown) => {
 };
 
 function parse(spec: string): { json: unknown; error: string | null } {
-  if (spec.length > MAX_SPEC_CHARS) return { json: null, error: `The blueprint is too long (at most ${MAX_SPEC_CHARS} characters).` };
+  if (spec.length > MAX_SPEC_CHARS) return { json: null, error: tx('bp.too_long', { n: MAX_SPEC_CHARS }) };
   try {
     return { json: JSON.parse(spec), error: null };
   } catch (e) {
-    return { json: null, error: `Not valid JSON: ${(e as Error).message}` };
+    return { json: null, error: tx('bp.bad_json', { error: (e as Error).message }) };
   }
 }
 
 const page = (s: Session, reply: FastifyReply, crumb: string, main: Raw) =>
-  send(reply, s, shell(s, 'Blueprints', [['App Builder', BASE], ['Create', `${BASE}/create`], ['Blueprints', `${BASE}/blueprints`], ...(crumb ? [[crumb] as [string]] : [])], html`<div class="ab-narrow">${main}</div>`));
+  send(reply, s, shell(s, tx('bp.blueprints'), [[tx('bp.app_builder'), BASE], [tx('bp.create'), `${BASE}/create`], [tx('bp.blueprints'), `${BASE}/blueprints`], ...(crumb ? [[crumb] as [string]] : [])], html`<div class="ab-narrow">${main}</div>`));
 
 async function editor(s: Session, reply: FastifyReply, o: { id?: number | null; name: string; spec: string; description?: string; message?: Raw }) {
   const svc = await builderService();
-  return page(s, reply, o.id ? o.name : 'New blueprint', html`<h1>${o.id ? `Blueprint: ${o.name}` : 'New blueprint'}</h1>
-    <p class="muted">A blueprint describes an application: its tables (every table gets an <code>id</code>; <code>"references"</code> makes a foreign key), pages (${PAGE_TYPES.join(', ')}), menu and sample rows. <b>Review</b> shows what it will create; nothing is created before you confirm it there.</p>
+  return page(s, reply, o.id ? o.name : tx('bp.new_blueprint'), html`<h1>${o.id ? tx('bp.title', { name: o.name }) : tx('bp.new_blueprint')}</h1>
+    <p class="muted">${tx.rich('bp.intro', { id: html`<code>id</code>`, references: html`<code>"references"</code>`, pages: PAGE_TYPES.join(', '), review: html`<b>${tx('bp.review')}</b>` })}</p>
     ${o.message ?? ''}
-    ${region('Draft with AI', svc
+    ${region(tx('bp.draft_with_ai'), svc
       ? html`<form method="post" action="${BASE}/blueprints/draft">${csrf(s)}
           <input type="hidden" name="id" value="${o.id ?? ''}"><input type="hidden" name="name" value="${o.name}">
-          <div class="field"><label class="label" for="f_description">Describe the application</label>
-            <textarea id="f_description" name="description" rows="3" maxlength="4000" required placeholder="e.g. Track projects with tasks and due dates, and the hours people spend on them">${o.description ?? ''}</textarea>
-            <small class="help">The AI service ${svc.name} writes a blueprint into the editor below (replacing what is there). Only your description is sent.</small></div>
-          <div class="buttons"><button class="btn" data-busy="Thinking…">Draft a blueprint</button></div>
+          <div class="field"><label class="label" for="f_description">${tx('bp.describe_the_application')}</label>
+            <textarea id="f_description" name="description" rows="3" maxlength="4000" required placeholder="${tx('bp.e_g_track_projects_with')}">${o.description ?? ''}</textarea>
+            <small class="help">${tx('bp.ai_help', { service: svc.name })}</small></div>
+          <div class="buttons"><button class="btn" data-busy="${tx('bp.thinking')}">${tx('bp.draft_a_blueprint')}</button></div>
         </form>`
-      : html`<p class="muted">The App Builder has no AI service: an administrator chooses one under <a href="${BASE}/sql/ai">SQL Workshop → AI</a>. You can write the blueprint yourself.</p>`)}
-    ${region('Blueprint', html`<form method="post" action="${BASE}/blueprints/review">${csrf(s)}
+      : html`<p class="muted">${tx.rich('bp.no_service', { link: html`<a href="${BASE}/sql/ai">${tx('bp.sql_workshop_ai')}</a>` })}</p>`)}
+    ${region(tx('bp.blueprint'), html`<form method="post" action="${BASE}/blueprints/review">${csrf(s)}
       <input type="hidden" name="id" value="${o.id ?? ''}">
-      <div class="form-grid"><div class="field"><label class="label" for="f_name">Name</label><input id="f_name" name="name" maxlength="100" required value="${o.name}"></div></div>
+      <div class="form-grid"><div class="field"><label class="label" for="f_name">${tx('bp.name')}</label><input id="f_name" name="name" maxlength="100" required value="${o.name}"></div></div>
       <div class="field"><label class="label" for="f_spec">JSON</label>
         <textarea id="f_spec" name="spec" class="code" rows="24" spellcheck="false" data-code="json">${o.spec}</textarea>
-        <small class="help">Column types: ${Object.keys(COLUMN_TYPES).join(', ')}; <code>"required"</code>, <code>"unique"</code>, <code>"values"</code> (allowed texts). Page types: ${WIZARD_KINDS.map(([k]) => k).join(', ')} and blank (<code>"text"</code>). Optional: <code>"dashboard": true</code>, <code>"navigation": [{"label", "page", "icon"}]</code>, <code>"sample_data": [{"table", "columns", "rows"}]</code>.</small></div>
-      <div class="buttons"><button class="btn btn-hot">Review</button><button class="btn" formaction="${BASE}/blueprints/save">Save</button></div>
+        <small class="help">${tx.rich('bp.spec_help', { types: Object.keys(COLUMN_TYPES).join(', '), required: html`<code>"required"</code>`, unique: html`<code>"unique"</code>`, values: html`<code>"values"</code>`, kinds: WIZARD_KINDS.map(([k]) => k).join(', '), text: html`<code>"text"</code>`, dashboard: html`<code>"dashboard": true</code>`, navigation: html`<code>"navigation": [{"label", "page", "icon"}]</code>`, sample: html`<code>"sample_data": [{"table", "columns", "rows"}]</code>` })}</small></div>
+      <div class="buttons"><button class="btn btn-hot">${tx('bp.review')}</button><button class="btn" formaction="${BASE}/blueprints/save">${tx('bp.save')}</button></div>
     </form>`)}`);
 }
 
@@ -107,28 +108,28 @@ function review(s: Session, bp: Blueprint, spec: string, id: number | null, name
   const sql = blueprintSql(bp);
   const rows = (t: string) => bp.sample_data.filter((d) => d.table === t).reduce((n, d) => n + d.rows.length, 0);
   return html`<h1>Review: ${bp.name}</h1>
-    <p class="muted">This is what the blueprint creates. Check it; go back to change it, or create the application.</p>
-    ${region('Application', html`<dl class="bp-facts">
-      <dt>Name</dt><dd>${bp.name}</dd><dt>Alias</dt><dd><code>/a/${bp.alias}</code></dd>
-      <dt>Schema</dt><dd><code>${bp.schema}</code> (database role <code>app_${bp.alias.replace(/-/g, '_')}</code>)</dd>
-      <dt>Sign-in</dt><dd>${bp.authentication === 'none' ? 'none: every page is public' : 'a login page (application users)'}</dd></dl>`)}
-    ${region('Tables', html`<div class="table-wrap"><table class="report report-reflow"><thead><tr><th scope="col">Table</th><th scope="col">Columns</th><th scope="col" class="num">Sample rows</th></tr></thead><tbody>
-      ${bp.tables.map((t) => html`<tr><td data-label="Table"><code>${t.name}</code>${t.label ? html` <span class="muted">${t.label}</span>` : ''}</td>
-        <td data-label="Columns">${t.columns.map((c, i) => html`${i ? ', ' : ''}<code>${c.name}</code> <span class="muted">${c.references ? `→ ${c.references}` : c.type}${c.required ? ', required' : ''}${c.unique ? ', unique' : ''}${c.values.length ? `, ${c.values.join(' / ')}` : ''}</span>`)}</td>
-        <td data-label="Sample rows" class="num">${rows(t.name)}</td></tr>`)}
+    <p class="muted">${tx('bp.this_is_what_the_blueprint')}</p>
+    ${region(tx('bp.application'), html`<dl class="bp-facts">
+      <dt>${tx('bp.name')}</dt><dd>${bp.name}</dd><dt>${tx('bp.alias')}</dt><dd><code>/a/${bp.alias}</code></dd>
+      <dt>${tx('bp.schema')}</dt><dd><code>${bp.schema}</code> ${tx.rich('bp.db_role', { role: html`<code>app_${bp.alias.replace(/-/g, '_')}</code>` })}</dd>
+      <dt>${tx('bp.sign_in')}</dt><dd>${bp.authentication === 'none' ? 'none: every page is public' : 'a login page (application users)'}</dd></dl>`)}
+    ${region(tx('bp.tables'), html`<div class="table-wrap"><table class="report report-reflow"><thead><tr><th scope="col">${tx('bp.table')}</th><th scope="col">${tx('bp.columns')}</th><th scope="col" class="num">${tx('bp.sample_rows')}</th></tr></thead><tbody>
+      ${bp.tables.map((t) => html`<tr><td data-label="${tx('bp.table')}"><code>${t.name}</code>${t.label ? html` <span class="muted">${t.label}</span>` : ''}</td>
+        <td data-label="${tx('bp.columns')}">${t.columns.map((c, i) => html`${i ? ', ' : ''}<code>${c.name}</code> <span class="muted">${c.references ? `→ ${c.references}` : c.type}${c.required ? ', required' : ''}${c.unique ? ', unique' : ''}${c.values.length ? `, ${c.values.join(' / ')}` : ''}</span>`)}</td>
+        <td data-label="${tx('bp.sample_rows')}" class="num">${rows(t.name)}</td></tr>`)}
     </tbody></table></div>
-    <details class="u-mt1"><summary>The SQL</summary><pre class="bp-sql">${sql.join(';\n\n')};</pre></details>`)}
-    ${region('Pages', html`<ul>${bp.pages.map((p) => html`<li>Page ${p.page}${p.form_page ? html` and ${p.form_page}` : ''}: ${p.label} <span class="muted">(${p.type}${p.table ? ` on ${p.table}` : ''})</span></li>`)}
-      ${bp.dashboard ? html`<li>A dashboard with charts per table</li>` : ''}</ul>
-      ${bp.navigation ? html`<p>Menu: ${bp.navigation.map((n) => n.label).join(' · ')}</p>` : html`<p class="muted">Menu: Home and the pages' own entries.</p>`}`)}
-    ${region('Create the application', html`<form method="post" action="${BASE}/blueprints/create">${csrf(s)}
+    <details class="u-mt1"><summary>${tx('bp.the_sql')}</summary><pre class="bp-sql">${sql.join(';\n\n')};</pre></details>`)}
+    ${region(tx('bp.pages'), html`<ul>${bp.pages.map((p) => html`<li>Page ${p.page}${p.form_page ? html` and ${p.form_page}` : ''}: ${p.label} <span class="muted">(${p.type}${p.table ? ` on ${p.table}` : ''})</span></li>`)}
+      ${bp.dashboard ? html`<li>${tx('bp.a_dashboard_with_charts_per')}</li>` : ''}</ul>
+      ${bp.navigation ? html`<p>Menu: ${bp.navigation.map((n) => n.label).join(' · ')}</p>` : html`<p class="muted">${tx('bp.menu_home_and_the_pages')}</p>`}`)}
+    ${region(tx('bp.create_the_application'), html`<form method="post" action="${BASE}/blueprints/create">${csrf(s)}
       <input type="hidden" name="id" value="${id ?? ''}"><input type="hidden" name="name" value="${name}">
       <input type="hidden" name="spec" value="${spec}"><input type="hidden" name="sig" value="${sign(s, spec)}">
       ${bp.authentication === 'none' ? '' : html`<div class="form-grid">
-        <div class="field"><label class="label" for="f_admin_user">First user (admin role)</label><input id="f_admin_user" name="admin_user" required value="${s.username}" autocomplete="off"></div>
-        <div class="field"><label class="label" for="f_admin_password">Password (for a new account)</label><input id="f_admin_password" name="admin_password" type="password" autocomplete="new-password"></div>
+        <div class="field"><label class="label" for="f_admin_user">${tx('bp.first_user_admin_role')}</label><input id="f_admin_user" name="admin_user" required value="${s.username}" autocomplete="off"></div>
+        <div class="field"><label class="label" for="f_admin_password">${tx('bp.password_for_a_new_account')}</label><input id="f_admin_password" name="admin_password" type="password" autocomplete="new-password"></div>
       </div>`}
-      <div class="buttons"><button class="btn" formaction="${BASE}/blueprints/edit">Back to the editor</button><button class="btn btn-hot">${icon('plus')} Create the application</button></div>
+      <div class="buttons"><button class="btn" formaction="${BASE}/blueprints/edit">${tx('bp.back_to_the_editor')}</button><button class="btn btn-hot">${icon('plus')} ${tx('bp.create_the_application')}</button></div>
     </form>`)}`;
 }
 
@@ -140,10 +141,10 @@ export async function openBlueprint(s: Session, reply: FastifyReply, name: strin
   const { json, error } = parse(spec);
   const { blueprint, problems } = error ? { blueprint: null, problems: [error] } : checkBlueprint(json);
   const taken = blueprint ? await owner.one('select 1 from meta.app where alias = $1', [blueprint.alias]) : null;
-  if (taken) problems.push(`An application with the alias ${blueprint!.alias} already exists: change "alias" and "schema" in the blueprint.`);
+  if (taken) problems.push(tx('bp.alias_taken', { alias: blueprint!.alias }));
   if (!blueprint || problems.length)
-    return editor(s, reply, { name, spec, message: html`<div class="alert alert-error" role="alert"><p>The blueprint can't be created yet:</p><ul>${problems.map((p) => html`<li>${p}</li>`)}</ul></div>` });
-  return page(s, reply, 'Review', review(s, blueprint, spec, null, name));
+    return editor(s, reply, { name, spec, message: html`<div class="alert alert-error" role="alert"><p>${tx('bp.the_blueprint_can_t_be')}</p><ul>${problems.map((p) => html`<li>${p}</li>`)}</ul></div>` });
+  return page(s, reply, tx('bp.review_title'), review(s, blueprint, spec, null, name));
 }
 
 export async function blueprintRoutes(app: FastifyInstance) {
@@ -152,23 +153,23 @@ export async function blueprintRoutes(app: FastifyInstance) {
     if (!s) return;
     const list = (await owner.query(`select b.id, b.name, b.created_by, b.updated_at::text as updated, a.id as app_id, a.alias from meta.blueprint b left join meta.app a on a.id = b.app_id where b.workspace_id = $1 order by lower(b.name), b.id`, [currentWorkspace(s)])).rows;
     const apps = (await owner.query(`select id, name, alias from meta.app where meta.app_workspace(id) = $1 order by lower(name), id`, [currentWorkspace(s)])).rows;
-    return page(s, reply, '', html`<h1>Blueprints</h1>
-      <p class="muted">Describe an application as a blueprint (tables, pages, menu, sample rows), review it and create it. <a class="btn btn-hot" href="${BASE}/blueprints/new">${icon('plus')} New blueprint</a></p>
+    return page(s, reply, '', html`<h1>${tx('bp.blueprints')}</h1>
+      <p class="muted">${tx('bp.list_intro')} <a class="btn btn-hot" href="${BASE}/blueprints/new">${icon('plus')} ${tx('bp.new_blueprint')}</a></p>
       ${list.length
-        ? html`<div class="table-wrap"><table class="report report-reflow"><thead><tr><th scope="col">Blueprint</th><th scope="col">Application created</th><th scope="col">Changed</th><th scope="col"></th></tr></thead><tbody>
-            ${list.map((x) => html`<tr><td data-label="Blueprint"><a href="${BASE}/blueprints/${x.id}">${x.name}</a> <span class="muted">${x.created_by ?? ''}</span></td>
-              <td data-label="Application created">${x.app_id ? html`<a href="${BASE}/apps/${x.app_id}">${x.alias}</a>` : '—'}</td><td data-label="Changed">${String(x.updated).slice(0, 16)}</td>
-              <td><form method="post" action="${BASE}/blueprints/${x.id}/delete">${csrf(s)}<button class="btn btn-small">Delete</button></form></td></tr>`)}
+        ? html`<div class="table-wrap"><table class="report report-reflow"><thead><tr><th scope="col">${tx('bp.blueprint')}</th><th scope="col">${tx('bp.application_created')}</th><th scope="col">${tx('bp.changed')}</th><th scope="col"></th></tr></thead><tbody>
+            ${list.map((x) => html`<tr><td data-label="${tx('bp.blueprint')}"><a href="${BASE}/blueprints/${x.id}">${x.name}</a> <span class="muted">${x.created_by ?? ''}</span></td>
+              <td data-label="${tx('bp.application_created')}">${x.app_id ? html`<a href="${BASE}/apps/${x.app_id}">${x.alias}</a>` : '—'}</td><td data-label="${tx('bp.changed')}">${String(x.updated).slice(0, 16)}</td>
+              <td><form method="post" action="${BASE}/blueprints/${x.id}/delete">${csrf(s)}<button class="btn btn-small">${tx('bp.delete')}</button></form></td></tr>`)}
           </tbody></table></div>`
-        : html`<p class="muted">No saved blueprints yet.</p>`}
-      ${apps.length ? region('From an application', html`<form method="post" action="${BASE}/blueprints/from-app">${csrf(s)}
-        <p class="muted u-mt0">A blueprint of an application of this workspace: the tables its pages use, its pages and its menu, to review and change in the editor (for a copy, a new version or a test system). Nothing is created until you confirm the review.</p>
+        : html`<p class="muted">${tx('bp.no_saved_blueprints_yet')}</p>`}
+      ${apps.length ? region(tx('bp.from_an_application'), html`<form method="post" action="${BASE}/blueprints/from-app">${csrf(s)}
+        <p class="muted u-mt0">${tx('bp.a_blueprint_of_an_application')}</p>
         <div class="form-grid">
-          <div class="field"><label class="label" for="f_bp_app">Application</label><select id="f_bp_app" name="app">${apps.map((a) => html`<option value="${a.id}">${a.name} (${a.alias})</option>`)}</select></div>
-          <div class="field"><label class="check"><input type="checkbox" name="rows" value="true"> Sample rows: up to 20 per table</label>
-            <small class="help">The rows are copied into the blueprint as they are: leave this off for personal or confidential data.</small></div>
+          <div class="field"><label class="label" for="f_bp_app">${tx('bp.application')}</label><select id="f_bp_app" name="app">${apps.map((a) => html`<option value="${a.id}">${a.name} (${a.alias})</option>`)}</select></div>
+          <div class="field"><label class="check"><input type="checkbox" name="rows" value="true"> ${tx('bp.sample_rows_up_to_20')}</label>
+            <small class="help">${tx('bp.the_rows_are_copied_into')}</small></div>
         </div>
-        <div class="buttons"><button class="btn">${icon('layers')} Create a blueprint</button></div></form>`) : ''}`);
+        <div class="buttons"><button class="btn">${icon('layers')} ${tx('bp.create_a_blueprint')}</button></div></form>`) : ''}`);
   });
 
   // (sprint 66) a blueprint from an application of the current workspace, opened in the editor
@@ -184,15 +185,15 @@ export async function blueprintRoutes(app: FastifyInstance) {
     await logActivity({ appId: a.id, username: s.username, event: 'blueprint', ip: clientIp(req), detail: `blueprint from the application${rows ? ', with sample rows' : ''}` });
     return editor(s, reply, {
       name: `${a.name} blueprint`.slice(0, 100), spec: JSON.stringify(spec, null, 2),
-      message: html`<div class="alert alert-info" role="status"><p>A blueprint of ${a.name}: review it, change the name, alias and schema, then <b>Review</b>.</p>
-        ${notes.length ? html`<details><summary>${notes.length} note${notes.length === 1 ? '' : 's'} on what didn't carry over</summary><ul>${notes.map((n) => html`<li>${n}</li>`)}</ul></details>` : ''}</div>`,
+      message: html`<div class="alert alert-info" role="status"><p>${tx.rich('bp.of_app', { app: a.name, review: html`<b>${tx('bp.review')}</b>` })}</p>
+        ${notes.length ? html`<details><summary>${notes.length === 1 ? tx('bp.notes_1') : tx('bp.notes', { n: notes.length })}</summary><ul>${notes.map((n) => html`<li>${n}</li>`)}</ul></details>` : ''}</div>`,
     });
   });
 
   app.get(`${BASE}/blueprints/new`, async (req: Req, reply) => {
     const s = await developer(req, reply);
     if (!s) return;
-    return editor(s, reply, { name: 'Projects', spec: JSON.stringify(EXAMPLE, null, 2) });
+    return editor(s, reply, { name: tx('bp.projects'), spec: JSON.stringify(EXAMPLE, null, 2) });
   });
 
   app.get(`${BASE}/blueprints/:id(^\\d+$)`, async (req: Req, reply) => {
@@ -225,7 +226,7 @@ export async function blueprintRoutes(app: FastifyInstance) {
       ? (await owner.one('update meta.blueprint set name = $2, spec = $3, updated_at = now() where id = $1 and workspace_id = $4 returning id', [o.id, o.name, JSON.stringify(json), currentWorkspace(s)]))?.id
       : (await owner.one('insert into meta.blueprint (name, spec, created_by, workspace_id) values ($1, $2, $3, $4) returning id', [o.name, JSON.stringify(json), s.username, currentWorkspace(s)])).id;
     if (!id) return reply.code(404).send('Not found');
-    flash(s, `Blueprint ${o.name} saved.`);
+    flash(s, tx('bp.saved', { name: o.name }));
     return back(reply, s, `${BASE}/blueprints/${id}`);
   });
 
@@ -236,8 +237,8 @@ export async function blueprintRoutes(app: FastifyInstance) {
     const description = String(req.body?.description ?? '').trim().slice(0, 4000);
     try {
       const svc = await builderService();
-      if (!svc) throw new AiError('config', 'The App Builder has no AI service yet.');
-      if (!description) throw new AiError('config', 'Describe the application.');
+      if (!svc) throw new AiError('config', tx('bp.the_app_builder_has_no'));
+      if (!description) throw new AiError('config', tx('bp.describe_the_application_2'));
       const res = await generate(svc.name, {
         system: 'You design small business web applications on PostgreSQL as blueprints. Use singular lower-case table names, a few meaningful columns per table, '
           + '"references" for relations (never an id column: every table has one), "values" for short fixed lists, and pages of the given types (report_form for the main tables; '
@@ -248,7 +249,7 @@ export async function blueprintRoutes(app: FastifyInstance) {
       }, { appId: null, user: s.username, source: 'builder' });
       const spec = JSON.stringify(fromDraft(res.json), null, 2);
       return editor(s, reply, { ...o, name: o.id ? o.name : String((res.json as any)?.name ?? o.name).slice(0, 100), spec, description,
-        message: html`<div class="alert alert-info">Drafted by AI: review it before you create anything.</div>` });
+        message: html`<div class="alert alert-info">${tx('bp.drafted_by_ai_review_it')}</div>` });
     } catch (e) {
       return editor(s, reply, { ...o, description, message: html`<div class="alert alert-error" role="alert">${(e as Error).message}</div>` });
     }
@@ -261,10 +262,10 @@ export async function blueprintRoutes(app: FastifyInstance) {
     const { json, error } = parse(o.spec);
     const { blueprint, problems } = error ? { blueprint: null, problems: [error] } : checkBlueprint(json);
     const taken = blueprint ? await owner.one('select 1 from meta.app where alias = $1', [blueprint.alias]) : null;
-    if (taken) problems.push(`An application with the alias ${blueprint!.alias} already exists.`);
+    if (taken) problems.push(tx('bp.alias_taken_short', { alias: blueprint!.alias }));
     if (!blueprint || problems.length)
-      return editor(s, reply, { ...o, message: html`<div class="alert alert-error" role="alert"><p>The blueprint can't be created yet:</p><ul>${problems.map((p) => html`<li>${p}</li>`)}</ul></div>` });
-    return page(s, reply, 'Review', review(s, blueprint, o.spec, o.id, o.name));
+      return editor(s, reply, { ...o, message: html`<div class="alert alert-error" role="alert"><p>${tx('bp.the_blueprint_can_t_be')}</p><ul>${problems.map((p) => html`<li>${p}</li>`)}</ul></div>` });
+    return page(s, reply, tx('bp.review_title'), review(s, blueprint, o.spec, o.id, o.name));
   });
 
   app.post(`${BASE}/blueprints/create`, async (req: Req, reply) => {
@@ -290,10 +291,10 @@ export async function blueprintRoutes(app: FastifyInstance) {
         return { ...r, existing: a.existingAccount };
       });
       await logActivity({ username: s.username, event: 'blueprint', ip: clientIp(req), detail: `created ${blueprint.alias} from blueprint ${o.name}` });
-      flash(s, `Application ${blueprint.alias} created from the blueprint: ${blueprint.tables.length} table(s), ${built.rows} sample row(s).${built.existing ? ` The existing account ${String(b.admin_user)} got the admin role.` : ''}`);
+      flash(s, `${tx('bp.created', { alias: blueprint.alias, tables: blueprint.tables.length, rows: built.rows })}${built.existing ? ` ${tx('bp.admin_role', { user: String(b.admin_user) })}` : ''}`);
       return back(reply, s, `${BASE}/apps/${built.appId}`);
     } catch (e) {
-      return page(s, reply, 'Review', html`<div class="alert alert-error" role="alert">No application was created: ${(e as Error).message}</div>${review(s, blueprint, o.spec, o.id, o.name)}`);
+      return page(s, reply, tx('bp.review_title'), html`<div class="alert alert-error" role="alert">${tx('bp.not_created', { error: (e as Error).message })}</div>${review(s, blueprint, o.spec, o.id, o.name)}`);
     }
   });
 
@@ -301,7 +302,7 @@ export async function blueprintRoutes(app: FastifyInstance) {
     const s = await developer(req, reply);
     if (!s) return;
     const r = await owner.query('delete from meta.blueprint where id = $1 and workspace_id = $2', [req.params.id, currentWorkspace(s)]);
-    flash(s, r.rowCount ? 'Blueprint deleted (applications created from it stay).' : 'There is no such blueprint.');
+    flash(s, r.rowCount ? tx('bp.blueprint_deleted_applications_created_from') : tx('bp.there_is_no_such_blueprint'));
     return back(reply, s, `${BASE}/blueprints`);
   });
 }

package/src/builder/create-page.ts

@@ -2,10 +2,11 @@ import type { FastifyInstance } from 'fastify';
 import { owner } from '../db.ts';
 import { html, raw, type Raw } from '../html.ts';
 import { icon } from '../icons.ts';
-import { featureStates } from './features.ts';
+import { featHelp, featLabel, featureStates } from './features.ts';
 import { appOr404 } from './forms.ts';
 import { appHeader, back, BASE, csrf, developer, flash, input, region, select, send, shell, type Req } from './ui.ts';
-import { NO_TABLE, PAGE_KINDS, wizardTables } from './wizards.ts';
+import { kindHelp, kindLabel, NO_TABLE, PAGE_KINDS, wizardTables } from './wizards.ts';
+import { scopedTx as tx } from './i18n.ts';
 
 // (sprint 137, AP-3) Create Page like APEX's: a grid of page types with small previews (tab Component), the
 // features (tab Feature, features.ts) and Create page as copy (tab Copy), at /builder/apps/:id/create-page.
@@ -14,12 +15,12 @@ import { NO_TABLE, PAGE_KINDS, wizardTables } from './wizards.ts';
 // forms: no JavaScript needed. The previews are inline SVG drawn with classes (public/builder.css), no styles.
 
 /** The grid's order (APEX's names), each with the step it starts with. */
-const GRID: { key: string; label: string; help: string; table: boolean }[] = [
-  { key: 'blank', label: 'Blank page', help: 'An empty page to build in the Page Designer.', table: false },
+const GRID = (): { key: string; label: string; help: string; table: boolean }[] => [
+  { key: 'blank', label: tx('cpg.blank_page'), help: tx('cpg.an_empty_page_to_build'), table: false },
   ...['calendar', 'cards', 'chart', 'comments', 'content_row', 'dashboard', 'data_load', 'facets', 'form', 'grid', 'report', 'map',
     'master_detail', 'media_list', 'report_form', 'search', 'smart_filters', 'timeline', 'tree', 'tasks', 'wizard', 'workflows'].map((k) => {
     const d = PAGE_KINDS.find((x) => x[0] === k)!;
-    return { key: k, label: d[1], help: d[2], table: !NO_TABLE.has(k) };
+    return { key: k, label: kindLabel(k, d[1]), help: kindHelp(k, d[2]), table: !NO_TABLE.has(k) };
   }),
 ];
 
@@ -66,7 +67,7 @@ const PREVIEWS: Record<string, string> = {
 export const preview = (key: string): Raw =>
   raw(`<svg class="cp-svg" viewBox="0 0 80 50" aria-hidden="true" focusable="false">${PREVIEWS[key] ?? PREVIEWS.blank}</svg>`);
 
-const TABS: [string, string][] = [['component', 'Component'], ['feature', 'Feature'], ['copy', 'Copy']];
+const TABS: [string, string][] = [['component', tx('cpg.component')], ['feature', tx('cpg.feature')], ['copy', tx('cpg.copy')]];
 
 export async function createPageRoutes(app: FastifyInstance) {
   app.get(`${BASE}/apps/:id/create-page`, async (req: Req, reply) => {
@@ -76,8 +77,8 @@ export async function createPageRoutes(app: FastifyInstance) {
     if (!a) return reply.code(404).send('Not found');
     const q = req.query as Record<string, string | undefined>;
     const tab = TABS.some(([t]) => t === q.tab) ? q.tab! : 'component';
-    const type = GRID.find((g) => g.key === q.type);
-    const crumbs: [string, string?][] = [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Create page', type ? `${BASE}/apps/${a.id}/create-page` : undefined]];
+    const type = GRID().find((g) => g.key === q.type);
+    const crumbs: [string, string?][] = [[tx('cpg.app_builder'), BASE], [a.name, `${BASE}/apps/${a.id}`], ['Create page', type ? `${BASE}/apps/${a.id}/create-page` : undefined]];
     const nextPage = async () => {
       const used = new Set((await owner.query('select page_no from meta.page where app_id = $1', [a.id])).rows.map((r) => r.page_no as number));
       let n = Math.max(0, ...[...used].filter((x) => x < 9000)) + 1;
@@ -91,49 +92,49 @@ export async function createPageRoutes(app: FastifyInstance) {
       if (type.key === 'blank') {
         body = html`<form method="post" action="${BASE}/apps/${a.id}/pages">${csrf(s)}
             <div class="form-grid">
-              ${input('page_no', 'Page number', await nextPage(), { type: 'number', required: true })}
-              ${input('name', 'Name', '', { required: true })}
-              ${select('mode', 'Page mode', 'normal', [['normal', 'Normal page'], ['modal', 'Modal dialog']])}
-              ${input('parent_page', 'Breadcrumb parent', a.home_page ?? '', { type: 'number' })}
+              ${input('page_no', tx('cpg.page_number'), await nextPage(), { type: 'number', required: true })}
+              ${input('name', tx('cpg.name'), '', { required: true })}
+              ${select('mode', tx('cpg.page_mode'), 'normal', [['normal', tx('cpg.normal_page')], ['modal', tx('cpg.modal_dialog')]])}
+              ${input('parent_page', tx('cpg.breadcrumb_parent'), a.home_page ?? '', { type: 'number' })}
             </div>
-            <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/create-page">Back</a><button class="btn btn-hot">Create page</button></div>
+            <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/create-page">${tx('cpg.back')}</a><button class="btn btn-hot">${tx('cpg.create_page')}</button></div>
           </form>`;
       } else {
         const tables = await wizardTables(a.db_role);
         body = html`<form method="get" action="${BASE}/apps/${a.id}/wizard">
             <input type="hidden" name="kind" value="${type.key}">
             <div class="form-grid">
-              ${select('table', 'Table or view', '', tables.map((t): [string, string] => [t.t, t.access ? t.t : `${t.t} (no access for ${a.db_role})`]),
+              ${select('table', tx('cpg.table_or_view'), '', tables.map((t): [string, string] => [t.t, t.access ? t.t : `${t.t} (no access for ${a.db_role})`]),
                 'The next step proposes the columns, keys and foreign keys from the database catalog.')}
             </div>
-            <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/create-page">Back</a><button class="btn btn-hot">Next</button></div>
+            <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/create-page">${tx('cpg.back')}</a><button class="btn btn-hot">${tx('cpg.next')}</button></div>
           </form>`;
       }
       const main = html`${appHeader(a, 'pages', s)}
         ${region(type.label, html`<div class="cp-step"><span class="cp-preview cp-preview-lg">${preview(type.key)}</span><p class="muted">${type.help}</p></div>${body}`)}`;
-      return send(reply, s, shell(s, `Create page · ${a.name}`, [...crumbs, [type.label]], main));
+      return send(reply, s, shell(s, tx('cpg.page_title', { app: a.name }), [...crumbs, [type.label]], main));
     }
 
-    const tabs = html`<nav class="gal-tabs segmented cp-tabs" aria-label="Create page">${TABS.map(([t, l]) =>
+    const tabs = html`<nav class="gal-tabs segmented cp-tabs" aria-label="${tx('cpg.create_page')}">${TABS.map(([t, l]) =>
       html`<a href="${BASE}/apps/${a.id}/create-page?tab=${t}"${t === tab ? raw(' aria-current="page"') : ''}>${l}</a>`)}</nav>`;
     let body: Raw;
     if (tab === 'component') {
-      const href = (g: (typeof GRID)[number]) =>
+      const href = (g: ReturnType<typeof GRID>[number]) =>
         g.key !== 'blank' && !g.table ? `${BASE}/apps/${a.id}/wizard?kind=${g.key}` : `${BASE}/apps/${a.id}/create-page?type=${g.key}`;
-      body = html`<p class="muted u-mt0">Choose a page type. Types on a table ask for it next; every type proposes its settings and opens the new page in the Page Designer.</p>
-        <ul class="cp-grid">${GRID.map((g) => html`<li><a class="cp-type" href="${href(g)}"><span class="cp-preview">${preview(g.key)}</span><b>${g.label}</b><small>${g.help}</small></a></li>`)}
-          <li><a class="cp-type" href="${BASE}/apps/${a.id}/ai-pages"><span class="cp-preview">${preview('ai')}</span><b>Create pages with AI</b><small>Describe the pages in your own words; check the proposals before they are made.</small></a></li></ul>`;
+      body = html`<p class="muted u-mt0">${tx('cpg.choose_a_page_type_types')}</p>
+        <ul class="cp-grid">${GRID().map((g) => html`<li><a class="cp-type" href="${href(g)}"><span class="cp-preview">${preview(g.key)}</span><b>${g.label}</b><small>${g.help}</small></a></li>`)}
+          <li><a class="cp-type" href="${BASE}/apps/${a.id}/ai-pages"><span class="cp-preview">${preview('ai')}</span><b>${tx('cpg.create_pages_with_ai')}</b><small>${tx('cpg.describe_the_pages_in_your')}</small></a></li></ul>`;
     } else if (tab === 'feature') {
       const states = await featureStates(a.id);
-      body = html`<p class="muted u-mt0">Features add pages and settings to the application. Each lists what it adds before it creates anything; an installed feature is greyed out.</p>
+      body = html`<p class="muted u-mt0">${tx('cpg.features_add_pages_and_settings')}</p>
         <ul class="cp-grid">${states.map(({ f, installed, blocked }) => html`<li><a class="cp-type${installed || blocked ? ' cp-done' : ''}" href="${BASE}/apps/${a.id}/features/${f.key}">
-            <span class="cp-feature-icon">${icon(f.icon)}</span><b>${f.label}</b><small>${f.help}</small>
-            ${installed ? html`<span class="tag">Installed</span>` : blocked ? html`<span class="tag">Not available</span>` : ''}</a></li>`)}</ul>`;
+            <span class="cp-feature-icon">${icon(f.icon)}</span><b>${featLabel(f)}</b><small>${featHelp(f)}</small>
+            ${installed ? html`<span class="tag">${tx('cpg.installed')}</span>` : blocked ? html`<span class="tag">${tx('cpg.not_available')}</span>` : ''}</a></li>`)}</ul>`;
     } else {
       body = await copyStep1(a, s.username!);
     }
-    const main = html`${appHeader(a, 'pages', s)}${region('Create page', html`${tabs}${body}`)}`;
-    return send(reply, s, shell(s, `Create page · ${a.name}`, crumbs, main));
+    const main = html`${appHeader(a, 'pages', s)}${region(tx('cpg.create_page'), html`${tabs}${body}`)}`;
+    return send(reply, s, shell(s, tx('cpg.page_title', { app: a.name }), crumbs, main));
   });
 
   // ---------------------------------------------------------------- Create page as copy
@@ -146,17 +147,17 @@ export async function createPageRoutes(app: FastifyInstance) {
     const q = req.query as Record<string, string | undefined>;
     const from = await sourceApp(a.id, q.from);
     if (!from) {
-      flash(s, 'Choose an application of this workspace.', 'error');
+      flash(s, tx('cpg.choose_an_application_of_this'), 'error');
       return back(reply, s, `${BASE}/apps/${a.id}/create-page?tab=copy`);
     }
     const pages = (await owner.query<{ id: number; page_no: number; name: string }>('select id, page_no, name from meta.page where app_id = $1 order by page_no', [from.id])).rows;
     const page = pages.find((p) => String(p.page_no) === q.page);
-    const crumbs: [string, string?][] = [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Create page', `${BASE}/apps/${a.id}/create-page?tab=copy`], ['Copy']];
+    const crumbs: [string, string?][] = [[tx('cpg.app_builder'), BASE], [a.name, `${BASE}/apps/${a.id}`], [tx('cpg.create_page'), `${BASE}/apps/${a.id}/create-page?tab=copy`], [tx('cpg.copy')]];
     let body: Raw;
     if (!page) {
       body = html`<form method="get" action="${BASE}/apps/${a.id}/copy-page"><input type="hidden" name="from" value="${from.id}">
-          <div class="form-grid">${select('page', `Page of ${from.name}`, '', pages.map((p): [string, string] => [String(p.page_no), `${p.page_no} ${p.name}`]))}</div>
-          <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/create-page?tab=copy">Back</a><button class="btn btn-hot">Next</button></div></form>`;
+          <div class="form-grid">${select('page', tx('cpg.page_of', { app: from.name }), '', pages.map((p): [string, string] => [String(p.page_no), `${p.page_no} ${p.name}`]))}</div>
+          <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/create-page?tab=copy">${tx('cpg.back')}</a><button class="btn btn-hot">${tx('cpg.next')}</button></div></form>`;
     } else {
       const refs = (await owner.query<{ kind: string; name: string; in_target: boolean }>('select * from meta.page_shared_refs($1, $2)', [page.id, a.id])).rows;
       const used = new Set((await owner.query('select page_no from meta.page where app_id = $1', [a.id])).rows.map((r) => r.page_no as number));
@@ -166,27 +167,27 @@ export async function createPageRoutes(app: FastifyInstance) {
       const options = async (kind: string) => (await owner.query<{ n: string }>(SHARED_NAMES[kind], [a.id])).rows.map((r) => r.n);
       const mapRows = await Promise.all(refs.map(async (r) => {
         const names = await options(r.kind);
-        const opts: [string, string][] = [...(same || r.in_target ? [] : [['', 'Copy it into this application'] as [string, string]]), ...names.map((n): [string, string] => [n, `Use ${n}`])];
-        return html`<tr><td>${KIND_LABELS[r.kind] ?? r.kind}</td><td><code>${r.name}</code></td><td>
-          <select name="map:${r.kind}:${r.name}" aria-label="${KIND_LABELS[r.kind] ?? r.kind} ${r.name}">${opts.map(([v, l]) => html`<option value="${v}"${v === (r.in_target || same ? r.name : '') ? raw(' selected') : ''}>${l}</option>`)}</select></td></tr>`;
+        const opts: [string, string][] = [...(same || r.in_target ? [] : [['', tx('cpg.copy_it_into_this_application')] as [string, string]]), ...names.map((n): [string, string] => [n, tx('cpg.use_name', { name: n })])];
+        return html`<tr><td>${kindName(r.kind)}</td><td><code>${r.name}</code></td><td>
+          <select name="map:${r.kind}:${r.name}" aria-label="${kindName(r.kind)} ${r.name}">${opts.map(([v, l]) => html`<option value="${v}"${v === (r.in_target || same ? r.name : '') ? raw(' selected') : ''}>${l}</option>`)}</select></td></tr>`;
       }));
-      body = html`<p class="muted u-mt0">Page ${page.page_no} <b>${page.name}</b> of ${from.name}: its regions, items, buttons, dynamic actions, validations, processes, computations and branches. Items named P${page.page_no}_… are renamed to the new number, also where the page's code refers to them.</p>
+      body = html`<p class="muted u-mt0">${tx.rich('cpg.copy_intro', { n: page.page_no, name: html`<b>${page.name}</b>`, app: from.name, prefix: `P${page.page_no}_` })}</p>
         <form method="post" action="${BASE}/apps/${a.id}/copy-page">${csrf(s)}
           <input type="hidden" name="from" value="${from.id}"><input type="hidden" name="page" value="${page.page_no}">
           <div class="form-grid">
-            ${input('new_page', 'New page number', no, { type: 'number', required: true })}
-            ${input('name', 'Name', page.name, { required: true })}
+            ${input('new_page', tx('cpg.new_page_number'), no, { type: 'number', required: true })}
+            ${input('name', tx('cpg.name'), page.name, { required: true })}
           </div>
           ${refs.length
-            ? html`<h3>Shared components</h3><p class="muted small">The page refers to these by name. ${same ? 'In the same application they stay as they are, or point to another of the same kind.' : 'Use one of this application\'s, or copy it from the other application.'}</p>
-              <div class="table-wrap"><table class="report"><thead><tr><th>Kind</th><th>Name</th><th>In this application</th></tr></thead><tbody>${mapRows}</tbody></table></div>`
-            : html`<p class="muted">The page uses no shared components.</p>`}
-          ${same ? '' : html`<p class="muted small">Its SQL runs as this application's database role <code>${a.db_role ?? '(none)'}</code>: grant it what ${from.name}'s role may read and change.</p>`}
-          <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/copy-page?from=${from.id}">Back</a><button class="btn btn-hot">Copy page</button></div>
+            ? html`<h3>${tx('cpg.shared_components')}</h3><p class="muted small">${tx('cpg.refers_by_name')} ${same ? tx('cpg.in_the_same_application_they') : tx('cpg.use_one_of_this_application')}</p>
+              <div class="table-wrap"><table class="report"><thead><tr><th>${tx('cpg.kind')}</th><th>${tx('cpg.name')}</th><th>${tx('cpg.in_this_application')}</th></tr></thead><tbody>${mapRows}</tbody></table></div>`
+            : html`<p class="muted">${tx('cpg.the_page_uses_no_shared')}</p>`}
+          ${same ? '' : html`<p class="muted small">${tx.rich('cpg.sql_runs_as', { role: html`<code>${a.db_role ?? tx('cpg.none')}</code>`, app: from.name })}</p>`}
+          <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/copy-page?from=${from.id}">${tx('cpg.back')}</a><button class="btn btn-hot">${tx('cpg.copy_page')}</button></div>
         </form>`;
     }
-    const main = html`${appHeader(a, 'pages', s)}${region('Create page as copy', body)}`;
-    return send(reply, s, shell(s, `Copy page · ${a.name}`, crumbs, main));
+    const main = html`${appHeader(a, 'pages', s)}${region(tx('cpg.create_page_as_copy'), body)}`;
+    return send(reply, s, shell(s, tx('cpg.copy_title', { app: a.name }), crumbs, main));
   });
 
   app.post(`${BASE}/apps/:id/copy-page`, async (req: Req, reply) => {
@@ -198,15 +199,15 @@ export async function createPageRoutes(app: FastifyInstance) {
     const from = await sourceApp(a.id, String(b.from ?? ''));
     const retry = `${BASE}/apps/${a.id}/copy-page?from=${encodeURIComponent(String(b.from ?? ''))}&page=${encodeURIComponent(String(b.page ?? ''))}`;
     if (!from) {
-      flash(s, 'Choose an application of this workspace.', 'error');
+      flash(s, tx('cpg.choose_an_application_of_this'), 'error');
       return back(reply, s, `${BASE}/apps/${a.id}/create-page?tab=copy`);
     }
     try {
       const page = /^\d{1,6}$/.test(String(b.page ?? '')) ? Number(b.page) : NaN;
       const no = /^\d{1,6}$/.test(String(b.new_page ?? '').trim()) ? Number(String(b.new_page).trim()) : NaN;
-      if (!(no >= 1)) throw new Error('Enter a page number.');
+      if (!(no >= 1)) throw new Error(tx('cpg.enter_a_page_number'));
       const name = String(b.name ?? '').trim().slice(0, 200);
-      if (!name) throw new Error('Enter a name.');
+      if (!name) throw new Error(tx('cpg.enter_a_name'));
       // map:<kind>:<NAME> → a name of the target's (empty: copy); only known kinds pass
       const map: Record<string, string> = {};
       for (const [k, v] of Object.entries(b)) {
@@ -214,7 +215,7 @@ export async function createPageRoutes(app: FastifyInstance) {
         if (m && Object.hasOwn(SHARED_NAMES, m[1]) && typeof v === 'string') map[`${m[1]}:${m[2]}`] = v.slice(0, 100);
       }
       const id = await owner.tx(async (c) => (await c.query('select meta.copy_page($1, $2, $3, $4, $5, $6::jsonb) as id', [from.id, page, a.id, no, name, JSON.stringify(map)])).rows[0].id as number);
-      flash(s, `Page ${no} "${name}" created as a copy of page ${page}${from.id === a.id ? '' : ` of ${from.name}`}.`);
+      flash(s, from.id === a.id ? tx('cpg.copied', { n: no, name, page }) : tx('cpg.copied_from', { n: no, name, page, app: from.name }));
       return back(reply, s, `${BASE}/pages/${id}`);
     } catch (e) {
       flash(s, (e as Error).message, 'error');
@@ -227,6 +228,7 @@ const KIND_LABELS: Record<string, string> = {
   authz_scheme: 'Authorization scheme', build_option: 'Build option', lov: 'List of values', list: 'List',
   template_component: 'Template component', search_config: 'Search configuration', data_load_def: 'Data load definition',
 };
+const kindName = (k: string) => (Object.hasOwn(KIND_LABELS, k) ? tx.dyn(`cpg.k.${k}`, KIND_LABELS[k]) : k);
 /** The target application's names of each kind (the choices of the mapping). */
 const SHARED_NAMES: Record<string, string> = {
   authz_scheme: 'select name as n from meta.authz_scheme where app_id = $1 order by 1',
@@ -251,9 +253,9 @@ async function copyStep1(a: { id: number; name: string }, _user: string): Promis
   const apps = (await owner.query<{ id: number; name: string; alias: string }>(
     'select id, name, alias from meta.app where meta.app_workspace(id) = meta.app_workspace($1) order by id <> $1, lower(name)', [a.id],
   )).rows;
-  return html`<p class="muted u-mt0">Copy a page of this application or another application of the workspace, under a new number and name. The shared components it uses (lists of values, authorization schemes, lists…) are mapped to this application's or copied.</p>
+  return html`<p class="muted u-mt0">${tx('cpg.copy_a_page_of_this')}</p>
     <form method="get" action="${BASE}/apps/${a.id}/copy-page">
-      <div class="form-grid">${select('from', 'Copy from application', String(a.id), apps.map((x): [string, string] => [String(x.id), x.id === a.id ? `${x.name} (this application)` : `${x.name} (${x.alias})`]))}</div>
-      <div class="buttons"><button class="btn btn-hot">Next</button></div>
+      <div class="form-grid">${select('from', tx('cpg.copy_from_application'), String(a.id), apps.map((x): [string, string] => [String(x.id), x.id === a.id ? `${x.name} (this application)` : `${x.name} (${x.alias})`]))}</div>
+      <div class="buttons"><button class="btn btn-hot">${tx('cpg.next')}</button></div>
     </form>`;
 }