Too many changes :(

atlas/templates/atlas/case_view.html

@@ -20,7 +20,45 @@
             </div>
             View my <a href='{% url "atlas:case_view" %}?author={{request.user.id}}'>cases</a>.
         </details>
+
+        <form>
+        <details id="actions-detail" class="mt-3">
+            <summary>
+                <strong>Actions</strong>
+            </summary>
+<div class="row mb-2">
+    <div class="col-auto">
+        <select id="collection-select" name="collection_id" class="form-select form-select-sm">
+            <!-- Dynamically load collection options via HTMX -->
+            <option value="">Loading collections...</option>
+            <option hx-trigger="every 1s[document.getElementById('actions-detail').open] once" hx-get="{% url 'atlas:collection_options' %}" hx-target="#collection-select" hx-swap="innerHTML"></option>
+        </select>
+    </div>
+    <div class="col-auto">
+        <button id="add-to-collection-btn"
+            class="btn btn-sm btn-outline-primary"
+            hx-post="{% url 'atlas:add_cases_to_collection' %}"
+            hx-include="[name='selection']:checked, #collection-select"
+            hx-target="#action-result"
+            hx-swap="innerHTML"
+            >
+            Add selected cases to collection
+        </button>
+        <button id="remove-from-collection-btn"
+            class="btn btn-sm btn-outline-danger ms-2"
+            hx-post="{% url 'atlas:remove_cases_from_collection' %}"
+            hx-include="[name='selection']:checked, #collection-select"
+            hx-target="#action-result"
+            hx-swap="innerHTML"
+            >
+            Remove selected cases from collection
+        </button>
+        <span id="action-result"></span>
+    </div>
+</div>
+        </details>
         {% render_table table %}
+    </form>
     </div>
 
     <div id="exam-options"></div>

atlas/templates/atlas/partials/collection_options.html

@@ -0,0 +1,5 @@
+        {% for collection in collections %}
+            <option value="{{ collection.pk }}">{{ collection.name }}</option>
+        {% empty %}
+            <option value="">No collections available</option>
+        {% endfor %}

atlas/templates/atlas/series_view.html

@@ -21,7 +21,7 @@
 
         <details class="mt-3">
             <summary>
-                <strong>Extra options</strong>
+                <strong>Actions</strong>
             </summary>
             <form id="bulk-delete-form" method="post" action="{% url 'atlas:series_bulk_delete' %}">
                 {% csrf_token %}
@@ -62,34 +62,6 @@ document.getElementById('bulk-delete-form').addEventListener('submit', function(
 {% block js %}
     <script>
 document.addEventListener('DOMContentLoaded', function() {
-    // Delegate click event to all table rows
-    document.querySelectorAll('.table tbody tr').forEach(function(row) {
-        row.addEventListener('click', function(e) {
-            // Ignore clicks on links or checkboxes
-            if (e.target.tagName === 'A' || e.target.tagName === 'INPUT') return;
-
-            // Find the checkbox in this row
-            const checkbox = row.querySelector('input[name="selection"]');
-            if (checkbox) {
-                checkbox.checked = !checkbox.checked;
-                row.classList.toggle('selected', checkbox.checked);
-            }
-        });
-
-        // Keep row visually in sync with checkbox state (e.g. after page reload)
-        const checkbox = row.querySelector('input[name="selection"]');
-        if (checkbox && checkbox.checked) {
-            row.classList.add('selected');
-        }
-        // Also toggle row selection when checkbox is clicked directly
-        if (checkbox) {
-            checkbox.addEventListener('click', function(e) {
-                row.classList.toggle('selected', checkbox.checked);
-                // Prevent row click event from firing
-                e.stopPropagation();
-            });
-        }
-    });
 });
     </script>
 {% endblock %}
@@ -97,16 +69,6 @@ document.addEventListener('DOMContentLoaded', function() {
 
 {% block css %}
     <style>
-/* Highlight row on hover */
-.table tbody tr:hover {
-    background-color: darkblue;
-    cursor: pointer;
-}
-/* Highlight selected row */
-.table tbody tr.selected {
-    background-color: #b3d7ff !important;
-    color: #333;
-}
 </style>
 {% endblock css %}