feat(12-02): wire all template strings to Alpine i18n store

- dashboard.html: headings, quick actions, empty states wired to x-text
- printers.html: h1, add button, h2 wired to x-text
- printers_new.html: all form labels (span pattern), options, submit buttons wired
- clients.html: headings, label, submit button wired
- client_detail.html: back link, section heading wired
- drivers.html: all headings, label, buttons, spinner wired
- packages.html: heading, description, table headers, empty state wired
- printer_detail.html: all dt/dd, section headings, copy buttons, script/export links wired with conditional Jinja2 for color/collate/client
- partials/printer_list.html: table headers, Yes/No cells (Alpine ternary), delete button wired
- partials/printer_edit_modal.html: edit trigger, modal title, all labels (span pattern), options, save/cancel wired
- partials/client_list.html: empty state, table headers wired
- partials/driver_list.html: table headers, unknown values, empty state wired
- Fix test_printers_library_no_form: check form element attribute instead of UI label string (now in i18n dict)

imptune/templates/client_detail.html

@@ -2,10 +2,10 @@
 
 {% block content %}
 <h1>{{ client.name }}</h1>
-<p><a href="/clients">&larr; All Clients</a></p>
+<p><a href="/clients" x-data x-text="$store.i18n.t('back_to_clients')">&larr; All Clients</a></p>
 
 <section>
-  <h2>Printers</h2>
+  <h2 x-data x-text="$store.i18n.t('printers_section')">Printers</h2>
   {% include "partials/printer_list.html" %}
 </section>
 {% endblock %}

imptune/templates/clients.html

@@ -1,21 +1,21 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1>Clients</h1>
+<h1 x-data x-text="$store.i18n.t('clients')">Clients</h1>
 
 <section>
-  <h2>Add Client</h2>
+  <h2 x-data x-text="$store.i18n.t('add_client_section')">Add Client</h2>
   <form hx-post="/clients" hx-target="#client-list" hx-swap="outerHTML">
     <label>
-      Client Name
+      <span x-data x-text="$store.i18n.t('client_name_label')">Client Name</span>
       <input type="text" name="name" placeholder="e.g. Contoso" required>
     </label>
-    <button type="submit">Add Client</button>
+    <button type="submit" x-data x-text="$store.i18n.t('add_client')">Add Client</button>
   </form>
 </section>
 
 <section>
-  <h2>Client List</h2>
+  <h2 x-data x-text="$store.i18n.t('client_list_section')">Client List</h2>
   {% include "partials/client_list.html" %}
 </section>
 {% endblock %}

imptune/templates/dashboard.html

@@ -1,19 +1,19 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1>Dashboard</h1>
+<h1 x-data x-text="$store.i18n.t('dashboard')">Dashboard</h1>
 
 <div class="quick-actions">
-  <a href="/printers" class="btn-action">New Printer</a>
-  <a href="/drivers" class="btn-action">Upload Driver</a>
-  <a href="/packages" class="btn-action">Export Package</a>
+  <a href="/printers" class="btn-action" x-data x-text="$store.i18n.t('new_printer')">New Printer</a>
+  <a href="/drivers" class="btn-action" x-data x-text="$store.i18n.t('upload_driver_btn')">Upload Driver</a>
+  <a href="/packages" class="btn-action" x-data x-text="$store.i18n.t('export_package')">Export Package</a>
 </div>
 
 <section class="recent-activity">
-  <h2>Recent Activity</h2>
+  <h2 x-data x-text="$store.i18n.t('recent_activity')">Recent Activity</h2>
 
   <div class="activity-section">
-    <h3>Recent Printers</h3>
+    <h3 x-data x-text="$store.i18n.t('recent_printers')">Recent Printers</h3>
     {% if recent_printers %}
       <ul>
         {% for printer in recent_printers %}
@@ -21,12 +21,12 @@
         {% endfor %}
       </ul>
     {% else %}
-      <p class="empty-state">No printers configured yet.</p>
+      <p class="empty-state" x-data x-text="$store.i18n.t('no_printers')">No printers configured yet.</p>
     {% endif %}
   </div>
 
   <div class="activity-section">
-    <h3>Recent Packages</h3>
+    <h3 x-data x-text="$store.i18n.t('recent_packages')">Recent Packages</h3>
     {% if recent_packages %}
       <ul>
         {% for package in recent_packages %}
@@ -34,7 +34,7 @@
         {% endfor %}
       </ul>
     {% else %}
-      <p class="empty-state">No packages exported yet.</p>
+      <p class="empty-state" x-data x-text="$store.i18n.t('no_packages')">No packages exported yet.</p>
     {% endif %}
   </div>
 </section>

imptune/templates/drivers.html

@@ -1,9 +1,9 @@
 {% extends "base.html" %}
 {% block content %}
-<h1>Drivers</h1>
+<h1 x-data x-text="$store.i18n.t('drivers_title')">Drivers</h1>
 
 <section>
-  <h2>Upload Driver Package</h2>
+  <h2 x-data x-text="$store.i18n.t('upload_driver_section')">Upload Driver Package</h2>
   <form
     hx-post="/drivers/upload"
     hx-encoding="multipart/form-data"
@@ -11,15 +11,15 @@
     hx-swap="outerHTML"
     hx-indicator="#upload-spinner"
   >
-    <label for="driver-file">Driver Package (ZIP containing .inf + driver files)</label>
+    <label for="driver-file" x-data x-text="$store.i18n.t('driver_package_label')">Driver Package (ZIP containing .inf + driver files)</label>
     <input type="file" id="driver-file" name="file" accept=".zip" required>
-    <button type="submit">Upload</button>
-    <span id="upload-spinner" class="htmx-indicator" aria-busy="true">Uploading...</span>
+    <button type="submit" x-data x-text="$store.i18n.t('upload_btn')">Upload</button>
+    <span id="upload-spinner" class="htmx-indicator" aria-busy="true" x-data x-text="$store.i18n.t('uploading')">Uploading...</span>
   </form>
 </section>
 
 <section>
-  <h2>Driver Library</h2>
+  <h2 x-data x-text="$store.i18n.t('driver_library')">Driver Library</h2>
   {% include "partials/driver_list.html" %}
 </section>
 {% endblock %}

imptune/templates/packages.html

@@ -1,18 +1,18 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1>Packages</h1>
-<p>Printers with drivers assigned — ready for deployment package export.</p>
+<h1 x-data x-text="$store.i18n.t('packages_title')">Packages</h1>
+<p x-data x-text="$store.i18n.t('packages_description')">Printers with drivers assigned — ready for deployment package export.</p>
 
 {% if printers %}
   <figure>
     <table role="grid">
       <thead>
         <tr>
-          <th scope="col">Printer</th>
-          <th scope="col">Client</th>
-          <th scope="col">Driver</th>
-          <th scope="col">Downloads</th>
+          <th scope="col" x-data x-text="$store.i18n.t('printer_col')">Printer</th>
+          <th scope="col" x-data x-text="$store.i18n.t('client_col')">Client</th>
+          <th scope="col" x-data x-text="$store.i18n.t('driver_col')">Driver</th>
+          <th scope="col" x-data x-text="$store.i18n.t('downloads_col')">Downloads</th>
         </tr>
       </thead>
       <tbody>
@@ -32,6 +32,6 @@
     </table>
   </figure>
 {% else %}
-  <p class="empty-state">No package-ready printers yet. Assign a driver to a printer to enable package export.</p>
+  <p class="empty-state" x-data x-text="$store.i18n.t('no_packages_ready')">No package-ready printers yet. Assign a driver to a printer to enable package export.</p>
 {% endif %}
 {% endblock %}

imptune/templates/partials/client_list.html

@@ -1,12 +1,12 @@
 <div id="client-list">
   {% if not clients %}
-  <p>No clients configured yet.</p>
+  <p x-data x-text="$store.i18n.t('no_clients')">No clients configured yet.</p>
   {% else %}
   <table>
     <thead>
       <tr>
-        <th>Name</th>
-        <th>Created</th>
+        <th x-data x-text="$store.i18n.t('th_name')">Name</th>
+        <th x-data x-text="$store.i18n.t('created')">Created</th>
       </tr>
     </thead>
     <tbody>

imptune/templates/partials/driver_list.html

@@ -17,10 +17,10 @@
   <table>
     <thead>
       <tr>
-        <th>Filename</th>
-        <th>Driver Name(s)</th>
-        <th>Architecture</th>
-        <th>Uploaded</th>
+        <th x-data x-text="$store.i18n.t('driver_filename')">Filename</th>
+        <th x-data x-text="$store.i18n.t('driver_names_col')">Driver Name(s)</th>
+        <th x-data x-text="$store.i18n.t('architecture')">Architecture</th>
+        <th x-data x-text="$store.i18n.t('uploaded_at')">Uploaded</th>
       </tr>
     </thead>
     <tbody>
@@ -35,16 +35,16 @@
             {% endfor %}
           </select>
           {% else %}
-          <em>Unknown</em>
+          <em x-data x-text="$store.i18n.t('unknown')">Unknown</em>
           {% endif %}
         </td>
-        <td>{{ item.driver.architecture or "Unknown" }}</td>
+        <td>{% if item.driver.architecture %}{{ item.driver.architecture }}{% else %}<span x-data x-text="$store.i18n.t('unknown')">Unknown</span>{% endif %}</td>
         <td>{{ item.driver.uploaded_at }}</td>
       </tr>
       {% endfor %}
     </tbody>
   </table>
   {% else %}
-  <p>No drivers uploaded yet.</p>
+  <p x-data x-text="$store.i18n.t('no_drivers')">No drivers uploaded yet.</p>
   {% endif %}
 </div>

imptune/templates/partials/printer_edit_modal.html

@@ -1,6 +1,7 @@
 <!-- Edit trigger button — placed in Actions column -->
 <button class="secondary outline"
-        onclick="document.getElementById('edit-modal-{{ p.id }}').showModal()">
+        onclick="document.getElementById('edit-modal-{{ p.id }}').showModal()"
+        x-data x-text="$store.i18n.t('edit')">
   Edit
 </button>
 
@@ -10,7 +11,7 @@
     <header>
       <button aria-label="Close" rel="prev"
               onclick="document.getElementById('edit-modal-{{ p.id }}').close()"></button>
-      <h3>Edit Printer</h3>
+      <h3 x-data x-text="$store.i18n.t('edit_printer_title')">Edit Printer</h3>
     </header>
     <div x-data="{ ip: '{{ p.ip_address }}', port: '{{ p.port_name }}', portEdited: true }">
       <form hx-patch="/printers/{{ p.id }}"
@@ -18,27 +19,27 @@
             hx-swap="outerHTML"
             hx-on::after-request="document.getElementById('edit-modal-{{ p.id }}').close()">
 
-        <label>Printer Name
+        <label><span x-text="$store.i18n.t('printer_name')">Printer Name</span>
           <input type="text" name="name" value="{{ p.name }}" required>
         </label>
 
-        <label>IP Address
+        <label><span x-text="$store.i18n.t('ip_address')">IP Address</span>
           <input type="text" name="ip_address"
                  x-model="ip"
                  @input="if (!portEdited) port = 'IP_' + ip.replaceAll('.', '_')"
                  required>
         </label>
 
-        <label>Port Name
+        <label><span x-text="$store.i18n.t('port_name')">Port Name</span>
           <input type="text" name="port_name"
                  x-model="port"
                  @change="portEdited = true"
                  @keydown="portEdited = true">
         </label>
 
-        <label>Driver
+        <label><span x-text="$store.i18n.t('driver')">Driver</span>
           <select name="driver_id">
-            <option value="">-- No driver --</option>
+            <option value="" x-text="$store.i18n.t('no_driver_option')">-- No driver --</option>
             {% for item in driver_data %}
             <option value="{{ item.driver.id }}"
                     {% if p.driver_id == item.driver.id %}selected{% endif %}>
@@ -48,21 +49,21 @@
           </select>
         </label>
 
-        <label>Duplex Mode
+        <label><span x-text="$store.i18n.t('duplex_mode')">Duplex Mode</span>
           <select name="duplex_mode">
-            <option value="OneSided" {% if p.duplex_mode == 'OneSided' %}selected{% endif %}>One-Sided</option>
-            <option value="LongEdge" {% if p.duplex_mode == 'LongEdge' %}selected{% endif %}>Long Edge</option>
-            <option value="ShortEdge" {% if p.duplex_mode == 'ShortEdge' %}selected{% endif %}>Short Edge</option>
+            <option value="OneSided" {% if p.duplex_mode == 'OneSided' %}selected{% endif %} x-text="$store.i18n.t('one_sided')">One-Sided</option>
+            <option value="LongEdge" {% if p.duplex_mode == 'LongEdge' %}selected{% endif %} x-text="$store.i18n.t('long_edge')">Long Edge</option>
+            <option value="ShortEdge" {% if p.duplex_mode == 'ShortEdge' %}selected{% endif %} x-text="$store.i18n.t('short_edge')">Short Edge</option>
           </select>
         </label>
 
         <label>
           <input type="checkbox" name="color_mode" value="on"
                  {% if p.color_mode %}checked{% endif %}>
-          Color Mode
+          <span x-text="$store.i18n.t('color_mode')">Color Mode</span>
         </label>
 
-        <label>Paper Size
+        <label><span x-text="$store.i18n.t('paper_size')">Paper Size</span>
           <select name="paper_size">
             <option value="A4" {% if p.paper_size == 'A4' %}selected{% endif %}>A4</option>
             <option value="Letter" {% if p.paper_size == 'Letter' %}selected{% endif %}>Letter</option>
@@ -73,12 +74,12 @@
         <label>
           <input type="checkbox" name="collate" value="on"
                  {% if p.collate %}checked{% endif %}>
-          Collate
+          <span x-text="$store.i18n.t('collate')">Collate</span>
         </label>
 
-        <label>Client
+        <label><span x-text="$store.i18n.t('client')">Client</span>
           <select name="client_id">
-            <option value="">-- Unassigned --</option>
+            <option value="" x-text="$store.i18n.t('unassigned_option')">-- Unassigned --</option>
             {% for c in clients %}
             <option value="{{ c.id }}"
                     {% if p.client_id == c.id %}selected{% endif %}>
@@ -89,9 +90,10 @@
         </label>
 
         <footer>
-          <button type="submit">Save</button>
+          <button type="submit" x-text="$store.i18n.t('save')">Save</button>
           <button type="button" class="secondary"
-                  onclick="document.getElementById('edit-modal-{{ p.id }}').close()">
+                  onclick="document.getElementById('edit-modal-{{ p.id }}').close()"
+                  x-text="$store.i18n.t('cancel')">
             Cancel
           </button>
         </footer>

imptune/templates/partials/printer_list.html

@@ -1,6 +1,6 @@
 <div id="printer-list">
   {% if not grouped %}
-  <p>No printers configured yet.</p>
+  <p x-data x-text="$store.i18n.t('no_printers')">No printers configured yet.</p>
   {% else %}
   {% for client_name, printers in grouped.items() %}
   <section>
@@ -13,15 +13,15 @@
     <table>
       <thead>
         <tr>
-          <th>Name</th>
-          <th>IP Address</th>
-          <th>Port</th>
-          <th>Driver</th>
-          <th>Duplex</th>
-          <th>Color</th>
-          <th>Paper</th>
-          <th>Collate</th>
-          <th>Actions</th>
+          <th x-data x-text="$store.i18n.t('th_name')">Name</th>
+          <th x-data x-text="$store.i18n.t('th_ip')">IP Address</th>
+          <th x-data x-text="$store.i18n.t('th_port')">Port</th>
+          <th x-data x-text="$store.i18n.t('th_driver')">Driver</th>
+          <th x-data x-text="$store.i18n.t('th_duplex')">Duplex</th>
+          <th x-data x-text="$store.i18n.t('th_color')">Color</th>
+          <th x-data x-text="$store.i18n.t('th_paper')">Paper</th>
+          <th x-data x-text="$store.i18n.t('th_collate')">Collate</th>
+          <th x-data x-text="$store.i18n.t('th_actions')">Actions</th>
         </tr>
       </thead>
       <tbody>
@@ -32,16 +32,19 @@
           <td>{{ p.port_name }}</td>
           <td>{{ p.driver.original_filename if p.driver_id else '—' }}</td>
           <td>{{ p.duplex_mode }}</td>
-          <td>{{ 'Yes' if p.color_mode else 'No' }}</td>
+          <td x-data="{ val: {{ 'true' if p.color_mode else 'false' }} }"
+              x-text="val ? $store.i18n.t('yes') : $store.i18n.t('no')">{{ 'Yes' if p.color_mode else 'No' }}</td>
           <td>{{ p.paper_size }}</td>
-          <td>{{ 'Yes' if p.collate else 'No' }}</td>
+          <td x-data="{ val: {{ 'true' if p.collate else 'false' }} }"
+              x-text="val ? $store.i18n.t('yes') : $store.i18n.t('no')">{{ 'Yes' if p.collate else 'No' }}</td>
           <td>
             {% include "partials/printer_edit_modal.html" %}
             <button
               hx-delete="/printers/{{ p.id }}"
               hx-target="#printer-list"
               hx-swap="outerHTML"
-              hx-confirm="Delete '{{ p.name }}'?">
+              hx-confirm="Delete '{{ p.name }}'?"
+              x-data x-text="$store.i18n.t('delete')">
               Delete
             </button>
           </td>

imptune/templates/printer_detail.html

@@ -2,77 +2,81 @@
 {% block content %}
 <h1>{{ printer.name }}</h1>
 <article>
-  <h2>Configuration</h2>
+  <h2 x-data x-text="$store.i18n.t('configuration')">Configuration</h2>
   <dl>
-    <dt>IP Address</dt><dd>{{ printer.ip_address }}</dd>
-    <dt>Port Name</dt><dd>{{ printer.port_name }}</dd>
-    <dt>Duplex Mode</dt><dd>{{ printer.duplex_mode }}</dd>
-    <dt>Color Mode</dt><dd>{{ "Color" if printer.color_mode else "Grayscale" }}</dd>
-    <dt>Paper Size</dt><dd>{{ printer.paper_size }}</dd>
-    <dt>Collate</dt><dd>{{ "Yes" if printer.collate else "No" }}</dd>
-    <dt>Client</dt><dd>{{ printer.client.name if printer.client_id else "Unassigned" }}</dd>
+    <dt x-data x-text="$store.i18n.t('ip_address')">IP Address</dt><dd>{{ printer.ip_address }}</dd>
+    <dt x-data x-text="$store.i18n.t('port_name')">Port Name</dt><dd>{{ printer.port_name }}</dd>
+    <dt x-data x-text="$store.i18n.t('duplex_mode_label')">Duplex Mode</dt><dd>{{ printer.duplex_mode }}</dd>
+    <dt x-data x-text="$store.i18n.t('color_mode_label')">Color Mode</dt>
+    {% if printer.color_mode %}<dd x-data x-text="$store.i18n.t('color_value')">Color</dd>{% else %}<dd x-data x-text="$store.i18n.t('grayscale_value')">Grayscale</dd>{% endif %}
+    <dt x-data x-text="$store.i18n.t('paper_size_label')">Paper Size</dt><dd>{{ printer.paper_size }}</dd>
+    <dt x-data x-text="$store.i18n.t('collate_label')">Collate</dt>
+    {% if printer.collate %}<dd x-data x-text="$store.i18n.t('yes')">Yes</dd>{% else %}<dd x-data x-text="$store.i18n.t('no')">No</dd>{% endif %}
+    <dt x-data x-text="$store.i18n.t('client_label')">Client</dt>
+    {% if printer.client_id %}<dd>{{ printer.client.name }}</dd>{% else %}<dd x-data x-text="$store.i18n.t('unassigned')">Unassigned</dd>{% endif %}
   </dl>
 
-  <h2>Driver</h2>
+  <h2 x-data x-text="$store.i18n.t('driver_section')">Driver</h2>
   {% if printer.driver_id %}
   <dl>
-    <dt>Package</dt><dd>{{ printer.driver.original_filename }}</dd>
-    <dt>Driver Name(s)</dt><dd>{{ driver_names | join(", ") }}</dd>
-    <dt>Architecture</dt><dd>{{ printer.driver.architecture or "Unknown" }}</dd>
+    <dt x-data x-text="$store.i18n.t('package_label')">Package</dt><dd>{{ printer.driver.original_filename }}</dd>
+    <dt x-data x-text="$store.i18n.t('driver_names_label')">Driver Name(s)</dt><dd>{{ driver_names | join(", ") }}</dd>
+    <dt x-data x-text="$store.i18n.t('architecture_label')">Architecture</dt>
+    <dd>{% if printer.driver.architecture %}{{ printer.driver.architecture }}{% else %}<span x-data x-text="$store.i18n.t('unknown')">Unknown</span>{% endif %}</dd>
   </dl>
   {% else %}
-  <p>No driver assigned</p>
+  <p x-data x-text="$store.i18n.t('no_driver_detail')">No driver assigned</p>
   {% endif %}
 
   {% if has_driver %}
-  <h2>Intune Commands</h2>
+  <h2 x-data x-text="$store.i18n.t('intune_commands')">Intune Commands</h2>
   <div x-data="{ copiedInstall: false }">
-    <label>Install command</label>
+    <label x-text="$store.i18n.t('install_cmd_label')">Install command</label>
     <code id="install-cmd">{{ install_cmd }}</code>
     <button @click="
       const text = document.getElementById('install-cmd').innerText;
       navigator.clipboard.writeText(text).then(() => { copiedInstall = true; setTimeout(() => copiedInstall = false, 2000) })
       .catch(() => { /* fallback: text is visible for manual copy */ })
-    " x-text="copiedInstall ? 'Copied!' : 'Copy'" class="secondary outline"></button>
+    " x-text="copiedInstall ? $store.i18n.t('copied') : $store.i18n.t('copy')" class="secondary outline">Copy</button>
   </div>
   <div x-data="{ copiedUninstall: false }">
-    <label>Uninstall command</label>
+    <label x-text="$store.i18n.t('uninstall_cmd_label')">Uninstall command</label>
     <code id="uninstall-cmd">{{ uninstall_cmd }}</code>
     <button @click="
       const text = document.getElementById('uninstall-cmd').innerText;
       navigator.clipboard.writeText(text).then(() => { copiedUninstall = true; setTimeout(() => copiedUninstall = false, 2000) })
       .catch(() => { /* fallback: text is visible for manual copy */ })
-    " x-text="copiedUninstall ? 'Copied!' : 'Copy'" class="secondary outline"></button>
+    " x-text="copiedUninstall ? $store.i18n.t('copied') : $store.i18n.t('copy')" class="secondary outline">Copy</button>
   </div>
 
-  <h2>Scripts</h2>
-  <a href="/printers/{{ printer.id }}/scripts/install.ps1" role="button" class="secondary">
+  <h2 x-data x-text="$store.i18n.t('scripts_section')">Scripts</h2>
+  <a href="/printers/{{ printer.id }}/scripts/install.ps1" role="button" class="secondary" x-data x-text="$store.i18n.t('download_install')">
     Download Install Script
   </a>
-  <a href="/printers/{{ printer.id }}/scripts/uninstall.ps1" role="button" class="secondary">
+  <a href="/printers/{{ printer.id }}/scripts/uninstall.ps1" role="button" class="secondary" x-data x-text="$store.i18n.t('download_uninstall')">
     Download Uninstall Script
   </a>
-  <a href="/printers/{{ printer.id }}/scripts/detect.ps1" role="button" class="secondary">
+  <a href="/printers/{{ printer.id }}/scripts/detect.ps1" role="button" class="secondary" x-data x-text="$store.i18n.t('download_detect')">
     Download Detect Script
   </a>
 
-  <h2>Export</h2>
-  <a href="/printers/{{ printer.id }}/packages/ninja" role="button">Download NinjaRMM ZIP</a>
-  <a href="/printers/{{ printer.id }}/packages/intunewin" role="button">Download .intunewin</a>
+  <h2 x-data x-text="$store.i18n.t('export_section')">Export</h2>
+  <a href="/printers/{{ printer.id }}/packages/ninja" role="button" x-data x-text="$store.i18n.t('download_ninja')">Download NinjaRMM ZIP</a>
+  <a href="/printers/{{ printer.id }}/packages/intunewin" role="button" x-data x-text="$store.i18n.t('download_intunewin')">Download .intunewin</a>
   {% endif %}
 
-  <h2>Icon</h2>
+  <h2 x-data x-text="$store.i18n.t('icon_section')">Icon</h2>
   {% if has_icon %}
-  <p>Icon uploaded</p>
+  <p x-data x-text="$store.i18n.t('icon_uploaded')">Icon uploaded</p>
   {% endif %}
   <form hx-post="/printers/{{ printer.id }}/icon"
         hx-target="#icon-status" hx-swap="innerHTML"
         enctype="multipart/form-data">
     <input type="file" name="file" accept="image/png" required>
-    <button type="submit">Upload Icon</button>
+    <button type="submit" x-data x-text="$store.i18n.t('upload_icon')">Upload Icon</button>
   </form>
   <div id="icon-status"></div>
 
-  <a href="/printers" role="button" class="secondary">Back to Printers</a>
+  <a href="/printers" role="button" class="secondary" x-data x-text="$store.i18n.t('back_to_printers_btn')">Back to Printers</a>
 </article>
 {% endblock %}

imptune/templates/printers.html

@@ -1,12 +1,12 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1>Printers</h1>
+<h1 x-data x-text="$store.i18n.t('printers')">Printers</h1>
 
-<p><a href="/printers/new" role="button">Add Printer</a></p>
+<p><a href="/printers/new" role="button" x-data x-text="$store.i18n.t('add_printer')">Add Printer</a></p>
 
 <section>
-  <h2>Printer Library</h2>
+  <h2 x-data x-text="$store.i18n.t('printer_library')">Printer Library</h2>
   {% include "partials/printer_list.html" %}
 </section>
 {% endblock %}

imptune/templates/printers_new.html

@@ -1,20 +1,20 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1>Add Printer</h1>
+<h1 x-data x-text="$store.i18n.t('add_printer_title')">Add Printer</h1>
 
-<p><a href="/printers">&larr; Back to Printer Library</a></p>
+<p><a href="/printers" x-data x-text="$store.i18n.t('back_to_printer_library')">&larr; Back to Printer Library</a></p>
 
 <div x-data="{ ip: '', port: '', portEdited: false }">
   <form action="/printers" method="post">
 
     <label>
-      Printer Name
+      <span x-text="$store.i18n.t('printer_name')">Printer Name</span>
       <input type="text" name="name" placeholder="e.g. HP LaserJet 4050" required>
     </label>
 
     <label>
-      IP Address
+      <span x-text="$store.i18n.t('ip_address')">IP Address</span>
       <input type="text" name="ip_address"
              x-model="ip"
              @input="if (!portEdited) port = 'IP_' + ip.replaceAll('.', '_')"
@@ -23,7 +23,7 @@
     </label>
 
     <label>
-      Port Name
+      <span x-text="$store.i18n.t('port_name')">Port Name</span>
       <input type="text" name="port_name"
              x-model="port"
              @change="portEdited = true"
@@ -32,9 +32,9 @@
     </label>
 
     <label>
-      Driver
+      <span x-text="$store.i18n.t('driver')">Driver</span>
       <select name="driver_id" id="printer-form-driver-select">
-        <option value="">-- No driver --</option>
+        <option value="" x-text="$store.i18n.t('no_driver_option')">-- No driver --</option>
         {% for item in driver_data %}
         <option value="{{ item.driver.id }}">
           {{ item.driver.original_filename }} ({{ item.names | join(', ') }})
@@ -44,21 +44,21 @@
     </label>
 
     <label>
-      Duplex Mode
+      <span x-text="$store.i18n.t('duplex_mode')">Duplex Mode</span>
       <select name="duplex_mode">
-        <option value="OneSided" selected>One-Sided</option>
-        <option value="LongEdge">Long Edge</option>
-        <option value="ShortEdge">Short Edge</option>
+        <option value="OneSided" selected x-text="$store.i18n.t('one_sided')">One-Sided</option>
+        <option value="LongEdge" x-text="$store.i18n.t('long_edge')">Long Edge</option>
+        <option value="ShortEdge" x-text="$store.i18n.t('short_edge')">Short Edge</option>
       </select>
     </label>
 
     <label>
       <input type="checkbox" name="color_mode" value="on" checked>
-      Color Mode
+      <span x-text="$store.i18n.t('color_mode')">Color Mode</span>
     </label>
 
     <label>
-      Paper Size
+      <span x-text="$store.i18n.t('paper_size')">Paper Size</span>
       <select name="paper_size">
         <option value="A4" selected>A4</option>
         <option value="Letter">Letter</option>
@@ -68,20 +68,20 @@
 
     <label>
       <input type="checkbox" name="collate" value="on" checked>
-      Collate
+      <span x-text="$store.i18n.t('collate')">Collate</span>
     </label>
 
     <label>
-      Client
+      <span x-text="$store.i18n.t('client')">Client</span>
       <select name="client_id">
-        <option value="">-- Unassigned --</option>
+        <option value="" x-text="$store.i18n.t('unassigned_option')">-- Unassigned --</option>
         {% for c in clients %}
         <option value="{{ c.id }}">{{ c.name }}</option>
         {% endfor %}
       </select>
     </label>
 
-    <button type="submit">Save Printer</button>
+    <button type="submit" x-text="$store.i18n.t('save_printer')">Save Printer</button>
   </form>
 
   <form hx-post="/drivers/upload"
@@ -90,10 +90,10 @@
         hx-swap="outerHTML">
     <input type="hidden" name="caller" value="printer_form">
     <label>
-      Upload New Driver
+      <span x-text="$store.i18n.t('upload_new_driver')">Upload New Driver</span>
       <input type="file" name="file" accept=".zip" required>
     </label>
-    <button type="submit" class="secondary">Upload Driver</button>
+    <button type="submit" class="secondary" x-text="$store.i18n.t('upload_driver')">Upload Driver</button>
   </form>
   <div id="driver-list" style="display:none"></div>
 </div>