<h1 class="text-center mb-5">{{heading}}</h1>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h2 class="d-flex jusitfy-content-center mb-0">
                    <span class="badge badge-secondary">1</span>&nbsp;Datenquelle
                </h2>
            </div>
            <div class="card-body">
                <ul class="list-group">
                    <li class="list-group-item">
                        <div class="form-check pl-0 mb-0 d-flex align-items-center flex-row">
                            <input type="checkbox" class="form-check-input position-relative m-0" id="tsFormsSource" style="margin-top: 0 !important;">
                            <label class="form-check-label ml-2 m-0" for="tsFormsSource">TS Forms<small class="ml-3">(einfache Speicherung)</small></label>
                            <button type="button" class="btn btn-outline-secondary ml-auto" id="tsFormsSourceModalButton" data-toggle="tooltip" title="Hilfe für die Datenquelle TS Forms (einfache Speicherung)">
                                <i class="fas fa-question-circle"></i>
                            </button>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="form-check pl-0 mb-0 d-flex align-items-center flex-row">
                            <input type="checkbox" class="form-check-input position-relative m-0" id="tsFormsMultiSource" style="margin-top: 0 !important;">
                            <label class="form-check-label ml-2 m-0" for="tsFormsMultiSource">TS Forms<small class="ml-3">(mehrfache Speicherung)</small></label>
                            <button type="button" class="btn btn-outline-secondary ml-auto" id="tsFormsMultiSourceModalButton" data-toggle="tooltip" title="Hilfe für die Datenquelle TS Forms (mehrfache Speicherung)">
                                <i class="fas fa-question-circle"></i>
                            </button>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="form-check pl-0 mb-0 d-flex align-items-center flex-row">
                            <input type="checkbox" class="form-check-input position-relative m-0" id="systemstatisticSource" style="margin-top: 0 !important;">
                            <label class="form-check-label ml-2 m-0" for="systemstatisticSource">Systemstatistiken</label>
                            <button type="button" class="btn btn-outline-secondary ml-auto" id="systemstatisticSourceModalButton" data-toggle="tooltip" title="Hilfe für die Datenquelle Systemstatistiken">
                                <i class="fas fa-question-circle"></i>
                            </button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h2 class="d-flex jusitfy-content-center mb-0">
                    <span class="badge badge-secondary">2</span>&nbsp;Daten
                </h2>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12" id="dataNoSource">
                        <div class="alert alert-info mb-0" role="alert">
                            <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
                            <p class="mb-0">Bitte wählen Sie mindestens eine Datenquelle.</p>
                        </div>
                    </div>
                    <div class="col-12 dataexport-data-element d-none" id="tsformsDataContainer">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="m-0">TS Forms<br><small>(einfache Speicherung)</small></h4>
                            </div>
                            <div class="card-body">
                                {% include 'data-export/data-export-data-tsforms.html' %}
                            </div>
                        </div>
                    </div>
                    <div class="col-12 dataexport-data-element d-none" id="tsformsMultiDataContainer">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="m-0">TS Forms<br><small>(mehrfache Speicherung)</small></h4>
                            </div>
                            <div class="card-body">
                                {% include 'data-export/data-export-data-tsforms-multi.html' %}
                            </div>
                        </div>
                    </div>
                    <div class="col-12 dataexport-data-element d-none" id="systemstatisticDataContainer">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="m-0">Systemstatistiken</h4>
                            </div>
                            <div class="card-body">
                                {% include 'data-export/data-export-data-systemstatistics.html' %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h2 class="d-flex jusitfy-content-center mb-0">
                    <span class="badge badge-secondary">3</span>&nbsp;Nutzer
                </h2>
            </div>
            <div class="card-body">
                <div class="form-group m-0 w-100">
                    <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 Such- und Filterfunktion geschehen.</small><br>
                    <div class="form-group mt-2 mb-0">
                        <label class="ml-0">Nach Registrierungsdatum filtern:</label>
                    </div>
                    <div class="form-row">
                        <div class="input-group col-12 col-sm-6">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fas fa-calendar"></i>&nbsp;Start</span>
                            </div>
                            <input id="dataexport-startDate" class="form-control dataexport-date-field" type="date" min="{{ firstregisterdate }}" max="{{ today }}" data-default="{{ firstregisterdate }}" value="{{ firstregisterdate }}">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary dataexport-date-reset" type="button" data-toggle="tooltip" title="Start-Datum zurücksetzen"><i class="fas fa-undo-alt"></i></button>
                            </div>
                        </div>
                        <div class="input-group col-12 col-sm-6 mt-3 mt-sm-0">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fas fa-calendar"></i>&nbsp;Ende</span>
                            </div>
                            <input id="dataexport-endDate" class="form-control dataexport-date-field" type="date" min="{{ firstregisterdate }}" max="{{ today }}" data-default="{{ today }}" value="{{ today }}">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary dataexport-date-reset" type="button" data-toggle="tooltip" title="End-Datum zurücksetzen"><i class="fas fa-undo-alt"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mt-4 mb-0">
                        <label class="ml-0">Nach Namen{% if not hideMails %}, E-Mail-Adressen{% endif %}, Studien-Teilnehmer-ID, Studiengruppen-ID oder {{ global_company_name }} filtern:</label>
                    </div>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <button class="btn btn-outline-secondary dataexport-users-select-button" id="dataexport-users-select-button" type="button" data-toggle="tooltip" title="Alle sichtbaren Benutzer auswählen"><i class="fas fa-user-plus"></i></button>
                            <button class="btn btn-outline-secondary dataexport-users-remove-button" id="dataexport-users-remove-button" type="button" data-toggle="tooltip" title="Alle sichtbaren Benutzer abwählen"><i class="fas fa-user-minus"></i></button>
                        </div>
                        <input class="form-control dataexport-users-search" type="text" id="dataexport-users-search" value="" placeholder="Suche..." />
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary dataexport-users-clear-search-button" id="dataexport-users-clear-search-button" type="button" data-toggle="tooltip" title="Suche zurücksetzen"><i class="fas fa-trash-alt"></i></button>
                        </div>
                    </div>
                    <ul id="dataexport-users-check" class="card list-group list-group-flush panel panel-default mb-0" style="height: 350px; overflow-y: auto;margin-top: -1px;">
                        {% for user in allusers %}
                            <li class="list-group-item form-group py-1 m-0 d-flex align-items-center dataexport-users-item">
                                <input class="form-check-input position-relative dataexport-users-formselect m-0 mt-2" type="checkbox" value="{{ user.ID }}" 
                                data-userid="{{user.ID}}" data-usermail="{% if not hideMails %}{{user.user_email}}{% endif %}" data-registerdate="{{ user.user_registered|date('Y-m-d') }}" 
                                data-studienid="{{user.studienid}}" data-username="{{user.display_name}}" " id="dataexport-users-user-{{ user.ID }}-checkbox" style="margin-top: 0 !important;">
                                <label class="checkbox-inline ml-2 mb-0 d-flex align-items-stretch flex-sm-row flex-column justify-content-sm-between w-100" for="dataexport-users-user-{{ user.ID }}-checkbox" style="font-size: 1.2rem;">
                                    {% if hideMails %}
                                        <div class="w-100 d-flex justify-content-between align-items-center">
                                            <b>{{user.display_name}}</b>
                                            <h4 class="m-0 mb-1"><span class="badge badge-secondary">{{ user.studienid }}</span></h4>
                                        </div>
                                    {% else %}
                                        <div class="w-100 d-flex flex-column">
                                            <b>{{user.display_name}}</b>
                                            <small>{{user.user_email}}</small>
                                        </div>
                                        <div class="d-flex align-items-center mb-1 mb-lg-0 ml-sm-auto">
                                            <h4 class="m-0 mb-1"><span class="badge badge-secondary">{{ user.studienid }}</span></h4>
                                        </div>
                                    {% endif %}
                                </label>
                            </li>
                        {% endfor %}
                        {% for sg_name, sg in studiengruppen %}
                            <li class="list-group-item py-1 d-flex align-items-stretch flex-sm-row flex-column justify-content-sm-between cursor-pointer dataexport-users-addstudiengruppe"
                            data-studiengruppe="{{ sg_name }}" data-studiengruppenteilnehmer="{{sg|join(',') }}">
                            <div class="w-100 d-flex flex-column">
                                <b><i>Studiengruppe</i></b>
                                <small>{{ sg|length }} Nutzende(r)</small>
                            </div>
                            <div class="d-flex align-items-center mb-1 mb-sm-0">
                                <h4 class="m-0 mb-1"><span class="badge badge-secondary">{{ sg_name }}</span></h4>
                            </div>
                            </li> 
                        {% endfor %}
                        {% for company in companies %}
                            {% if company['all_users']|length > 0 %}
                                <li class="list-group-item py-1 d-flex align-items-stretch flex-sm-row flex-column justify-content-sm-between cursor-pointer dataexport-users-addcompany"
                                    data-companyname="{{ company['companyname'] }}" data-companyid="{{ company['companyid'] }}" data-company="true" data-companymember="{{ company['all_users']|join(',') }}">
                                    <div class="w-100 d-flex flex-column">
                                        <b><i>{{ global_company_name }}</i></b>
                                        <small>{{ company['all_users']|length }} Nutzende(r)</small>
                                    </div>
                                    <div class="d-flex align-items-center mb-1 mb-sm-0">
                                        <h4 class="m-0 mb-1"><span class="badge badge-secondary">{{ company['companyname'] }}</span></h4>
                                    </div>
                                </li>
                                {% for groupid, groupname in company['groups'] %}
                                    {% if company['users'][groupid]|length > 0 %}
                                        <li class="list-group-item py-1 d-flex align-items-stretch flex-sm-row flex-column justify-content-sm-between cursor-pointer dataexport-users-addcompany"
                                            data-companyname="{{ company['companyname'] }} - {{ groupname }}" data-companyid="{{ company['companyid'] }}" data-company="false" data-companymember="{{ company['users'][groupid]|join(',') }}">
                                            <div class="w-100 d-flex flex-column">
                                                <b><i>{{ global_company_name }} - Gruppe</i></b>
                                                <small>{{ company['users'][groupid]|length }} Nutzende(r)</small>
                                            </div>
                                            <div class="d-flex align-items-center mb-1 mb-sm-0">
                                                <h4 class="m-0 mb-1"><span class="badge badge-secondary">{{ company['companyname'] }} - {{ groupname }}</span></h4>
                                            </div>
                                        </li>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                        {% endfor %}
                    </div>
                    <p class="mt-1 text-muted mb-0">Es wurden <span id="dataexport-users-count">{{ allusers|length }}</span> Nutzer für Ihre Suchkriterien gefunden, Sie haben <span id="dataexport-users-selected">keinen</span> Nutzer ausgewählt.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h2 class="d-flex jusitfy-content-center mb-0">
                    <span class="badge badge-secondary">4</span>&nbsp;Weitere Optionen
                </h2>
            </div>
            <div class="card-body">
                <div class="form-check pl-0 mb-0 d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0" id="dataexport-option-studyid" style="margin-top: 0 !important;" aria-describedby="dataexport-option-studyid-help">
                    <label class="form-check-label ml-2 m-0" for="dataexport-option-studyid">Export mit Studien-Teilnehmer-ID</label>
                </div>
                <small id="dataexport-option-studyid-help" class="form-text text-muted ml-4">Falls vorhanden wird die vergebene Studien-Teilnehmer-ID als zusätzliche Spalte zu den Benutzendendaten exportiert.</small>
                <div class="form-check pl-0 mb-0 d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0" id="dataexport-option-studygroupid" style="margin-top: 0 !important;" aria-describedby="dataexport-option-studygroupid-help">
                    <label class="form-check-label ml-2 m-0" for="dataexport-option-studygroupid">Export mit Studiengruppen-ID</label>
                </div>
                <small id="dataexport-option-studygroupid-help" class="form-text text-muted ml-4">Falls vorhanden wird die vergebene Studiengruppen-ID als zusätzliche Spalte zu den Benutzendendaten exportiert.</small>
                <div class="form-check pl-0 mb-0 d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0" id="dataexport-option-groupdata" style="margin-top: 0 !important;" aria-describedby="dataexport-option-groupdata-help">
                    <label class="form-check-label ml-2 m-0" for="dataexport-option-groupdata">Export mit Gruppeninformationen</label>
                </div>
                <small id="dataexport-option-groupdata-help" class="form-text text-muted ml-4">Für jeden Benutzenden wird - falls vorhanden - Firmen-ID, Firmenname sowie Gruppennamen exportiert. Sind mehrere Firmen- und/oder Gruppenzugehörigkeiten vorhanden, so werden diese durch einen separates Trennzeichen konkateniert</small>
                <div class="form-check pl-0 mt-2 mb-0 d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0" id="dataexport-option-cleanheader" style="margin-top: 0 !important;" aria-describedby="dataexport-option-cleanheader-help">
                    <label class="form-check-label ml-2 m-0" for="dataexport-option-cleanheader">Export mit Formular-Titeln als Header</label>
                </div>
                <small id="dataexport-option-cleanheader-help" class="form-text text-muted ml-4">Für jedes TS-Forms Formular wird dessen Titel verwendet (andere Datenquellen bleiben davon unberührt).<br><b>Achtung:</b> enthält das Formular mehrere Felder oder gibt es mehrere Formulare mit dem selben Titel, ist eine Zuordnung nicht mehr möglich!</small>
            </div>
        </div>
    </div>
    <div class="col-12">
        <button class="btn btn-primary mb-5" type="button" id="dataexport-start">Export starten</button>
        <div class="accordion ts-accordion mb-4" id="accordionExportTime">
            <div class="">
              <div class="card-header" id="headingProblem">
                <h2 class="mb-0 ">
                  <button class="btn btn-link btn-block text-left collapsed accordiontitle accordiontitle-small" type="button" data-toggle="collapse" data-target="#collapseSolution" aria-expanded="false" aria-controls="collapseSolution">
                    <i class="fas fa-plus ts-accordion-plus"></i> Der Export dauert sehr lange
                  </button>
                </h2>
              </div>
              <div id="collapseSolution" class="collapse" aria-labelledby="headingProblem" data-parent="#accordionExportTime">
                <div class="mb-3 accordion-inner">
                    <p>
                        Je nach gewählten Datenquellen und/oder Anzahl der Nutzer kann ein Export längere Zeit in Anspruch nehmen.
                    </p>
                    <p>
                        Dieser Prozess kann jedoch aufgrund der Umgebungskonfiguration des Servers limitiert sein. Sollte ein Export nicht erfolgreich sein, setzten Sie die PHP Variable <code>max_execution_time</code> kurzzeitig auf einen höhren Wert.
                    </p>
                </div>
              </div>
            </div>
          </div>
          <div class="accordion ts-accordion mb-4" id="accordionAcknowledgments">
            <div class="">
              <div class="card-header" id="headingAcknowledgments">
                <h2 class="mb-0 ">
                  <button class="btn btn-link btn-block text-left collapsed accordiontitle accordiontitle-small" type="button" data-toggle="collapse" data-target="#collapseAcknowledgments" aria-expanded="false" aria-controls="collapseAcknowledgments">
                    <i class="fas fa-plus ts-accordion-plus"></i> Ich habe hier exportierte Daten für einen wissenschaftlichen Beitrag verwendet und bin dankbar dafür
                  </button>
                </h2>
              </div>
              <div id="collapseAcknowledgments" class="collapse" aria-labelledby="headingAcknowledgments" data-parent="#accordionAcknowledgments">
                <div class="mb-3 accordion-inner">
                    <p>
                        Das Modul zum Datenexport wurde von <strong>Max Sternitzke</strong> und <strong>Tim Mallwitz</strong>, Softwareentwickler am Institut für Interaktive Systeme der Technischen Hochschule Lübeck, entwickelt. 
                        Gerne darf im Beitrag ein entsprechender Vermerk, z.B. unter <em>Acknowledgments</em>, eingefügt werden. 
                    </p>
                </div>
              </div>
            </div>
          </div>
        <div class="alert alert-danger mb-0 d-none" role="alert" id="dataexport-error-alert">
            <h5><i class="fas fa-times-circle"></i>&nbsp;Fehler</h5>
            <p>
                Es ist ein Fehler beim Export aufgetreten. Entweder haben Sie keine Daten zum Export ausgewählt oder der Server ist in ein Zeit-/Speicherproblem beim Export geraten.<br>
                Existiert der Ordner <code>{{ tmp_dir }}</code>? Dieser wird zum Zwischenspeichern benutzt.
            </p>
        </div>
    </div>
</div>

{% include 'data-export/data-export-source-tsforms-modal.html' %}
{% include 'data-export/data-export-source-tsforms-multi-modal.html' %}
{% include 'data-export/data-export-source-systemstatistics-modal.html' %}

{% include 'data-export/data-export-source-forms-filter.html' %}

{% include 'data-export/data-export-loading.html' %}
