<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="{{cid.pk}}" data-cid="{{cid.cid}}" data-name="{{cid.name|escape}}" data-email="{{cid.email|escape}}">
    <div class="me-2">
        <div class="d-flex align-items-center">
            <div class="fw-bold small mb-0">{{cid.cid}} <span class="text-muted">[{{cid.passcode}}]</span></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">{{cid.name}} &middot; {{cid.email}}</div>
    </div>
    <div class="d-flex align-items-center ms-2">
        {% if cid.notes %}
        <div class="small text-muted me-2">Notes: 
                <span class="cid-notes" title="{{ cid.notes|escape }}" data-bs-toggle="tooltip" data-bs-placement="top">{{ cid.notes|truncatechars:60 }}</span>
        </div>
        {% endif %}
        {% if cid.group and cid.group in exam.cid_user_groups.all %}
            <div class="small text-muted me-2"><span class="badge bg-info text-dark">{{ cid.group.name }}</span></div>
        {% endif %}
        <div class="btn-group">
            <a href="{% url 'generic:update_cid' cid.pk %}" class="btn btn-sm btn-outline-light">Edit</a>
            <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_cid_user" value="{{cid.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>
