Adding a bulk delete option to the scopes page

app/templates/_scopes_table_card.html

@@ -21,6 +21,9 @@
   <table class="table sortable">
     <thead>
       <tr>
+        {% if can_write_scopes %}
+          <th data-sort-off><input type="checkbox" id="scopes-select-all" title="Select all"></th>
+        {% endif %}
         <th>Scope</th>
         <th>Manufacturer</th>
         <th>Model</th>
@@ -30,9 +33,6 @@
         {% for ct in column_types %}
           <th data-sort-off>{{ ct.name }}</th>
         {% endfor %}
-        {% if can_write_scopes %}
-          <th data-sort-off></th>
-        {% endif %}
       </tr>
     </thead>
     <tbody>
@@ -40,6 +40,9 @@
         {% set scope = row.scope %}
         {% set info = row.info %}
         <tr id="scope-row-{{ scope.id }}">
+          {% if can_write_scopes %}
+            <td><input type="checkbox" name="scope_ids" value="{{ scope.id }}"></td>
+          {% endif %}
           <td>
             <strong><a href="/admin/augmented-parts/{{ scope.id }}">{{ scope.description }}</a></strong>
             {% if scope.sku %}<br><span class="muted">{{ scope.sku }}</span>{% endif %}
@@ -70,15 +73,6 @@
               {% endif %}
             </td>
           {% endfor %}
-          {% if can_write_scopes %}
-            <td class="row-actions">
-              <button class="btn btn-danger"
-                      hx-delete="/scopes/{{ scope.id }}"
-                      hx-target="#scope-row-{{ scope.id }}"
-                      hx-swap="outerHTML"
-                      hx-confirm="Delete {{ scope.sku or scope.description }}?">Delete</button>
-            </td>
-          {% endif %}
         </tr>
       {% else %}
         <tr>

app/templates/scopes.html

@@ -44,6 +44,50 @@
     </form>
   </div>
 
+  {% if can_write_scopes %}
+    <div class="bulk-actions">
+      <button id="delete-selected-scopes-btn" type="button" class="btn btn-danger" disabled
+              hx-post="/scopes/bulk-delete"
+              hx-include="[name='scope_ids']:checked, [name='description'], [name='manufacturer_id'], [name='scope_model_id'], [name='sub_part_type_id'], [name='fits_part_type_id']"
+              hx-target="#scopes-table-card"
+              hx-swap="outerHTML"
+              hx-confirm="Delete selected scopes?">Delete selected</button>
+    </div>
+  {% endif %}
+
   {% include "_scopes_table_card.html" %}
 </main>
+
+{% if can_write_scopes %}
+<script>
+(function () {
+  function updateDeleteButton() {
+    var count = document.querySelectorAll('input[name="scope_ids"]:checked').length;
+    var btn = document.getElementById('delete-selected-scopes-btn');
+    if (!btn) return;
+    btn.textContent = count > 0 ? 'Delete selected (' + count + ')' : 'Delete selected';
+    btn.disabled = count === 0;
+    btn.setAttribute('hx-confirm', 'Delete ' + count + ' selected scope' + (count === 1 ? '' : 's') + '?');
+  }
+
+  document.addEventListener('change', function (e) {
+    if (!e.target) return;
+
+    if (e.target.id === 'scopes-select-all') {
+      document.querySelectorAll('input[name="scope_ids"]').forEach(function (cb) {
+        cb.checked = e.target.checked;
+      });
+    }
+
+    if (e.target.id === 'scopes-select-all' || e.target.name === 'scope_ids') {
+      updateDeleteButton();
+    }
+  });
+
+  // Re-run after every HTMX swap (filter results, post-delete) so the button
+  // state reflects the freshly rendered checkboxes, which start unchecked.
+  document.addEventListener('htmx:afterSwap', updateDeleteButton);
+}());
+</script>
+{% endif %}
 {% endblock %}