Move rendering into private templates

Add an explicit template renderer with HTML views and partials for the app, bootstrap, package, and catalog pages. Move shared reporting setup into config/reporting.php and relocate stylesheet assets under css/.

prompts.php

@@ -18,11 +18,9 @@ require_once __DIR__ . '/private/header.php';
 require_once __DIR__ . '/private/languagestore.php';
 require_once __DIR__ . '/private/promptstore.php';
 require_once __DIR__ . '/private/usersettings.php';
+require_once __DIR__ . '/private/viewdata.php';
 
-ini_set('display_errors', '1');
-ini_set('display_startup_errors', '1');
-ini_set('log_errors', '1');
-error_reporting(E_ALL);
+require_once __DIR__ . '/config/reporting.php';
 
 $DB_FILE = __DIR__ . '/data/racket-sandbox.sqlite';
 
@@ -41,11 +39,11 @@ function h($s)
     return htmlspecialchars((string)$s, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
 }
 
-function t($key, $fallback = null)
+function t($key, $fallback = null, $values = array())
 {
     global $languageStore, $language;
 
-    return $languageStore->translate($key, $language, $fallback);
+    return $languageStore->translateFormat($key, $language, $values, $fallback);
 }
 
 function post_value($name, $default = '')
@@ -116,70 +114,7 @@ $language = resolve_user_language(
     $store->supportedLanguages()
 );
 
-$languageStore->seedDefaults(array(
-    'prompts.title' => array('en' => 'Prompt administration', 'nl' => 'Promptbeheer'),
-    'prompts.back' => array('en' => 'Back to Racket sandbox', 'nl' => 'Terug naar Racket sandbox'),
-    'prompts.your_prompts' => array('en' => 'Your prompts', 'nl' => 'Jouw prompts'),
-    'prompts.default_admin' => array('en' => 'Default prompt administration', 'nl' => 'Standaardpromptbeheer'),
-    'prompts.language' => array('en' => 'Language', 'nl' => 'Taal'),
-    'prompts.available_defaults' => array('en' => 'Available default prompts', 'nl' => 'Beschikbare standaardprompts'),
-    'prompts.default_admin_badge' => array('en' => 'Admin default prompts', 'nl' => 'Admin standaardprompts'),
-    'prompts.default_admin_hint' => array(
-        'en' => 'You are editing global default prompts. Users can copy these to their own prompts.',
-        'nl' => 'Je bewerkt globale standaardprompts. Gebruikers kunnen deze naar hun eigen prompts kopieren.'
-    ),
-    'prompts.copy_all' => array('en' => 'Copy all', 'nl' => 'Alles kopieren'),
-    'prompts.copy' => array('en' => 'copy', 'nl' => 'kopieer'),
-    'prompts.delete' => array('en' => 'delete', 'nl' => 'verwijder'),
-    'prompts.create_default' => array('en' => 'Create default prompt', 'nl' => 'Standaardprompt maken'),
-    'prompts.create_personal' => array('en' => 'Create personal prompt', 'nl' => 'Persoonlijke prompt maken'),
-    'prompts.name' => array('en' => 'Name', 'nl' => 'Naam'),
-    'prompts.default_key' => array('en' => 'Default key', 'nl' => 'Standaardsleutel'),
-    'prompts.prompt_content' => array('en' => 'Prompt content', 'nl' => 'Promptinhoud'),
-    'prompts.no_defaults' => array('en' => 'No default prompts for this language yet.', 'nl' => 'Nog geen standaardprompts voor deze taal.'),
-    'prompts.no_personal' => array('en' => 'No personal prompts yet for this language.', 'nl' => 'Nog geen persoonlijke prompts voor deze taal.'),
-    'prompts.select_prompt' => array('en' => 'Select a prompt on the left to view it.', 'nl' => 'Selecteer links een prompt om deze te bekijken.'),
-    'prompts.edit' => array('en' => 'Edit', 'nl' => 'Bewerk'),
-    'prompts.close' => array('en' => 'Close', 'nl' => 'Sluiten'),
-    'prompts.newer_previous' => array('en' => 'newer previous version', 'nl' => 'nieuwere vorige versie'),
-    'prompts.older_previous' => array('en' => 'older previous version', 'nl' => 'oudere vorige versie'),
-    'prompts.diff_view' => array('en' => 'Diff view:', 'nl' => 'Verschilweergave:'),
-    'prompts.diff_plain' => array('en' => 'text, no diff', 'nl' => 'tekst, geen verschil'),
-    'prompts.diff_all' => array('en' => 'all diff', 'nl' => 'alle verschillen'),
-    'prompts.diff_same' => array('en' => 'unchanged only', 'nl' => 'alleen ongewijzigd'),
-    'prompts.diff_added' => array('en' => 'additions only', 'nl' => 'alleen toevoegingen'),
-    'prompts.diff_deleted' => array('en' => 'deletions only', 'nl' => 'alleen verwijderingen'),
-    'prompts.diff_changed' => array('en' => 'changes only', 'nl' => 'alleen wijzigingen'),
-    'prompts.previous_version' => array('en' => 'Previous version', 'nl' => 'Vorige versie'),
-    'prompts.store_version' => array('en' => 'store this edit as a new version', 'nl' => 'bewaar deze bewerking als nieuwe versie'),
-    'prompts.version_note' => array('en' => 'Version note:', 'nl' => 'Versienotitie:'),
-    'prompts.save' => array('en' => 'Save', 'nl' => 'Opslaan'),
-    'prompts.store_snapshot' => array('en' => 'Store snapshot', 'nl' => 'Snapshot bewaren'),
-    'prompts.restore_version' => array('en' => 'Restore selected version', 'nl' => 'Geselecteerde versie herstellen'),
-    'prompts.delete_version' => array('en' => 'Delete selected version', 'nl' => 'Geselecteerde versie verwijderen'),
-    'prompts.prompt' => array('en' => 'Prompt', 'nl' => 'Prompt'),
-    'prompts.prompt_not_found' => array('en' => 'Prompt not found', 'nl' => 'Prompt niet gevonden'),
-    'prompts.no_previous_versions' => array('en' => 'No previous versions stored.', 'nl' => 'Geen vorige versies opgeslagen.'),
-    'prompts.no_lines_for_view' => array('en' => 'No lines for this view.', 'nl' => 'Geen regels voor deze weergave.'),
-    'prompts.restore_version_confirm' => array('en' => 'Restore version', 'nl' => 'Versie herstellen'),
-    'prompts.delete_version_confirm' => array('en' => 'Delete version', 'nl' => 'Versie verwijderen'),
-    'prompts.delete_default_confirm' => array('en' => 'Delete default prompt', 'nl' => 'Standaardprompt verwijderen'),
-    'prompts.delete_prompt_confirm' => array('en' => 'Delete prompt', 'nl' => 'Prompt verwijderen'),
-    'prompts.default_prompt_prefix' => array('en' => 'Default prompt: ', 'nl' => 'Standaardprompt: '),
-    'prompts.prompt_prefix' => array('en' => 'Prompt: ', 'nl' => 'Prompt: '),
-    'prompts.created' => array('en' => 'created', 'nl' => 'gemaakt'),
-    'prompts.updated' => array('en' => 'updated', 'nl' => 'bijgewerkt'),
-    'prompts.default_prompt' => array('en' => 'default prompt', 'nl' => 'standaardprompt'),
-    'prompts.version' => array('en' => 'version', 'nl' => 'versie'),
-    'prompts.showing_version' => array('en' => 'showing version', 'nl' => 'toont versie'),
-    'prompts.of' => array('en' => 'of', 'nl' => 'van'),
-    'prompts.old' => array('en' => 'old', 'nl' => 'oud'),
-    'prompts.new' => array('en' => 'new', 'nl' => 'nieuw'),
-    'app.admin' => array('en' => 'admin', 'nl' => 'admin'),
-    'app.user_management' => array('en' => 'User management', 'nl' => 'Gebruikersbeheer'),
-    'app.configuration' => array('en' => 'Configuration', 'nl' => 'Configuratie'),
-    'app.logout' => array('en' => 'Logout', 'nl' => 'Uitloggen'),
-));
+seed_template_translations($languageStore, 'prompts.html');
 
 $mode = get_value('mode', 'personal');
 
@@ -326,7 +261,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
                 $message = 'Default prompt deleted.';
             }
         } elseif ($action !== '') {
-            throw new Exception('Unknown action: ' . $action);
+            throw new Exception(t('prompts.unknown_action', 'Unknown action: {{action}}', array('action' => $action)));
         }
     } catch (Throwable $e) {
         $error = $e->getMessage();
@@ -394,309 +329,115 @@ if ($user->isAdmin()) {
     );
 }
 
-$styleVersion = @filemtime(__DIR__ . '/styles.css') ?: time();
+$styleVersion = @filemtime(__DIR__ . '/css/styles.css') ?: time();
 $promptEditorVersion = @filemtime(__DIR__ . '/js/prompt-editor.js') ?: time();
 
 header('Content-Type: text/html; charset=utf-8');
-?>
-<!doctype html>
-<html lang="<?= h($language) ?>">
-<head>
-<meta charset="utf-8">
-<title><?= h(t('prompts.title', 'Prompt administration')) ?></title>
-<link rel="stylesheet" href="/styles.css?v=<?= h($styleVersion) ?>">
-</head>
-<body>
 
-<div class="page">
+$languageOptionsHtml = '';
+$languageOptionsPlainHtml = '';
 
-<?php
-render_app_header(array(
-    'title' => t('prompts.title', 'Prompt administration'),
-    'nav_items' => $headerNavItems,
-    'user' => $user,
-    'admin_label' => t('app.admin', 'admin'),
-    'language_label' => t('prompts.language', 'Language'),
-    'language' => $language,
-    'languages' => $headerLanguages,
-    'language_action' => '/prompts',
-    'language_hidden' => array('mode' => $mode),
-    'logout_action' => '/prompts?lang=' . rawurlencode($language) . '&mode=' . rawurlencode($mode),
-    'logout_label' => t('app.logout', 'Logout'),
-    'message' => $message,
-    'error' => $error,
-));
-?>
+foreach ($store->supportedLanguages() as $lang) {
+    $languageOptionsHtml .= RacketSandboxTemplate::renderFile('partials/select-option.html', array(
+        'value' => $lang,
+        'selected' => $lang === $language ? ' selected' : '',
+        'label' => $store->languageLabel($lang),
+    )) . "\n";
 
-<main class="page-main prompt-workbench">
+    $languageOptionsPlainHtml .= RacketSandboxTemplate::renderFile('partials/select-option.html', array(
+        'value' => $lang,
+        'selected' => '',
+        'label' => $store->languageLabel($lang),
+    )) . "\n";
+}
 
-<aside class="prompt-sidebar panel">
-<div class="prompt-tabs" role="tablist" aria-label="Prompt lists">
-<button type="button" class="prompt-tab <?= $mode === 'defaults' ? 'active' : '' ?>" data-tab="defaults" role="tab" aria-selected="<?= $mode === 'defaults' ? 'true' : 'false' ?>">
-<?= h(t('prompts.available_defaults', 'Available default prompts')) ?>
-</button>
-<button type="button" class="prompt-tab <?= $mode !== 'defaults' ? 'active' : '' ?>" data-tab="personal" role="tab" aria-selected="<?= $mode !== 'defaults' ? 'true' : 'false' ?>">
-<?= h(t('prompts.your_prompts', 'Your prompts')) ?>
-</button>
-</div>
+$defaultAdminNoticeHtml = '';
 
-<section class="prompt-tab-panel <?= $mode === 'defaults' ? 'active' : '' ?>" id="tab-defaults" role="tabpanel">
-<?php if ($user->isAdmin()): ?>
-<div class="default-admin-notice">
-<strong><?= h(t('prompts.default_admin_badge', 'Admin default prompts')) ?></strong>
-<span><?= h(t('prompts.default_admin_hint', 'You are editing global default prompts. Users can copy these to their own prompts.')) ?></span>
-</div>
-<?php endif; ?>
+if ($user->isAdmin()) {
+    $defaultAdminNoticeHtml = RacketSandboxTemplate::renderFile('partials/prompt-admin-notice.html', array(
+        'badge' => t('prompts.default_admin_badge', 'Admin default prompts'),
+        'hint' => t('prompts.default_admin_hint', 'You are editing global default prompts. Users can copy these to their own prompts.'),
+    ));
+}
 
-<div class="sidebar-actions">
-<form method="post" action="/prompts?lang=<?= h($language) ?>&mode=personal">
-<input type="hidden" name="action" value="copy_all_defaults">
-<input type="hidden" name="language" value="<?= h($language) ?>">
-<button type="submit"><?= h(t('prompts.copy_all', 'Copy all')) ?></button>
-</form>
-</div>
+$defaultPromptsHtml = '';
 
-<div class="prompt-list">
-<?php foreach ($defaultPrompts as $default): ?>
-<div class="prompt-list-item default-prompt-item">
-<button type="button"
-        class="prompt-select js-open-prompt"
-        data-kind="default"
-        data-id="<?= h($default->id()) ?>">
-<span class="prompt-name"><?= h($default->name()) ?></span>
-<span class="prompt-subline"><code><?= h($default->defaultKey()) ?></code> · <?= h(fmt_time($default->updatedAt())) ?></span>
-</button>
+foreach ($defaultPrompts as $default) {
+    $adminDeleteHtml = '';
 
-<form method="post" action="/prompts?lang=<?= h($language) ?>&mode=personal">
-<input type="hidden" name="action" value="copy_default">
-<input type="hidden" name="default_id" value="<?= h($default->id()) ?>">
-<button type="submit"><?= h(t('prompts.copy', 'copy')) ?></button>
-</form>
+    if ($user->isAdmin()) {
+        $adminDeleteHtml = RacketSandboxTemplate::renderFile('partials/prompt-default-delete.html', array(
+            'language_url' => rawurlencode($language),
+            'confirm_json' => json_encode(t('prompts.delete_default_confirm', 'Delete default prompt {{name}}?', array(
+                'name' => $default->name(),
+            )), JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT),
+            'name' => $default->name(),
+            'id' => $default->id(),
+            'delete_label' => t('prompts.delete', 'delete'),
+        ));
+    }
 
-<?php if ($user->isAdmin()): ?>
-<form method="post" action="/prompts?lang=<?= h($language) ?>&mode=defaults"
-      onsubmit="return confirm('<?= h(t('prompts.delete_default_confirm', 'Delete default prompt')) ?> <?= h($default->name()) ?>?');">
-<input type="hidden" name="action" value="delete_default">
-<input type="hidden" name="default_id" value="<?= h($default->id()) ?>">
-<button type="submit"><?= h(t('prompts.delete', 'delete')) ?></button>
-</form>
-<?php endif; ?>
-</div>
-<?php endforeach; ?>
+    $defaultPromptsHtml .= RacketSandboxTemplate::renderFile('partials/prompt-default-item.html', array(
+        'language_url' => rawurlencode($language),
+        'id' => $default->id(),
+        'name' => $default->name(),
+        'default_key' => $default->defaultKey(),
+        'metadata' => t('prompts.default_metadata', '{{default_key}} · {{updated_at}}', array(
+            'default_key' => '<code>' . h($default->defaultKey()) . '</code>',
+            'updated_at' => fmt_time($default->updatedAt()),
+        )),
+        'copy_label' => t('prompts.copy', 'copy'),
+        'admin_delete_html' => $adminDeleteHtml,
+    )) . "\n";
+}
 
-<?php if (count($defaultPrompts) === 0): ?>
-<p class="empty-state"><?= h(t('prompts.no_defaults', 'No default prompts for this language yet.')) ?></p>
-<?php endif; ?>
-</div>
+$noDefaultsHtml = count($defaultPrompts) === 0
+    ? RacketSandboxTemplate::renderFile('partials/paragraph.html', array(
+        'class' => 'empty-state',
+        'text' => t('prompts.no_defaults', 'No default prompts for this language yet.'),
+    ))
+    : '';
 
-<?php if ($user->isAdmin()): ?>
-<details class="create-drawer">
-<summary><?= h(t('prompts.create_default', 'Create default prompt')) ?></summary>
-<form method="post" action="/prompts?lang=<?= h($language) ?>&mode=defaults">
-<input type="hidden" name="action" value="create_default">
-<label><?= h(t('prompts.default_key', 'Default key')) ?><br><input type="text" name="default_key" placeholder="bootstrap-racket"></label>
-<label><?= h(t('prompts.name', 'Name')) ?><br><input type="text" name="name"></label>
-<label><?= h(t('prompts.language', 'Language')) ?><br>
-<select name="language">
-<?php foreach ($store->supportedLanguages() as $lang): ?>
-<option value="<?= h($lang) ?>" <?= $lang === $language ? 'selected' : '' ?>>
-<?= h($store->languageLabel($lang)) ?>
-</option>
-<?php endforeach; ?>
-</select>
-</label>
-<label><?= h(t('prompts.prompt_content', 'Prompt content')) ?><br><textarea name="content" rows="7"></textarea></label>
-<button type="submit"><?= h(t('prompts.create_default', 'Create default prompt')) ?></button>
-</form>
-</details>
-<?php endif; ?>
-</section>
+$createDefaultHtml = '';
 
-<section class="prompt-tab-panel <?= $mode !== 'defaults' ? 'active' : '' ?>" id="tab-personal" role="tabpanel">
-<div class="prompt-list">
-<?php foreach ($personalPrompts as $prompt): ?>
-<div class="prompt-list-item">
-<button type="button"
-        class="prompt-select js-open-prompt"
-        data-kind="personal"
-        data-id="<?= h($prompt->id()) ?>">
-<span class="prompt-name"><?= h($prompt->name()) ?></span>
-<span class="prompt-subline"><?= h($store->languageLabel($prompt->language())) ?> · <?= h(fmt_time($prompt->updatedAt())) ?></span>
-</button>
-<form method="post" action="/prompts?lang=<?= h($language) ?>&mode=personal"
-      onsubmit="return confirm('<?= h(t('prompts.delete_prompt_confirm', 'Delete prompt')) ?> <?= h($prompt->name()) ?>?');">
-<input type="hidden" name="action" value="delete_prompt">
-<input type="hidden" name="prompt_id" value="<?= h($prompt->id()) ?>">
-<button type="submit"><?= h(t('prompts.delete', 'delete')) ?></button>
-</form>
-</div>
-<?php endforeach; ?>
+if ($user->isAdmin()) {
+    $createDefaultHtml = RacketSandboxTemplate::renderFile('partials/prompt-create-default.html', array(
+        'language_url' => rawurlencode($language),
+        'create_default_label' => t('prompts.create_default', 'Create default prompt'),
+        'default_key_label' => t('prompts.default_key', 'Default key'),
+        'name_label' => t('prompts.name', 'Name'),
+        'language_label' => t('prompts.language', 'Language'),
+        'language_options_html' => $languageOptionsHtml,
+        'prompt_content_label' => t('prompts.prompt_content', 'Prompt content'),
+    ));
+}
 
-<?php if (count($personalPrompts) === 0): ?>
-<p class="empty-state"><?= h(t('prompts.no_personal', 'No personal prompts yet for this language.')) ?></p>
-<?php endif; ?>
-</div>
+$personalPromptsHtml = '';
 
-<details class="create-drawer">
-<summary><?= h(t('prompts.create_personal', 'Create personal prompt')) ?></summary>
-<form method="post" action="/prompts?lang=<?= h($language) ?>&mode=personal">
-<input type="hidden" name="action" value="create_prompt">
-<label><?= h(t('prompts.name', 'Name')) ?><br><input type="text" name="name"></label>
-<label><?= h(t('prompts.language', 'Language')) ?><br>
-<select name="language">
-<?php foreach ($store->supportedLanguages() as $lang): ?>
-<option value="<?= h($lang) ?>" <?= $lang === $language ? 'selected' : '' ?>>
-<?= h($store->languageLabel($lang)) ?>
-</option>
-<?php endforeach; ?>
-</select>
-</label>
-<label><?= h(t('prompts.prompt_content', 'Prompt content')) ?><br><textarea name="content" rows="7"></textarea></label>
-<button type="submit"><?= h(t('prompts.create_personal', 'Create prompt')) ?></button>
-</form>
-</details>
-</section>
-</aside>
+foreach ($personalPrompts as $prompt) {
+    $personalPromptsHtml .= RacketSandboxTemplate::renderFile('partials/prompt-personal-item.html', array(
+        'language_url' => rawurlencode($language),
+        'id' => $prompt->id(),
+        'name' => $prompt->name(),
+        'metadata' => t('prompts.personal_metadata', '{{language}} · {{updated_at}}', array(
+            'language' => $store->languageLabel($prompt->language()),
+            'updated_at' => fmt_time($prompt->updatedAt()),
+        )),
+        'confirm_json' => json_encode(t('prompts.delete_prompt_confirm', 'Delete prompt {{name}}?', array(
+            'name' => $prompt->name(),
+        )), JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT),
+        'delete_label' => t('prompts.delete', 'delete'),
+    )) . "\n";
+}
 
-<section id="promptViewer" class="prompt-viewer panel is-empty">
-<div class="viewer-empty">
-<?= h(t('prompts.select_prompt', 'Select a prompt on the left to view it.')) ?>
-</div>
+$noPersonalHtml = count($personalPrompts) === 0
+    ? RacketSandboxTemplate::renderFile('partials/paragraph.html', array(
+        'class' => 'empty-state',
+        'text' => t('prompts.no_personal', 'No personal prompts yet for this language.'),
+    ))
+    : '';
 
-<div class="viewer-shell">
-<div class="viewer-header">
-<div>
-<div class="viewer-title" id="viewerTitle"><?= h(t('prompts.prompt', 'Prompt')) ?></div>
-<div class="version-meta" id="viewerMeta"></div>
-</div>
-<button type="button" id="editPromptButton"><?= h(t('prompts.edit', 'Edit')) ?></button>
-</div>
-<pre id="viewerContent" class="viewer-content"></pre>
-</div>
-</section>
-
-</main>
-
-<footer class="page-footer">
-<a href="/"><?= h(t('prompts.back', 'Back to Racket sandbox')) ?></a>
-</footer>
-
-</div>
-
-<div id="promptModalBackdrop" class="modal-backdrop">
-<div class="prompt-modal">
-
-<form id="promptModalForm" class="edit-mode" method="post" action="/prompts?lang=<?= h($language) ?>&mode=<?= h($mode) ?>">
-
-<div class="modal-header">
-<div>
-<div class="modal-title" id="modalTitle"><?= h(t('prompts.prompt', 'Prompt')) ?></div>
-<div class="version-meta" id="modalMeta"></div>
-</div>
-<button type="button" id="cancelEditButton"><?= h(t('prompts.close', 'Close')) ?></button>
-</div>
-
-<div class="modal-toolbar">
-<button type="button" id="versionNewerButton"><?= h(t('prompts.newer_previous', 'newer previous version')) ?></button>
-<button type="button" id="versionOlderButton"><?= h(t('prompts.older_previous', 'older previous version')) ?></button>
-
-<label>
-<?= h(t('prompts.diff_view', 'Diff view:')) ?>
-<select id="diffMode">
-<option value="plain"><?= h(t('prompts.diff_plain', 'text, no diff')) ?></option>
-<option value="all" selected><?= h(t('prompts.diff_all', 'all diff')) ?></option>
-<option value="same"><?= h(t('prompts.diff_same', 'unchanged only')) ?></option>
-<option value="added"><?= h(t('prompts.diff_added', 'additions only')) ?></option>
-<option value="deleted"><?= h(t('prompts.diff_deleted', 'deletions only')) ?></option>
-<option value="changed"><?= h(t('prompts.diff_changed', 'changes only')) ?></option>
-</select>
-</label>
-
-<span id="versionIndicator" class="version-meta"></span>
-</div>
-
-<div class="modal-body">
-
-<div class="edit-pane">
-<div class="modal-form-grid">
-<label>
-<?= h(t('prompts.name', 'Name')) ?><br>
-<input type="text" id="modalName" name="name">
-</label>
-
-<label>
-<?= h(t('prompts.language', 'Language')) ?><br>
-<select id="modalLanguage" name="language">
-<?php foreach ($store->supportedLanguages() as $lang): ?>
-<option value="<?= h($lang) ?>"><?= h($store->languageLabel($lang)) ?></option>
-<?php endforeach; ?>
-</select>
-</label>
-</div>
-
-<div id="defaultKeyRow" class="default-key-row">
-<label>
-<?= h(t('prompts.default_key', 'Default key')) ?><br>
-<input type="text" id="modalDefaultKey" name="default_key">
-</label>
-</div>
-
-<label class="content-label">
-<span><?= h(t('prompts.prompt_content', 'Prompt content')) ?></span>
-<textarea id="modalContent" name="content"></textarea>
-</label>
-</div>
-
-<div class="version-pane">
-<div>
-<strong><?= h(t('prompts.previous_version', 'Previous version')) ?></strong>
-<div id="selectedVersionMeta" class="version-meta"></div>
-</div>
-
-<div class="version-content" id="versionContent"></div>
-</div>
-
-</div>
-
-<div class="modal-footer">
-<input type="hidden" id="modalAction" name="action" value="">
-<input type="hidden" id="modalPromptId" name="prompt_id" value="">
-<input type="hidden" id="modalDefaultId" name="default_id" value="">
-
-<label>
-<input type="checkbox" name="create_version" value="1" checked>
-<?= h(t('prompts.store_version', 'store this edit as a new version')) ?>
-</label>
-
-<label>
-<?= h(t('prompts.version_note', 'Version note:')) ?>
-<input type="text" name="version_note" value="editor edit">
-</label>
-
-<button type="submit"><?= h(t('prompts.save', 'Save')) ?></button>
-<button type="button" id="snapshotButton"><?= h(t('prompts.store_snapshot', 'Store snapshot')) ?></button>
-<button type="button" id="restoreVersionButton"><?= h(t('prompts.restore_version', 'Restore selected version')) ?></button>
-<button type="button" id="deleteVersionButton"><?= h(t('prompts.delete_version', 'Delete selected version')) ?></button>
-</div>
-
-</form>
-
-</div>
-</div>
-
-<form id="modalAuxForm" method="post" action="/prompts?lang=<?= h($language) ?>&mode=<?= h($mode) ?>" class="hidden">
-<input type="hidden" id="auxAction" name="action" value="">
-<input type="hidden" id="auxPromptId" name="prompt_id" value="">
-<input type="hidden" id="auxDefaultId" name="default_id" value="">
-<input type="hidden" id="auxVersionNo" name="version_no" value="">
-<input type="hidden" id="auxVersionNote" name="version_note" value="">
-</form>
-
-<script type="application/json" id="promptDataJson">
-<?= json_encode($promptData, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?>
-</script>
-<script type="application/json" id="promptTextJson">
-<?= json_encode(array(
+$promptTextJson = json_encode(array(
     'prompt_not_found' => t('prompts.prompt_not_found', 'Prompt not found'),
     'no_previous_versions' => t('prompts.no_previous_versions', 'No previous versions stored.'),
     'no_lines_for_view' => t('prompts.no_lines_for_view', 'No lines for this view.'),
@@ -712,9 +453,73 @@ render_app_header(array(
     'of' => t('prompts.of', 'of'),
     'old' => t('prompts.old', 'old'),
     'new' => t('prompts.new', 'new'),
-), JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?>
-</script>
-<script src="/js/prompt-editor.js?v=<?= h($promptEditorVersion) ?>" defer></script>
+), JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
 
-</body>
-</html>
+$headerHtml = app_header_html(array(
+    'title' => t('prompts.title', 'Prompt administration'),
+    'nav_items' => $headerNavItems,
+    'user' => $user,
+    'admin_label' => t('app.admin', 'admin'),
+    'language_label' => t('prompts.language', 'Language'),
+    'language' => $language,
+    'languages' => $headerLanguages,
+    'language_action' => '/prompts',
+    'language_hidden' => array('mode' => $mode),
+    'logout_action' => '/prompts?lang=' . rawurlencode($language) . '&mode=' . rawurlencode($mode),
+    'logout_label' => t('app.logout', 'Logout'),
+    'message' => $message,
+    'error' => $error,
+));
+
+echo RacketSandboxTemplate::renderFile('prompts.html', array(
+    'language' => $language,
+    'language_url' => rawurlencode($language),
+    'mode_url' => rawurlencode($mode),
+    'title' => t('prompts.title', 'Prompt administration'),
+    'style_version' => $styleVersion,
+    'prompt_editor_version' => $promptEditorVersion,
+    'header_html' => $headerHtml,
+    'defaults_tab_active_class' => $mode === 'defaults' ? 'active' : '',
+    'defaults_tab_selected' => $mode === 'defaults' ? 'true' : 'false',
+    'personal_tab_active_class' => $mode !== 'defaults' ? 'active' : '',
+    'personal_tab_selected' => $mode !== 'defaults' ? 'true' : 'false',
+    'available_defaults_label' => t('prompts.available_defaults', 'Available default prompts'),
+    'your_prompts_label' => t('prompts.your_prompts', 'Your prompts'),
+    'default_admin_notice_html' => $defaultAdminNoticeHtml,
+    'copy_all_label' => t('prompts.copy_all', 'Copy all'),
+    'default_prompts_html' => $defaultPromptsHtml,
+    'no_defaults_html' => $noDefaultsHtml,
+    'create_default_html' => $createDefaultHtml,
+    'personal_prompts_html' => $personalPromptsHtml,
+    'no_personal_html' => $noPersonalHtml,
+    'create_personal_label' => t('prompts.create_personal', 'Create personal prompt'),
+    'name_label' => t('prompts.name', 'Name'),
+    'language_label' => t('prompts.language', 'Language'),
+    'language_options_html' => $languageOptionsHtml,
+    'language_options_plain_html' => $languageOptionsPlainHtml,
+    'prompt_content_label' => t('prompts.prompt_content', 'Prompt content'),
+    'select_prompt_label' => t('prompts.select_prompt', 'Select a prompt on the left to view it.'),
+    'prompt_label' => t('prompts.prompt', 'Prompt'),
+    'edit_label' => t('prompts.edit', 'Edit'),
+    'back_label' => t('prompts.back', 'Back to Racket sandbox'),
+    'close_label' => t('prompts.close', 'Close'),
+    'newer_previous_label' => t('prompts.newer_previous', 'newer previous version'),
+    'older_previous_label' => t('prompts.older_previous', 'older previous version'),
+    'diff_view_label' => t('prompts.diff_view', 'Diff view:'),
+    'diff_plain_label' => t('prompts.diff_plain', 'text, no diff'),
+    'diff_all_label' => t('prompts.diff_all', 'all diff'),
+    'diff_same_label' => t('prompts.diff_same', 'unchanged only'),
+    'diff_added_label' => t('prompts.diff_added', 'additions only'),
+    'diff_deleted_label' => t('prompts.diff_deleted', 'deletions only'),
+    'diff_changed_label' => t('prompts.diff_changed', 'changes only'),
+    'default_key_label' => t('prompts.default_key', 'Default key'),
+    'previous_version_label' => t('prompts.previous_version', 'Previous version'),
+    'store_version_label' => t('prompts.store_version', 'store this edit as a new version'),
+    'version_note_label' => t('prompts.version_note', 'Version note:'),
+    'save_label' => t('prompts.save', 'Save'),
+    'store_snapshot_label' => t('prompts.store_snapshot', 'Store snapshot'),
+    'restore_version_label' => t('prompts.restore_version', 'Restore selected version'),
+    'delete_version_label' => t('prompts.delete_version', 'Delete selected version'),
+    'prompt_data_json' => json_encode($promptData, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE),
+    'prompt_text_json' => $promptTextJson,
+));