Adding filtering to tables

app/templates/admin/_skipped_parts_table.html

@@ -2,7 +2,7 @@
   {% if sync_result %}<p class="alert alert-success">{{ sync_result }}</p>{% endif %}
   {% if sync_error %}<p class="alert alert-error">{{ sync_error }}</p>{% endif %}
 
-  {% if unlinked_parts %}
+  {% if any_unlinked %}
   <form hx-post="/admin/augmented-parts/skipped"
         hx-target="#skipped-parts-list"
         hx-swap="outerHTML">
@@ -29,29 +29,23 @@
       </div>
     </div>
 
-    <div class="card" style="overflow-x:auto">
-      <table class="table">
-        <thead>
-          <tr>
-            <th><input type="checkbox" id="select-all" title="Select all"></th>
-            <th>Inventory ID</th>
-            <th>Description</th>
-            <th>Colour</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for ip in unlinked_parts %}
-          <tr>
-            <td><input type="checkbox" name="inventory_ids" value="{{ ip.InventoryID }}"></td>
-            <td><code>{{ ip.InventoryID }}</code></td>
-            <td>{{ ip.Description | truncate(80) if ip.Description else '—' }}</td>
-            <td>{{ ip.TBXColour or '—' }}</td>
-          </tr>
+    <div class="filter-bar">
+      <form hx-get="/admin/augmented-parts/skipped/filter"
+            hx-target="#skipped-parts-table-card"
+            hx-trigger="input delay:300ms, change"
+            hx-swap="outerHTML">
+        <input type="text" name="description" placeholder="Filter by description…" value="{{ filter_description or '' }}">
+        <select name="colour">
+          <option value="">All colours</option>
+          {% for c in skipped_colours %}
+            <option value="{{ c }}" {{ "selected" if filter_colour == c }}>{{ c }}</option>
           {% endfor %}
-        </tbody>
-      </table>
+        </select>
+      </form>
     </div>
 
+    {% include "admin/_skipped_parts_table_card.html" %}
+
   </form>
   {% else %}
   <div class="card">