{% if results %}
    <div class="card border-secondary bg-light">
        <div class="card-body p-2">
            <small class="text-muted d-block mb-2">{{ results|length }} result{{ results|pluralize }}</small>
            <ul class="list-group list-group-sm">
                {% for user in results %}
                    <li class="list-group-item d-flex justify-content-between align-items-center py-2">
                        <div>
                            <div class="small fw-semibold">{{ user.get_full_name|default:user.username }}</div>
                            <div class="text-muted" style="font-size: 0.85rem;">{{ user.email|default:"no email" }}</div>
                        </div>
                        <form method="post" action="{% url 'generic:supervisor_trainee_add' supervisor.pk user.pk %}" style="display:inline;">
                            {% csrf_token %}
                            <button type="submit"
                                    class="btn btn-sm btn-outline-success"
                                    hx-post="{% url 'generic:supervisor_trainee_add' supervisor.pk user.pk %}"
                                    hx-target="#trainees-list-content"
                                    hx-swap="outerHTML">
                                Add
                            </button>
                        </form>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
{% endif %}