Add filtering functionality for CID and User candidates in exam view

generic/templates/generic/exam_cids.html

@@ -15,6 +15,9 @@
                 <div class="card h-100">
                     <div class="card-body">
                         <h5 class="card-title">CID candidates <small class="text-muted">({{ cid_user_count }})</small></h5>
+                        <div class="mb-2">
+                            <input id="cid-filter" class="form-control form-control-sm" placeholder="Filter CID candidates by CID, name, email or passcode">
+                        </div>
                         <div id="htmx-info"></div>
                         {% if cid_users %}
                             <ul class="list-group list-group-flush">
@@ -37,13 +40,6 @@
                                                 <div class="small text-muted mt-1">{{ cid.name }}</div>
                                                 <div class="small">Email: {{ cid.email }}</div>
                                             </div>
-                                            <div class="text-end small">
-                                                {% if cid.login_email_sent %}
-                                                    <span class="badge bg-success">Email sent</span>
-                                                {% else %}
-                                                    <span class="badge bg-secondary">Not sent</span>
-                                                {% endif %}
-                                            </div>
                                         </div>
                                     </li>
                                 {% endfor %}
@@ -59,6 +55,9 @@
                 <div class="card h-100">
                     <div class="card-body">
                         <h5 class="card-title">User candidates <small class="text-muted">({{ user_user_count }})</small></h5>
+                        <div class="mb-2">
+                            <input id="user-filter" class="form-control form-control-sm" placeholder="Filter User candidates by username or email">
+                        </div>
                         {% if user_users %}
                             <ul class="list-group list-group-flush">
                                 {% for user in user_users %}
@@ -148,6 +147,37 @@
                     }
                 }catch(e){ console.error(e); }
             });
+
+            // Filtering helpers
+            function normalizeText(s){ return (s||'').toString().toLowerCase(); }
+
+            function filterList(inputElem, listSelector){
+                const q = normalizeText(inputElem.value.trim());
+                document.querySelectorAll(listSelector).forEach(function(li){
+                    const text = normalizeText(li.textContent);
+                    if(!q || text.indexOf(q) !== -1){
+                        li.style.display = '';
+                    } else {
+                        li.style.display = 'none';
+                    }
+                });
+            }
+
+            const cidFilter = document.getElementById('cid-filter');
+            if(cidFilter){
+                cidFilter.addEventListener('input', function(){
+                    // target CID list items only (left column)
+                    filterList(cidFilter, '.col-lg-6:first-of-type .list-group-item');
+                });
+            }
+
+            const userFilter = document.getElementById('user-filter');
+            if(userFilter){
+                userFilter.addEventListener('input', function(){
+                    // target user list items only (right column)
+                    filterList(userFilter, '.col-lg-6:nth-of-type(2) .list-group-item, .col-lg-6:nth-of-type(2) .list-group-item.d-flex');
+                });
+            }
         });
     </script>
 {% endblock %}