Adding filters and controls for scopes

app/templates/scopes.html

@@ -10,77 +10,40 @@
     is a confirmed fit, <span class="fit-badge fit-badge-possible">Possible</span> a candidate.
   </p>
 
-  {%- macro mag(v) -%}{{ v | int if v == v | int else v | round(1) }}{%- endmacro -%}
-  {% macro magnification(info) -%}
-    {%- if info and info.magnification_min is not none and info.magnification_max is not none -%}
-      {{ mag(info.magnification_min) }}–{{ mag(info.magnification_max) }}×
-    {%- elif info and info.magnification_min is not none -%}
-      {{ mag(info.magnification_min) }}×
-    {%- elif info and info.magnification_max is not none -%}
-      {{ mag(info.magnification_max) }}×
-    {%- else -%}
-      <span class="muted">—</span>
-    {%- endif -%}
-  {%- endmacro %}
-
-  <div class="card" style="overflow-x:auto">
-    <table class="table">
-      <thead>
-        <tr>
-          <th>Scope</th>
-          <th>Manufacturer</th>
-          <th>Model</th>
-          <th>Type</th>
-          <th>Magnification</th>
-          <th>Objective thread</th>
-          {% for ct in column_types %}
-            <th>{{ ct.name }}</th>
-          {% endfor %}
-        </tr>
-      </thead>
-      <tbody>
-        {% for row in rows %}
-          {% set scope = row.scope %}
-          {% set info = row.info %}
-          <tr>
-            <td>
-              <strong>{{ scope.description }}</strong>
-              {% if scope.sku %}<br><span class="muted">{{ scope.sku }}</span>{% endif %}
-            </td>
-            <td>{{ scope.manufacturer.name if scope.manufacturer else "—" }}</td>
-            <td>{{ scope.scope_model.name if scope.scope_model else "—" }}</td>
-            <td>{{ scope.sub_part_type.name if scope.sub_part_type else "—" }}</td>
-            <td>{{ magnification(info) }}</td>
-            <td>
-              {% if info and info.objective_thread_pitch %}
-                {{ info.objective_thread_pitch }}
-              {% else %}<span class="muted">—</span>{% endif %}
-            </td>
-            {% for ct in column_types %}
-              {% set entries = row.cells.get(ct.id) %}
-              <td>
-                {% if entries %}
-                  {% for e in entries %}
-                    <div class="fit-cell-item">
-                      <span class="fit-badge fit-badge-{{ e.label }}">{{ e.label | capitalize }}</span>
-                      {{ e.part.description | truncate(48) }}
-                    </div>
-                  {% endfor %}
-                {% else %}
-                  <span class="muted">—</span>
-                {% endif %}
-              </td>
-            {% endfor %}
-          </tr>
-        {% else %}
-          <tr>
-            <td colspan="{{ 6 + column_types | length }}" class="muted">
-              No scopes recorded yet.
-            </td>
-          </tr>
+  <div class="filter-bar">
+    <form hx-get="/scopes/filter"
+          hx-target="#scopes-table-card"
+          hx-trigger="input delay:300ms, change"
+          hx-swap="outerHTML">
+      <input type="text" name="description" placeholder="Search scopes…"
+             value="{{ filters.description or '' }}">
+      <select name="manufacturer_id">
+        <option value="">All manufacturers</option>
+        {% for m in manufacturers %}
+          <option value="{{ m.id }}" {{ "selected" if filters.manufacturer_id and filters.manufacturer_id|int == m.id }}>{{ m.name }}</option>
         {% endfor %}
-      </tbody>
-    </table>
+      </select>
+      <select name="scope_model_id">
+        <option value="">All models</option>
+        {% for sm in scope_models %}
+          <option value="{{ sm.id }}" {{ "selected" if filters.scope_model_id and filters.scope_model_id|int == sm.id }}>{{ sm.name }}</option>
+        {% endfor %}
+      </select>
+      <select name="sub_part_type_id">
+        <option value="">All types</option>
+        {% for spt in sub_part_types %}
+          <option value="{{ spt.id }}" {{ "selected" if filters.sub_part_type_id and filters.sub_part_type_id|int == spt.id }}>{{ spt.name }}</option>
+        {% endfor %}
+      </select>
+      <select name="fits_part_type_id">
+        <option value="">Fits any accessory</option>
+        {% for ct in column_types %}
+          <option value="{{ ct.id }}" {{ "selected" if filters.fits_part_type_id and filters.fits_part_type_id|int == ct.id }}>Fits {{ ct.name }}</option>
+        {% endfor %}
+      </select>
+    </form>
   </div>
+
+  {% include "_scopes_table_card.html" %}
 </main>
 {% endblock %}