7 files changed, 28 insertions, 43 deletions
diff --git a/browser/templates/base.html.j2 b/browser/templates/base.html.j2
index 8b41a85..47b3f6c 100644
--- a/browser/templates/base.html.j2
+++ b/browser/templates/base.html.j2
@@ -14,22 +14,6 @@
   <h1><a href="/">Database browser</a></h1>
   {% block content %}{% endblock %}
 
-  <!-- https://leanrada.com/htmz/ -->
-  <iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(contentWindow.location.hash||null)?.replaceWith(...contentDocument.body.childNodes))"></iframe>
-  <!-- Enable progressive enhancement for htmz -->
-  <script>
-  document.querySelectorAll("form[htmz]").forEach(function (element) {
-    const input = document.createElement("input");
-    input.type = "hidden";
-    input.name = "htmz";
-    input.value = element.attributes.replace.value;
-    element.appendChild(input);
-
-    const action = new URL(element.action);
-    action.hash = element.attributes.replace.value;
-    element.action = action.toString();
-    element.target = "htmz";
-  });
-  </script>
+  <script src="/static/htmp.js"></script>
 </body>
 </html>
diff --git a/browser/templates/frag_aside.html.j2 b/browser/templates/frag_aside.html.j2
index 8366436..7ec10ad 100644
--- a/browser/templates/frag_aside.html.j2
+++ b/browser/templates/frag_aside.html.j2
@@ -1,8 +1,8 @@
 <aside id="aside">
     <h3>Read operations</h3>
     <ul>
-        <li><a href="/find">Find</a></li>
-        <li><a href="/range">Range</a></li>
+        <li><a href="/find" htmp replace=form_query>Find</a></li>
+        <li><a href="/range" htmp replace=form_query>Range</a></li>
     </ul>
     <h3>Write operations</h3>
     <ul>
diff --git a/browser/templates/frag_error.html.j2 b/browser/templates/frag_error.html.j2
index f014f0a..092642f 100644
--- a/browser/templates/frag_error.html.j2
+++ b/browser/templates/frag_error.html.j2
@@ -1,10 +1,10 @@
 {% if container %}
-<{{ container }}>
+<div id="{{ container }}">
 {% endif %}
 
 <h2>Error</h2>
 {{ error }}
 
 {% if container %}
-</{{ container }}>
+</div>
 {% endif %}
diff --git a/browser/templates/frag_form_find.html.j2 b/browser/templates/frag_form_find.html.j2
index a8fe493..cadd44b 100644
--- a/browser/templates/frag_form_find.html.j2
+++ b/browser/templates/frag_form_find.html.j2
@@ -1,7 +1,7 @@
-<form action="/find" method="post" htmz replace=main>
+<form id="form_query" action="/find" method="post" htmp replace=results>
     <label for="field">Field</label>
     <input type="text" name="field" id="field" required>
-    <label for="values">Values</label>
-    <input type="text" name="values" id="values" required>
+    <label for="values">Values (one per line)</label>
+    <textarea name="values" id="values" required></textarea>
     <button type="submit">Run query</button>
 </form>
diff --git a/browser/templates/frag_form_range.html.j2 b/browser/templates/frag_form_range.html.j2
index b343b6d..96fe8a8 100644
--- a/browser/templates/frag_form_range.html.j2
+++ b/browser/templates/frag_form_range.html.j2
@@ -1,4 +1,4 @@
-<form action="/range" method="post" htmz replace=main>
+<form id="form_query" action="/range" method="post" htmp replace=results>
     <label for="field">Field</label>
     <input type="text" name="field" id="field" required>
     <label for="values">From...</label>
diff --git a/browser/templates/frag_results.html.j2 b/browser/templates/frag_results.html.j2
new file mode 100644
index 0000000..bfb54e9
--- /dev/null
+++ b/browser/templates/frag_results.html.j2
@@ -0,0 +1,18 @@
+<table id="results">
+<thead>
+    <tr>
+    {% for field_name in field_names %}
+        <th>{{ field_name }}</th>
+    {% endfor %}
+    </tr>
+</thead>
+<tbody>
+    {% for row in rows %}
+    <tr>
+    {% for field in row %}
+        <td>{{ field }}</td>
+    {% endfor %}
+    </tr>
+    {% endfor %}
+</tbody>
+</table>
diff --git a/browser/templates/page_main.html.j2 b/browser/templates/page_main.html.j2
index 8ce4a13..907275f 100644
--- a/browser/templates/page_main.html.j2
+++ b/browser/templates/page_main.html.j2
@@ -5,24 +5,7 @@
     {% include "frag_aside.html.j2" %}
 
     <main id="main">
-        <table>
-        <thead>
-            <tr>
-            {% for field_name in field_names %}
-                <th>{{ field_name }}</th>
-            {% endfor %}
-            </tr>
-        </thead>
-        <tbody>
-            {% for row in rows %}
-            <tr>
-            {% for field in row %}
-                <td>{{ field }}</td>
-            {% endfor %}
-            </tr>
-            {% endfor %}
-        </tbody>
-        </table>
+        {% include "frag_results.html.j2" %}
     </main>
 </div>
 {% endblock %}