Add case jump functionality with HTMX support and corresponding template

atlas/templates/atlas/collection_case_view_take.html

@@ -3,19 +3,34 @@
 
 {% block content %}
     <span class="collection-name-blend">Collection: {{collection}}</span>
-    <h2>Case {{case_number|add:1}}
+    <div class="d-flex justify-content-between align-items-start">
+        <h2 class="mb-0">Case {{case_number|add:1}}
 
-        {% if show_title %}
-            : {{case.title}}
-        {% endif %}
+            {% if show_title %}
+                : {{case.title}}
+            {% endif %}
 
 
-        {% if question_completed %}
-            <span class="stamp-white">REVIEW</span>
-        {% endif %}
+            {% if question_completed %}
+                <span class="stamp-white">REVIEW</span>
+            {% endif %}
 
+        </h2>
 
-    </h2>
+        <!-- Case jump dropdown (loads via HTMX) - placed to the right of the header -->
+        <div class="dropdown ms-3">
+            <a class="btn btn-outline-secondary btn-sm dropdown-toggle" href="#" role="button" id="caseJump" data-bs-toggle="dropdown" aria-expanded="false"
+               hx-get="{% url 'atlas:collection_case_jump_partial' pk=collection.pk %}?current={{case_number}}{% if cid %}&cid={{cid}}&passcode={{passcode}}{% endif %}"
+               hx-target="#case-jump-menu"
+               hx-swap="innerHTML"
+               hx-trigger="click">
+                Jump
+            </a>
+            <div class="dropdown-menu dropdown-menu-end" id="case-jump-menu">
+                <div class="px-3 py-2 text-muted">Loading...</div>
+            </div>
+        </div>
+    </div>
 
     {% if not question_completed and collection.question_time_limit is not None %}
         <div id="question-timer-block" style="margin-top:8px; margin-bottom:8px;" title="This question has a time limit of {{ collection.question_time_limit }} seconds. The timer will start when the page loads.">

atlas/templates/atlas/partials/_collection_case_jump.html

@@ -0,0 +1,11 @@
+{% for cd in casedetails %}
+    {% with idx=forloop.counter0 %}
+        {% if cid %}
+            <a class="dropdown-item {% if idx == current %}active{% endif %}" href="{% url 'atlas:collection_case_view_take' pk=collection.pk case_number=idx cid=cid passcode=passcode %}">
+        {% else %}
+            <a class="dropdown-item {% if idx == current %}active{% endif %}" href="{% url 'atlas:collection_case_view_take_user' pk=collection.pk case_number=idx %}">
+        {% endif %}
+            Case {{ forloop.counter }}: {{ cd.case.title|default:cd.case.pk|truncatechars:60 }}
+        </a>
+    {% endwith %}
+{% endfor %}