adattato html, test htmx con componente svelte

web/templates/admin/users/index.html

@@ -0,0 +1,36 @@
+{{define "content"}}
+<h1>Users</h1>
+<p class="muted">Ricerca, ordinamento e paging server-side via HTMX.</p>
+
+<form id="usersFilters" class="row" hx-get="/admin/users/table" hx-target="#usersTableContainer" hx-swap="innerHTML">
+  <input type="text" name="q" placeholder="Cerca nome o email" value="{{.PageData.Q}}">
+  <input type="number" name="pageSize" min="1" max="100" value="{{.PageData.PageSize}}" style="max-width:120px;">
+  <input type="hidden" name="sort" value="{{.PageData.Sort}}">
+  <input type="hidden" name="dir" value="{{.PageData.Dir}}">
+  <input type="hidden" name="page" value="1">
+  <button type="submit">Cerca</button>
+</form>
+
+<div id="usersTableContainer" hx-get="/admin/users/table?q={{.PageData.Q}}&sort={{.PageData.Sort}}&dir={{.PageData.Dir}}&page={{.PageData.Page}}&pageSize={{.PageData.PageSize}}" hx-trigger="load" hx-swap="innerHTML">
+  {{template "users_table" .}}
+</div>
+
+<ui-modal id="userModal" title="Dettaglio utente">
+  <div
+    id="userModalContent"
+    hx-on:htmx:after-swap="document.getElementById('userModal').setAttribute('open','')"
+  ></div>
+</ui-modal>
+
+<script>
+  (function () {
+    var modal = document.getElementById('userModal');
+    var content = document.getElementById('userModalContent');
+    if (!modal || !content || modal.dataset.closeBound === '1') return;
+    modal.dataset.closeBound = '1';
+    modal.addEventListener('ui:close', function () {
+      content.innerHTML = '';
+    });
+  })();
+</script>
+{{end}}