Implement user search functionality and enhance supervisor management UI

templates/people.html

@@ -13,6 +13,31 @@ Trainees can be viewed <a href='{% url "trainees" %}'>here</a> (
     {% endfor %}
     )
 
+<div class="card border-secondary bg-dark text-white mb-4 mt-3">
+    <div class="card-body">
+        <h4 class="card-title mb-3"><i class="bi bi-search me-2"></i>Quick User Search</h4>
+        <div class="row align-items-center g-2">
+            <div class="col-12 col-md-8">
+                <div class="input-group">
+                    <span class="input-group-text bg-secondary border-secondary text-white"><i class="bi bi-search"></i></span>
+                    <input type="search"
+                           name="q"
+                           class="form-control bg-dark text-white border-secondary"
+                           placeholder="Search users by name, email, or username..."
+                           hx-get="{% url 'people' %}"
+                           hx-trigger="input delay:300ms, search"
+                           hx-target="#search-results"
+                           hx-indicator="#search-indicator">
+                </div>
+            </div>
+            <div class="col-auto">
+                <span id="search-indicator" class="spinner-border spinner-border-sm text-light htmx-indicator" role="status" aria-hidden="true"></span>
+            </div>
+        </div>
+        <div id="search-results" class="mt-3"></div>
+    </div>
+</div>
+
 <h2>People</h2>
 <p>The system contains a number of different people / groups. This affects how they are managed and what they are able to do.</p>
 <p>They can be managed using the navigation links above</p>