Adding filtering to tables

app/templates/admin/_imported_parts_table.html

@@ -6,39 +6,14 @@
     <p style="color:var(--color-danger,#c00)">{{ sync_error }}</p>
   {% endif %}
 
-  <div class="card" style="overflow-x:auto">
-    <p class="muted" style="margin-bottom:.5rem">
-      Showing {{ parts|length }} record{{ '' if parts|length == 1 else 's' }}{% if total and total > parts|length %} of {{ total }} total{% endif %}.
-    </p>
-    <table class="table">
-      <thead>
-        <tr>
-          <th>InventoryID</th>
-          <th>Description</th>
-          <th>TBX Colour</th>
-          <th>Max Thread Depth (mm)</th>
-          <th>Max Thread Depth (in)</th>
-          <th>OD (mm)</th>
-          <th>OD (in)</th>
-          <th>Thread Attribute</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for p in parts %}
-        <tr>
-          <td>{{ p.InventoryID }}</td>
-          <td>{{ p.Description or '—' }}</td>
-          <td>{{ p.TBXColour or '—' }}</td>
-          <td>{{ p.ProductMaxThreadDepthmm or '—' }}</td>
-          <td>{{ p.ProductMaxThreadDepthin or '—' }}</td>
-          <td>{{ p.ProductODmm or '—' }}</td>
-          <td>{{ p.ProductODin or '—' }}</td>
-          <td>{{ p.TBXThreadAttribute or '—' }}</td>
-        </tr>
-        {% else %}
-        <tr><td colspan="8" class="muted">No imported parts. Use Refresh to sync from OData.</td></tr>
-        {% endfor %}
-      </tbody>
-    </table>
+  <div class="filter-bar">
+    <form hx-get="/admin/imported-parts/filter"
+          hx-target="#imported-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 '' }}">
+    </form>
   </div>
+
+  {% include "admin/_imported_parts_table_card.html" %}
 </div>