<div class="modal fade overflow-auto" id="backendSettingsDemoUserModal" tabindex="-1" role="dialog"
    aria-labelledby="backendSettingsDemoUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content ">
            <div class="modal-header">
                <h3 class="modal-title" id="backendSettingsDemoUserModalLabel">Demo-User</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="accordion" id="backendSettingsDemoUserModalAccordion">
                    <div class="card m-0 p-0 mw-100">
                        <div class="card-header p-2" id="backendSettingsDemoUserDemoHeading">
                            <h6 class="mb-0">
                                <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse"
                                    data-target="#backendSettingsDemoUserDemoArea" aria-expanded="true"
                                    aria-controls="backendSettingsDemoUserDemoArea">
                                    <i class="fas fa-chevron-right ts-accordion-chevron"></i>
                                    Demo-User
                                </button>
                            </h6>
                        </div>
                        <div id="backendSettingsDemoUserDemoArea" class="collapse show"
                            aria-labelledby="backendSettingsDemoUserDemoHeading"
                            data-parent="#backendSettingsDemoUserModalAccordion">
                            <div class="card-body p-0">
                                {% if demoUser.demoUser is not empty %}
                                    <div class="table-responsive">
                                        <table class="table table-striped table-hover table-bordered mb-0">
                                            <thead>
                                                <tr>
                                                    <th class="align-middle" scope="col">Temp. Name</th>
                                                    <th class="align-middle" scope="col">Training(s) inkl. Fortschritt</th>
                                                    <th class="align-middle" scope="col">Registrierungsdatum</th>
                                            </thead>
                                            <tbody>
                                                {% for user in demoUser.demoUser %}
                                                    <tr>
                                                        <td class="align-middle">{{ user.name }}</td>
                                                        <td class="align-middle">
                                                            {% for training in user.getTrainings() %}
                                                                {{ training.getTitle }} ({{ training.getFin() }} %){% if not loop.last %},{% endif %} 
                                                            {% else %}
                                                                -
                                                            {% endfor %}
                                                        </td>
                                                        <td class="align-middle">{{ user.lastlogin|date('d.m.Y H:i') }} Uhr</td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                {% else %}
                                    <div class="alert alert-info mb-0" role="alert">
                                        <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
                                        <p>
                                            Es gibt momentan keine Demo-User im System.
                                        </p>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="card m-0 p-0 mw-100">
                        <div class="card-header p-2" id="backendSettingsDemoUserRegisteredHeading">
                            <h6 class="mb-0">
                                <button class="btn btn-link btn-block text-left collapsed" type="button"
                                    data-toggle="collapse" data-target="#backendSettingsDemoUserRegisteredArea"
                                    aria-expanded="false" aria-controls="backendSettingsDemoUserRegisteredArea">
                                    <i class="fas fa-chevron-right ts-accordion-chevron"></i>
                                    Registrierte, aber noch nicht E-Mail verifizierte Demo-User
                                </button>
                            </h6>
                        </div>
                        <div id="backendSettingsDemoUserRegisteredArea" class="collapse"
                            aria-labelledby="backendSettingsDemoUserRegisteredHeading"
                            data-parent="#backendSettingsDemoUserModalAccordion">
                            <div class="card-body p-0">
                                {% if demoUser.registeredUser is not empty %}
                                    <div class="table-responsive">
                                        <table class="table table-striped table-hover table-bordered mb-0">
                                            <thead>
                                                <tr>
                                                    <th class="align-middle" scope="col">User-Name</th>
                                                    <th class="align-middle" scope="col">E-Mail</th>{# If moving to front-end: take care of settings.hide_mails #}
                                                    <th class="align-middle" scope="col">Training(s) inkl. Fortschritt</th>
                                                    <th class="align-middle" scope="col">Registrierungsdatum</th>
                                            </thead>
                                            <tbody>
                                                {% for user in demoUser.registeredUser %}
                                                    <tr>
                                                        <td class="align-middle">{{ user.name }}</td>
                                                        <td class="align-middle">{{ user.mail }}</td>
                                                        <td class="align-middle">
                                                            {% for training in user.getTrainings() %}
                                                                {{ training.getTitle }} ({{ training.getFin() }} %){% if not loop.last %},{% endif %} 
                                                            {% else %}
                                                                -
                                                            {% endfor %}
                                                        </td>
                                                        <td class="align-middle">{{ user.lastlogin|date('d.m.Y H:i') }} Uhr</td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                {% else %}
                                    <div class="alert alert-info mb-0" role="alert">
                                        <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
                                        <p>
                                            Es gibt momentan keine Demo-User im System, die das Formular auf Übernahme des Accounts ausgefüllt haben, aber die E-Mail-Adresse noch nicht bestätigt haben.
                                        </p>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>