Refactor CID user list rendering: consolidate user list into a single template and enhance toggle feedback with count updates

generic/templates/generic/exam_cids_edit.html

@@ -33,14 +33,7 @@
             </div>
         </div>
 
-        <ul class="list-group list-group-flush" id="cid-users-list">
+        {% include 'generic/partials/cid_user_list.html' with exam=exam current_cid_users=current_cid_users available_cid_users=available_cid_users %}
-            {% for cid in current_cid_users %}
-                {% include 'generic/partials/cid_user_li.html' with cid=cid current=True exam=exam %}
-            {% endfor %}
-            {% for cid in available_cid_users %}
-                {% include 'generic/partials/cid_user_li.html' with cid=cid current=False exam=exam %}
-            {% endfor %}
-        </ul>
     </div>
 </div>
 
@@ -159,7 +152,7 @@
             });
         });
 
-        // HTMX: listen for server HX-Trigger to show toasts for toggles
+        // HTMX: listen for server HX-Trigger to show toasts for toggles and update counts
         document.body.addEventListener('cid_toggled', function(evt){
             try {
                 const detail = evt.detail || {};
@@ -168,6 +161,17 @@
                     if (added) toastr.info(`User added to exam`);
                     else toastr.info(`User removed from exam`);
                 }
+                // Update counts for single-item toggles (bulk swaps replace the whole wrapper)
+                const addedEl = document.getElementById('cid-count-added');
+                const availEl = document.getElementById('cid-count-available');
+                if (addedEl && availEl){
+                    let addedCount = parseInt(addedEl.textContent || '0') || 0;
+                    let availCount = parseInt(availEl.textContent || '0') || 0;
+                    if (added){ addedCount += 1; availCount = Math.max(0, availCount - 1); }
+                    else { addedCount = Math.max(0, addedCount - 1); availCount += 1; }
+                    addedEl.textContent = String(addedCount);
+                    availEl.textContent = String(availCount);
+                }
             } catch(e) { /* ignore */ }
         });
 

generic/templates/generic/partials/cid_user_li.html

@@ -6,7 +6,11 @@
         </div>
         <div class="small text-muted">{{cid.name}} &middot; {{cid.email}}</div>
     </div>
-    <div class="btn-group ms-2">
+    <div class="d-flex align-items-center ms-2">
+        {% if cid.group and cid.group in exam.cid_user_groups.all %}
+            <div class="small text-muted me-2"><span class="badge bg-info text-dark">{{ cid.group.name }}</span></div>
+        {% endif %}
+        <div class="btn-group">
             <a href="{% url 'generic:update_cid' cid.pk %}" class="btn btn-sm btn-outline-light">Edit</a>
             <form method="post" class="d-inline m-0 p-0"
                   action="{% url exam.app_name|add:':exam_json_edit' exam.pk %}"
@@ -19,4 +23,5 @@
                 <button type="submit" class="btn btn-sm btn-outline-light toggle-btn">Toggle</button>
             </form>
         </div>
+    </div>
 </li>

generic/templates/generic/partials/cid_user_list.html

@@ -1,3 +1,8 @@
+<div id="cid-users-wrap">
+    <div class="d-flex justify-content-between align-items-center mb-2 small text-muted">
+        <div>Added: <span id="cid-count-added">{{ current_cid_users|length }}</span></div>
+        <div>Available: <span id="cid-count-available">{{ available_cid_users|length }}</span></div>
+    </div>
     <ul class="list-group list-group-flush" id="cid-users-list">
         {% for cid in current_cid_users %}
             {% include 'generic/partials/cid_user_li.html' with cid=cid current=True exam=exam %}
@@ -6,3 +11,4 @@
             {% include 'generic/partials/cid_user_li.html' with cid=cid current=False exam=exam %}
         {% endfor %}
     </ul>
+</div>