<div class="modal fade" id="dataExportFormsFilterModal" tabindex="-1" role="dialog" aria-labelledby="dataExportFormsFilterModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title mt-0" id="dataExportFormsFilterModalLabel"></h4>
                <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="alert alert-info" role="alert">
                    <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
                    <p>
                        Hier können Sie Formulare nach Training und/oder Lektion filtern. Alle Formulare, die in den ausgewählten Lektionen vorkommen, werden in der Auswahl der Formulare automatisch ausgewählt.
                    </p>
                </div>
                <input type="hidden" id="dataexportFormsType" value="">
                <input type="hidden" id="dataexportFormsTarget" value="">
                <div id="dataExportFormsFilterAccordion">
                    {% for training in alltrainings %}
                        <div class="card mb-0">
                            <div class="card-header p-1" id="dataExportFormsHeading{{ training.ID }}">
                                <h5 class="mb-0">
                                    <button class="btn btn-link btn-block text-left py-0 px-2" type="button" data-toggle="collapse" data-target="#dataExportFormsCollapse{{ training.ID }}" aria-expanded="{% if loop.first %}true{% endif %}" aria-controls="dataExportFormsCollapse{{ training.ID }}">
                                        <i class="fas fa-plus ts-accordion-plus"></i>&nbsp;{{ training.title }}
                                    </button>
                                </h5>
                            </div>
                            <div id="dataExportFormsCollapse{{ training.ID }}" class="collapse {% if loop.first %}show{% endif %}" aria-labelledby="dataExportFormsHeading{{ training.ID }}" {#data-parent="#dataExportFormsFilterAccordion"#}>
                                <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">
                                                    <input type="checkbox" class="form-check-input position-relative m-0 dataExportFormsFilterLektionAll" data-trainingid="{{ training.ID }}" id="dataExportFormsFilterLektionAll{{ training.ID }}" style="margin-top: 0 !important;">
                                                    <label class="form-check-label ml-2 m-0" for="dataExportFormsFilterLektionAll{{ training.ID }}">Alle Lektionen auswählen</label>
                                                </div>
                                            </li>
                                        {% for lektion in training.getLektionsliste() %}
                                            <li class="list-group-item pl-5">
                                                <div class="form-check pl-0 mb-0 d-flex align-items-center">
                                                    <input type="checkbox" data-lektiontrainingid="{{ training.ID }}" class="form-check-input position-relative m-0 dataExportFormsFilterLektion" id="dataExportFormsFilterLektion{{ lektion.ID }}" value="{{ lektion.ID }}" style="margin-top: 0 !important;">
                                                    <label class="form-check-label ml-2 m-0" for="dataExportFormsFilterLektion{{ lektion.ID }}">{{ lektion.title }}</label>
                                                </div>
                                            </li>
                                        {% endfor %}
                                      </ul>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="dataExportFormsFilterSendButton">Filtern</button>
            </div>
        </div>
    </div>
</div>