<!--Coach-Liste-->
<div class="card coaching-overview-coach-list-box">
    <div class="box-header">
        <h4>Coaches</h4>
    </div>
    <div class="box-body">
        {% if coaches | first.coachID != "" %}
        <div class="coach-header">
            Anzahl betreute Teilnehmende
        </div>
        <div class="coach-body">
            {% for coach in coaches %}
            <div class="coach-list d-flex w-100">
                <div class="mr-auto">
                    <button type="button" class="btn btn-link ts-list-button" 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>
                        {{ coach.coachDisplayName }}
                    </button> 
                </div>
                <div class="coach-list-user-number">
                    {{ coach.users | length}}
                </div>
            </div>
                <div id="demo_{{rand}}" class="collapse coach-list-users">
                    {% if coach.users | first != "" %}
                        <ul class="font-size-small pl-4">
                        {%for user in coach.users%}
                            <li class="coach-list-user-name">
                                <span><a href="{{ detail_page_links[user.userID] }}">{{user.userDisplayName}} (ID: {{user.userID}})</a></span>
                            </li>
                        {% endfor %}
                        </ul>
                    {% else %}
                    <span class="coach-list-no-users">Dieser Coach betreut aktuell keine Teilnehmenden.</span>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="alert alert-info" role="alert">
            <h5><i aria-hidden="true" class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
            <p>
                Aktuell sind keine Coaches für eine Zuweisung verfügbar.
            </p>
        </div>
       
        {% endif %}
    </div>
    <div class="box-footer"></div>
</div>