{% if users %}
    <div class="table-responsive">
        <table class="table table-hover table-striped align-middle border-secondary text-white">
            <thead class="table-dark">
                <tr>
                    <th>User</th>
                    <th>Grade</th>
                    <th>Email</th>
                    <th>Supervisor</th>
                    <th>Groups</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                    <tr>
                        <td>
                            <div class="fw-bold">
                                {{ user.first_name }} {{ user.last_name }}
                                <a href="{% url 'account_profile' user.username %}" class="text-info ms-1" title="View Profile">
                                    <i class="bi bi-person-bounding-box"></i>
                                </a>
                            </div>
                            <small class="text-muted">{{ user.username }}</small>
                        </td>
                        <td>
                            {% if user.userprofile.grade %}
                                <span class="badge bg-secondary">{{ user.userprofile.grade }}</span>
                            {% else %}
                                <span class="text-muted small">No grade</span>
                            {% endif %}
                        </td>
                        <td>
                            <small>{{ user.email|default:"—" }}</small>
                        </td>
                        <td>
                            {% if user.userprofile.supervisor %}
                                <div>
                                    {{ user.userprofile.supervisor }}
                                    <a href="{% url 'generic:supervisor_detail' user.userprofile.supervisor.pk %}" class="text-info ms-1" title="View Supervisor">
                                        <i class="bi bi-link-45deg"></i>
                                    </a>
                                </div>
                            {% else %}
                                <span class="text-muted small">—</span>
                            {% endif %}
                        </td>
                        <td>
                            {% for group in user.user_groups.all %}
                                <span class="badge bg-info text-dark me-1">{{ group.name }}</span>
                            {% empty %}
                                <span class="text-muted small">None</span>
                            {% endfor %}
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{% url 'account_update' user.username %}?redirect={{ request.path }}" class="btn btn-outline-light">Edit User</a>
                                <a href="{% url 'account_profile_update' user.username %}?redirect={{ request.path }}" class="btn btn-outline-info">Edit Profile</a>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="text-muted small mt-2">Showing up to 20 results for "{{ q }}".</div>
{% else %}
    <div class="alert alert-warning border-warning bg-dark text-warning my-2">
        <i class="bi bi-exclamation-triangle-fill me-2"></i>No users found matching "{{ q }}".
    </div>
{% endif %}