<div class="wrapper-admin-backend">
    <div class="container-fluid mt-5">
        <div class="row">
            <div class="col-12">
                <h1 class="">Zukünftige Trainingszuweisungen</h1>
                <ul class="nav nav-tabs mt-4" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="date-tab" data-toggle="tab" data-target="#dataTab"
                            type="button" role="tab" aria-controls="dataTab" aria-selected="true">Zeitlich zugewiesene
                            Trainings</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="dependent-tab" data-toggle="tab" data-target="#dependentTab"
                            type="button" role="tab" aria-controls="dependentTab" aria-selected="false">Abhängige
                            Trainings</button>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade show active p-3 bg-white" id="dataTab" role="tabpanel"
                        aria-labelledby="date-tab">
                        <div class="row">
                            <div class="col-12 col-md-6 mb-3">
                                <div class="alert alert-info d-inline-block mb-0" role="alert">
                                    <h5 class="mb-1"><i class="fa fa-info-circle"></i> Zeitlich zugewiesene Trainings
                                    </h5>
                                    <p class="mb-0">
                                        Sehen Sie hier alle Trainings die den Nutzenden zu einem bestimmten Zeitpunkt
                                        zugewiesen werden.<br>
                                        Für jedes Training haben Sie die Möglichkeit dieses Training sofort
                                        zuzuweisen.<br>
                                    </p>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 mb-3 text-right d-flex align-items-end justify-content-end">
                                <p class="mb-0">
                                    Außerdem gibt es die Möglichkeit des manuellen Anstoßens der Terminzuweisung, falls
                                    Trainingszuweisungen überfällig sind.<br>
                                    <button class="btn btn-outline-secondary mt-2" id="adminBackendAssignTrainingsDate"
                                        type="button"><i class="fa fa-redo"></i></button>
                                </p>
                            </div>
                            <div class="col-12">
                                {% if dateTrainings|length > 0 %}
                                <div class="table-responsive mt-3">
                                    <table class="table table-striped table-bordered table-hover mb-0">
                                        <thead>
                                            <th scope="col" class="align-middle">User</th>
                                            <th scope="col" class="align-middle">Training</th>
                                            <th scope="col" class="align-middle">Training-Modus</th>
                                            <th scope="col" class="align-middle">E-Coaching</th>
                                            <th scope="col" class="align-middle">Zeitpunkt</th>
                                            <th scope="col" class="align-middle">Weiterleitung nach Login</th>
                                            <th scope="col"></th>
                                        </thead>
                                        <tbody>
                                            {% set userTrainingDateFound = false %}
                                            {% for dateTraining in dateTrainings %}
                                                {% if not allUsers[dateTraining.userId].isVorlagennutzer() %}
                                                    {% set userTrainingDateFound = true %}
                                                    {% include 'admin-backend/admin-backend-future-trainings-datetraining.html'
                                                    with {'vorlagennutzer': false } %}
                                                {% endif %}
                                            {% endfor %}
                                            {% set vorlagenuserTrainingDateFound = false %}
                                            {% for dateTraining in dateTrainings %}
                                                {% if allUsers[dateTraining.userId].isVorlagennutzer() %}
                                                    {% set vorlagenuserTrainingDateFound = true %}
                                                {% endif %}
                                            {% endfor %}
                                            {% if userTrainingDateFound and vorlagenuserTrainingDateFound %}
                                                <tr>
                                                    <td colspan="7" class="p-0 pb-1 m-0 bg-secondary"></td>
                                                </tr>
                                            {% endif %}
                                            {% for dateTraining in dateTrainings %}
                                                {% if allUsers[dateTraining.userId].isVorlagennutzer() %}
                                                    {% include 'admin-backend/admin-backend-future-trainings-datetraining.html'
                                                    with {'vorlagennutzer': true } %}
                                                {% endif %}
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                                {% else %}
                                <div class="alert alert-info" role="alert">
                                    <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
                                    <p>
                                        Es gibt momentan keine zeitlich zuzgewiesenen Trainings.
                                    </p>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade p-3 bg-white" id="dependentTab" role="tabpanel"
                        aria-labelledby="dependent-tab">
                        <div class="col-12">
                            <div class="alert alert-info d-inline-block" role="alert">
                                <h5 class="mb-1"><i class="fa fa-info-circle"></i> Abhängige Trainings</h5>
                                <p class="mb-0">
                                    Sie sehen hier alle Trainings, die Nutzenden in der Zukunft abhängig vom Fortschritt
                                    eines anderen Trainings zugewiesen werden.
                                </p>
                            </div>
                        </div>
                        <div class="col-12">
                            {% if depTrainings|length > 0 %}
                            <div class="table-responsive mt-3">
                                <table class="table table-striped table-bordered table-hover mb-0">
                                    <thead>
                                        <th scope="col" class="align-middle">User</th>
                                        <th scope="col" class="align-middle">Training</th>
                                        <th scope="col" class="align-middle">Training-Modus</th>
                                        <th scope="col" class="align-middle">E-Coaching</th>
                                        <th scope="col" class="align-middle">Zuweisung</th>
                                        <th scope="col" class="align-middle">Abhängige Training(s)</th>
                                        <th scope="col" class="align-middle">Bedingung</th>
                                        <th scope="col" class="align-middle">Weiterleitung nach Login</th>
                                    </thead>
                                    <tbody>
                                        {% set userTrainingDepFound = false %}
                                        {% for depTraining in depTrainings %}
                                            {% if not allUsers[depTraining.userId].isVorlagennutzer() %}
                                                {% set userTrainingDepFound = true %}
                                                {% include 'admin-backend/admin-backend-future-trainings-deptraining.html'
                                                with {'vorlagennutzer': false } %}
                                            {% endif %}
                                        {% endfor %}
                                        {% set vorlagenUserTrainingDepFound = false %}
                                        {% for depTraining in depTrainings %}
                                            {% if allUsers[depTraining.userId].isVorlagennutzer() %}
                                                {% set vorlagenUserTrainingDepFound = true %}
                                            {% endif %}
                                        {% endfor %}
                                        {% if userTrainingDepFound and vorlagenUserTrainingDepFound %}
                                            <tr>
                                                <td colspan="8" class="p-0 pb-1 m-0 bg-secondary"></td>
                                            </tr>
                                        {% endif %}
                                        {% for depTraining in depTrainings %}
                                            {% if allUsers[depTraining.userId].isVorlagennutzer() %}
                                                {% include 'admin-backend/admin-backend-future-trainings-deptraining.html'
                                                with {'vorlagennutzer': true } %}
                                            {% endif %}
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            {% else %}
                            <div class="alert alert-info" role="alert">
                                <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
                                <p>
                                    Es gibt momentan keine zeitlich zuzgewiesenen Trainings.
                                </p>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    jQuery('[data-toggle="tooltip"]').tooltip({ container: '.wrapper-admin-backend' });
</script>