<h1 class="text-center mb-5">{{ heading }}</h1>

<p class="mx-4">
    {# Text für Helge.... #}
</p>
{% if trainings is not empty and allusers is not empty %}
<form id="studyExportForm">
    <div class="table-responsive">
        <table class="table table-hover table-striped table-bordered large-list">
            <thead>
                <tr>
                    <th scope="col">&nbsp;</th>
                    <th scope="col">Training</th>
                    <th scope="col">TS Form IDs:</th>
                    <th scope="col">&nbsp;</th>
                    <th scope="col">Lektion:</th>
                    <th scope="col">TS Form IDs:</th>
                </tr>
            </thead>
            <tbody>
                {% for training in trainings %}
                    <tr>
                        <td rowspan="{{ training.getLektionsliste()|length }}" class="align-middle">
                            <input type="checkbox" class="form-check-input position-relative studyexport-training-check m-0" style="margin-top: 0 !important;" value="{{ training.id }}" id="training-{{ training.id }}">
                        </td>
                        <td rowspan="{{ training.getLektionsliste()|length }}" class="align-middle">
                            <label for="training-{{ training.id }}" class="mb-0">{{ training.title }}</label>
                        </td>
                        <td rowspan="{{ training.getLektionsliste()|length }}" class="align-middle p-1"  style="width: 250px;">
                            <div class="form-group m-0 w-100">
                                <div class="input-group">
                                    <input class="form-control studyexport-training-search" data-trainingid="{{ training.id }}" type="text" id="studyexport-training-{{ training.id }}-search" value="" placeholder="Suche..." />
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary studyexport-training-clear-search-button" data-trainingid="{{ training.id }}" id="studyexport-training-{{ training.id }}-clear-search" type="button"><i class="fas fa-trash-alt"></i></button>
                                    </div>
                                </div>
                                <div id="studyexport-training-{{ training.id }}-check" class="card panel panel-default mb-0" style="height: 200px; overflow-y: auto; padding: 9px;">
                                    {% for tsformid, tsformtitle in allscalematrixforms %}
                                        <div class="form-group mb-1">
                                            <input class="form-check-input studyexport-training-{{ training.id }}-formselect m-0" type="checkbox" value="{{ tsformid }}" id="studyexport-training-{{ training.id }}-checkbox-{{ tsformid }}" {% if training.hasTsFormId(tsformid) %}checked{% endif %}>
                                            <label class="checkbox-inline mb-0" for="studyexport-training-{{ training.id }}-checkbox-{{ tsformid }}">
                                                {{ tsformtitle }}
                                            </label>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </td>
                        {% for lektion in training.getLektionsliste() %}
                            {% if not loop.first %}<tr>{% endif %}
                            <td class="align-middle">
                                <input type="checkbox" class="form-check-input position-relative studyexport-lektion-check m-0" style="margin-top: 0 !important;" value="{{ lektion.id }}" data-trainingid="{{ training.id }}" id="lektion-{{ training.id }}-{{ lektion.id }}">
                            </td>
                            <td class="align-middle">
                                <label for="lektion-{{ training.id }}-{{ lektion.id }}" class="mb-0">{{ lektion.title }}</label>
                            </td>
                            <td class="align-middle p-1" style="width: 250px;">
                                <div class="form-group m-0 w-100">
                                    <div class="input-group">
                                        <input class="form-control studyexport-lektion-search" type="text" data-trainingid="{{ training.id }}" data-lektionid="{{ lektion.id }}" id="studyexport-training-{{ training.id }}-lektion-{{ lektion.id }}-search" value="" placeholder="Suche..." />
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary studyexport-lektion-clear-search-button" data-trainingid="{{ training.id }}" data-lektionid="{{ lektion.id }}" id="studyexport-training-{{ training.id }}-{{ lektion.id }}-clear-search" type="button"><i class="fas fa-trash-alt"></i></button>
                                        </div>
                                    </div>
                                    <div id="studyexport-training-{{ training.id }}-lektion-{{ lektion.id }}-check" class="card panel panel-default mb-0" style="height: 50px; overflow-y: auto; padding: 9px;">
                                        {% for tsformid, tsformtitle in allscalematrixforms %}
                                            <div class="form-group mb-1">
                                                <input class="form-check-input studyexport-lektion-{{lektion.id}}-formselect m-0 mt-2" type="checkbox" value="{{ tsformid }}" id="studyexport-training-{{ training.id }}-lektion-{{ lektion.id }}-checkbox-{{ tsformid }}" {% if lektion.hasTsFormId(tsformid) %}checked{% endif %}>
                                                <label class="checkbox-inline mb-0" for="studyexport-training-{{ training.id }}-lektion-{{ lektion.id }}-checkbox-{{ tsformid }}">
                                                    {{ tsformtitle }}
                                                </label>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </td>
                            {% if not loop.last %}</tr>{% endif %}
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="form-group m-0 w-100 mt-2">
        <label class="ml-0">Nur Daten von folgenden Benutzern exportieren:</label><br>
        <small>Mit einem Klick auf <i class="fas fa-user-plus"></i> werden alle sichtbaren Benutzer ausgewählt, mit einem Klick auf <i class="fas fa-user-minus"></i> werden alle sichtbaren Benutzer abgewählt. Dies kann in Verbindung mit der Suchfunktion geschehen.</small><br>
        <div class="input-group mt-3">
            <div class="input-group-prepend">
                <button class="btn btn-outline-secondary studyexport-users-select-button" id="studyexport-users-select-button" type="button" title="Alle sichtbaren Benutzer auswählen"><i class="fas fa-user-plus"></i></button>
                <button class="btn btn-outline-secondary studyexport-users-remove-button" id="studyexport-users-remove-button" type="button" title="Alle sichtbaren Benutzer abwählen"><i class="fas fa-user-minus"></i></button>
            </div>
            <input class="form-control studyexport-users-search" type="text" id="studyexport-users-search" value="" placeholder="Suche..." />
            <div class="input-group-append">
                <button class="btn btn-outline-secondary studyexport-users-clear-search-button" id="studyexport-users-clear-search-button" type="button"><i class="fas fa-trash-alt"></i></button>
            </div>
        </div>
        <div id="studyexport-users-check" class="card panel panel-default mb-0" style="height: 350px; overflow-y: auto; padding: 9px;">
            {% for user in allusers %}
                <div class="form-group mb-1">
                    <input class="form-check-input studyexport-users-formselect m-0 mt-2" type="checkbox" value="{{ user.id }}" id="studyexport-users-user-{{ user.id }}-checkbox">
                    <label class="checkbox-inline mb-0" for="studyexport-users-user-{{ user.id }}-checkbox">
                        {{ user.name }}{% if user.studienid is not empty %} ({{ user.studienid }}){% endif %}
                    </label>
                </div>
            {% endfor %}
        </div>
    </div>
    <div class="alert alert-danger mt-4 mb-0 d-none" role="alert" id="studyExportError">
        <h5><i class="fas fa-times-circle"></i>&nbsp;Fehler</h5>
        <p class="mb-0">
            Es ist ein Fehler beim Exportieren der Datei aufgetreten.<br>
            Ist mindestene ein Training/ eine Lektion und mindestens ein Benutzer ausgewählt?<br>
            Ansonsten kann es sein, dass die Skalen in den Formularen eine unterschiedliche Anzahl an Antwortmöglichkeiten haben.
        </p>
    </div>
    <button class="btn btn-primary mt-4 mb-4" id="studyExportButton">
        Exportieren
    </button>
</form>
{% include 'study-export/study-export-loading-modal.html' %}
{% else %}
    {% if trainings is empty %}
        <br>
        <div class="alert alert-info" role="alert">
            <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
            <p>
                Es gibt noch keine Trainings auf der Plattform.
            </p>
        </div>
    {% endif %}
    {% if allusers is empty %}
        <br>
        <div class="alert alert-info" role="alert">
            <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
            <p>
                Es existieren noch keine Benutzer auf der Plattform.
            </p>            
        </div>
    {% endif %}
{% endif %}