.

generic/templates/generic/examcollection_base.html

@@ -6,7 +6,7 @@
 {% endblock %}
 
 {% block navigation %}
-<nav class="navbar navbar-expand-lg navbar-dark submenu mb-3">
+        <nav class="navbar navbar-expand-lg navbar-dark submenu mb-3">
                 <div class="container-fluid">
                         <a class="navbar-brand" href="{% url 'generic:examcollection_list' %}">Collections</a>
                         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#examCollectionNavbar" aria-controls="examCollectionNavbar" aria-expanded="false" aria-label="Toggle navigation">
@@ -25,6 +25,6 @@
                                 </ul>
                         </div>
                 </div>
-</nav>
+        </nav>
 
 {% endblock %}

generic/templates/generic/examcollection_form.html

@@ -18,9 +18,84 @@
 
 
 <h2>Edit Exam Collection {{object.name}}</h2>
-<form action="" method="post" enctype="multipart/form-data" id="examcollection-form">
+<div class="card mb-4">
+    <div class="card-body">
+        <h2 class="card-title">Edit Exam Collection <small class="text-muted">{{ object.name }}</small></h2>
+
+        <form action="" method="post" enctype="multipart/form-data" id="examcollection-form" class="needs-validation" novalidate>
             {% csrf_token %}
+            {% if form.non_field_errors %}
+                <div class="alert alert-danger">{{ form.non_field_errors }}</div>
+            {% endif %}
+
+            <style>
+                /* Improve visual separation of form sections for this collection form */
+                #examcollection-form .mb-3 {
+                    padding: .75rem 1rem;
+                    margin-bottom: 1rem;
+                    border-radius: .375rem;
+                    background: rgba(255,255,255,0.02);
+                    border-left: 3px solid rgba(255,255,255,0.03);
+                }
+                #examcollection-form .mb-3:nth-child(odd) {
+                    background: rgba(255,255,255,0.015);
+                }
+                #examcollection-form .form-section-divider {
+                    height: 1px;
+                    background: rgba(255,255,255,0.04);
+                    margin: .5rem 0 1rem 0;
+                    border-radius: 2px;
+                }
+                #examcollection-form .form-section-title {
+                    font-size: .95rem;
+                    margin-bottom: .5rem;
+                    font-weight: 600;
+                    color: var(--bs-light);
+                }
+            </style>
+
+            <div class="mb-3">
                 {{ form|crispy }}
-    <input type="submit" class="submit-button" value="Submit" name="submit">
+            </div>
-</form>
+
+            <script>
+                // Insert subtle dividers between logical groups (.mb-3 blocks)
+                (function(){
+                    var form = document.getElementById('examcollection-form');
+                    if (!form) return;
+                    // find direct .mb-3 children inside the form
+                    var groups = Array.from(form.querySelectorAll(':scope > .mb-3'));
+                    if (groups.length <= 1) return;
+                    for (var i = 1; i < groups.length; i++) {
+                        var divider = document.createElement('div');
+                        divider.className = 'form-section-divider';
+                        groups[i].parentNode.insertBefore(divider, groups[i]);
+                    }
+                })();
+            </script>
+
+            <div class="d-flex gap-2">
+                <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1" aria-hidden="true"></i> Save</button>
+                <a href="{% url 'generic:examcollection_list' %}" class="btn btn-outline-secondary"><i class="bi bi-arrow-left me-1" aria-hidden="true"></i> Back to collections</a>
+                <button type="reset" class="btn btn-light">Reset</button>
+            </div>
+        </form>
+    </div>
+</div>
+<script>
+    // Simple client-side bootstrap validation
+    (function () {
+        'use strict'
+        var forms = document.querySelectorAll('.needs-validation')
+        Array.prototype.slice.call(forms).forEach(function (form) {
+            form.addEventListener('submit', function (event) {
+                if (!form.checkValidity()) {
+                    event.preventDefault()
+                    event.stopPropagation()
+                }
+                form.classList.add('was-validated')
+            }, false)
+        })
+    })()
+</script>
 {% endblock %}

generic/templates/generic/partials/user_search_widget_results.html

@@ -5,7 +5,7 @@
         <div class="flex-grow-1">
           {{ item.text|escape }}
           {% if item.grade %}
-            <small class="text-muted ms-2">{{ item.grade|escape }}</small>
+            <span class="badge bg-secondary ms-2">{{ item.grade|escape }}</span>
           {% endif %}
         </div>
         <div>

generic/widgets.py

@@ -43,13 +43,19 @@ class UserSearchSelectMultipleWidget:
             except Exception:
                 grade_text = ""
 
+            # Build the selected item HTML incrementally to avoid accidental
+            # mixing of boolean values into string concatenation (was causing
+            # a TypeError in some environments).
             selected_html += (
                 f'<li id="selected_user_{self.name}_{u.pk}" class="list-group-item d-flex justify-content-between align-items-center">'
                 f'<span>{u.get_full_name() or u.username} <small class="text-muted">{u.email}</small>'
-                + (f' <small class="text-muted ms-2">{grade_text}</small>' if grade_text else '')
+            )
-                + '</span>'
+            if grade_text:
+                selected_html += f' <span class="badge bg-secondary ms-2">{grade_text}</span>'
+            selected_html += (
+                '</span>'
                 f'<button type="button" class="btn btn-sm btn-outline-danger ms-2" onclick="removeUserFromField(\'{self.name}\', {u.pk})">Remove</button>'
-                f'</li>'
+                '</li>'
             )
 
         url = reverse("generic:user_search_widget")
@@ -194,7 +200,7 @@ class UserSearchSelectMultipleWidget:
                         li.className = 'list-group-item d-flex justify-content-between align-items-center';
                         li.id = 'selected_user_' + fieldName + '_' + id;
                         const span = document.createElement('span');
-                        span.innerHTML = text + (grade ? ' <small class="text-muted ms-2">' + grade + '</small>' : '');
+                        span.innerHTML = text + (grade ? ' <span class="badge bg-secondary ms-2">' + grade + '</span>' : '');
                         const btn = document.createElement('button'); btn.type = 'button'; btn.className = 'btn btn-sm btn-outline-danger ms-2'; btn.innerText = 'Remove';
                         btn.addEventListener('click', function() {{ removeUserFromField(fieldName, id); }});
                         li.appendChild(span); li.appendChild(btn);