<!--Nutzerliste-->
<div class="card coaching-overview-coaching-overview-user-list-box">
    <div class="box-header">
        <h4>Teilnehmende mit Coaching-Bedarf</h4>
    </div>
    <div class="box-body">
        {% if users|first.userID != "" %}
            <p>Aktuell gibt es {{ users| length }} Teilnehmende, denen ein Coach zugewiesen werden muss:</p>

            {% for user in users %}
                <div class="coaching-overview-user-list">
                    <div class="coaching-overview-user-list-header d-flex flex-row">
                        <div class="mr-auto d-flex flex-row align-items-center">
                            {% if users|length > 1 %}
                                <div class="form-check form-check-inline mr-2">
                                    <input class="form-check-input coaching-overview-user-coach-select" type="checkbox" id="coaching-overview-user-coach-select-{{ user.userID }}" value="{{ user.userID }}">
                                </div>
                            {% endif %}
                            <button type="button" class="btn btn-link ts-list-button p-0 m-0 text-nowrap" data-toggle="collapse" {%set rand = random()%} data-target="#demo_{{rand}}" aria-expanded="false">
                                <div class="ts-list-title-icon d-inline-block">
                                    <i class="fas fa-chevron-right"></i>
                                    <i class="fas fa-chevron-down"></i>
                                </div>
                                {{ user.displayName }}
                            </button>
                        </div>
                        <div class="text-right">
                            {% include "coaching-overview/coaching-overview-user2coach-modal.html" with {'coaches': coaches}%}
                            <a href="{{ detail_page_links[user.userID] }}" class="btn btn-secondary coach-coaching-overview-user-list-button mb-2">Detail-Seite</a>
                            <button type="button" class="btn btn-primary coach-selection-button mb-2" data-toggle="modal" data-target="#coachingOverviewUser2CoachModal{{ user.userID }}">Coach auswählen</button> 
                        </div>
                    </div>
                    <div id="demo_{{rand}}" class="collapse coaching-overview-user-list-info mt-2">
                        <ul class="font-size-small pl-4 hyphens-auto">
                            <li class="coaching-overview-user-list-info-element">
                                ID: {{user.userID}}
                            </li>
                            <li class="coaching-overview-user-list-info-element">
                                {%  if user.trainings | length == 1 %}
                                    Zu betreuendes Training:
                                {% else %}
                                    Zu betreuende Trainings:
                                {% endif %}
                                <ul class="font-size-small pl-4">
                                    {% for training in user.trainings %}
                                    <li>
                                        {{ training.trainingTitle}} ({%if training.coachingMode == 1%}E-Coaching bei Bedarf{%elseif training.coachingMode == 2 %}Umfassendes E-Coaching{% endif %})
                                    </li>
                                    {% endfor %}
                                </ul>                                
                            </li>
                        </ul>
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <div class="alert alert-info mb-0" role="alert">
                <h5><i aria-hidden="true" class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
               <p>
                Aktuell gibt es keine Teilnehmenden, denen ein Coach zugewiesen werden muss.
               </p> 
            </div>
        {%endif%}
    </div>
    {% if users|first.userID != "" and users|length > 1 %}
        <div class="box-footer bg-light border border-right-0 border-bottom-0 border-left-0">
            <button class="btn btn-secondary mr-2" type="button" id="coaching-overview-user-coach-select-all">Alle auswählen</button>
            <button class="btn btn-primary" type="button" disabled id="coaching-overview-user-coach-select-button">Mehrfachauswahl Coach</button>
        </div>
        {% include 'coaching-overview/coaching-overview-users2coach-modal.html' %}
    {% endif %}
</div>

