<div class="col-12">
    <div class="accordion" id="progressCompanyAccordion">
        <div class="card user-detail-box">
            <div class="box-header" id="progressCompanyHeading">
                    <button class="btn btn-link p-0" type="button" data-toggle="collapse" data-target="#progressCompanyCollapse"
                            aria-expanded="true" aria-controls="progressCompanyCollapse">
                            <h4><i aria-hidden="true" class="fas fa-plus ts-accordion-plus"></i>Fortschritte</h4>
                    </button>
            </div>
            <div class="box-body show" id="progressCompanyCollapse" aria-labelledby="progressCompanyHeading" data-parent="#progressCompanyAccordion">
                {% if allmembers|length > 0 %}
                <div class="table-responsive">
                    <table class="table table table-bordered table-hover table-striped mb-0">
                        <caption class="sr-only">Fortschritte</caption>
                        <thead>
                            <tr>
                                <th scope="col" class="align-middle">ID</th>
                                <th scope="col" class="align-middle">Studien-TN-ID</th>
                                {% if canSeeUsername %}
                                <th scope="col" class="align-middle">User-Name</th>
                                {% endif %}
                                <th scope="col" class="align-middle">Zugewiesene Trainings</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for member in allmembers %}
                                <tr>
                                    <td class="align-middle">{% if not canSeeUsername %}{% if showUserDetails %}<a href="{{ member_detail_links[member.id] }}" title="Zur Detail-Seite">{% endif %}{% endif %}{{member.id}}{% if not canSeeUsername %}{% if showUserDetails %}</a>{% endif %}{% endif %}</td>
                                    <td  class="align-middle">{% if member.studienid is empty %}-{% else %}{{ member.studienid }}{% endif %}</td>
                                    {% if canSeeUsername %}
                                    <td class="align-middle">{% if showUserDetails %}<a href="{{ member_detail_links[member.id] }}" title="Zur Detail-Seite">{% endif %}{{ member.name }}{% if showUserDetails %}</a>{% endif %}</td>
                                    {% endif %}
                                    <td class="align-middle">
                                        {% for training in member.trainings %}
                                            {% if userCanSeeTrainingsProgress %}
                                                <span class="badge border-rounded border {% if training.getFin() == 0 %}text-danger{% elseif training.getFin() == 100 %}text-success{% else %}highlight-color{% endif %}">
                                                    {% if training.getFin() == 0 %}<i aria-hidden="true" class="fas fa-times"></i>{% elseif training.getFin() == 100 %}<i aria-hidden="true" class="fas fa-check"></i>{% endif %}
                                                    {{ training.title }}: {{ training.getFin()|round(0) }}&nbsp;%
                                                </span>
                                            {% else %}
                                                <span class="badge border-rounded border">
                                                    {{ training.title }}
                                                </span>
                                            {% endif %}
                                        {% else %}
                                            <i>keine Trainings zugewiesen</i>
                                        {% endfor %}
                                    </td>
                                </tr>
                            {% endfor %}                            
                        </tbody>
                    </table>
                </div>
                {% 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>
                            Es wurden noch keine Teilnehmenden zugewiesen.
                        </p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>