Adding a bulk delete option to the scopes page

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 %}