<li class="list-group-item d-flex justify-content-between align-items-center {% if current %}current{% endif %} py-1 px-2 bg-transparent border-secondary" data-pk="{{ user.pk }}" data-username="{{ user.username }}" data-name="{{ user.get_full_name|default:user.username|escape }}" data-email="{{ user.email|escape }}">
    <div class="me-2">
        <div class="d-flex align-items-center">
            <div class="fw-bold small mb-0">{{ user.username }}</div>
            <span class="badge {% if current %}bg-success{% else %}bg-secondary text-dark{% endif %} ms-2 small">{% if current %}Added{% else %}Not added{% endif %}</span>
        </div>
        <div class="small text-muted">{{ user.get_full_name|default:user.username }} &middot; {{ user.email }}</div>
    </div>
    <div class="d-flex align-items-center ms-2">
        {% comment %} show any exam user-groups this user belongs to as badges {% endcomment %}
        <div class="me-2">
            {% for g in exam.user_user_groups.all %}
                {% if user in g.users.all %}
                    <span class="badge bg-info text-dark me-1">{{ g.name }}</span>
                {% endif %}
            {% endfor %}
        </div>
        <div class="btn-group">
            {% if request.user.is_superuser %}
                <a href='{% url "account_profile" user.username %}' class="btn btn-sm btn-outline-light">Profile</a>
            {% endif %}
            <form method="post" class="d-inline m-0 p-0"
                  action="{% url exam.app_name|add:':exam_json_edit' exam.pk %}"
                  hx-post="{% url exam.app_name|add:':exam_json_edit' exam.pk %}"
                  hx-target="closest li"
                  hx-swap="outerHTML">
                {% csrf_token %}
                <input type="hidden" name="edit_user_user" value="{{ user.pk }}">
                <input type="hidden" name="add" value="{% if current %}false{% else %}true{% endif %}">
                <button type="submit" class="btn btn-sm btn-outline-light toggle-btn">Toggle</button>
            </form>
        </div>
    </div>
</li>
