<div class="wrapper-admin-backend">
    <div class="form-check mb-2 d-flex align-items-center">
        <input type="checkbox" class="form-check-input" id="checkbox-trainings-mgr-options-disableUserEvents" {% if disableUserEvents == "1" %}checked{% endif %}>
        <label class="ml-1 form-check-label trainings-options-label" for="checkbox-trainings-mgr-options-disableUserEvents">User-Events für dieses Training und dessen Lektionen deaktivieren</label>
    </div>
    <div class="form-check mb-2 d-flex align-items-center">
        <input type="checkbox" class="form-check-input" id="checkbox-trainings-mgr-options-lektionsliste" {% if showLektionsliste == "1" %}checked{% endif %}>
        <label class="ml-1 form-check-label trainings-options-label" for="checkbox-trainings-mgr-options-lektionsliste">Lektionsliste nach Trainingsstart</label>
    </div>
    <div class="form-check mb-2 d-flex align-items-center">
        <input class="form-check-input" type="checkbox" id="checkbox-show-training-name" value="show-training-name" {% if showTrainingName == "1" %}checked{% endif %}>
        <label class="ml-1 form-check-label trainings-options-label" for="checkbox-show-training-name">
        Trainingsname auf Lektionsseite 
        </label>
    </div>
    <div class="form-check mb-2 d-flex align-items-center">
        <input type="checkbox" class="form-check-input" id="checkbox-trainings-mgr-options-calendarTraining" {% if calendarTraining == "1" %}checked{% endif %} {% if calendarTrainingDisabled %}disabled{% endif %}>
        <label class="ml-1 form-check-label trainings-options-label" for="checkbox-trainings-mgr-options-calendarTraining">Als Kalender-Training verwenden</label>
    </div>
    {% if calendarTrainingConflictMessage %}
        {{ calendarTrainingConflictMessage|raw }}
    {% endif %}
    <hr>
    <h6 class="mb-2">Seiten-Navigation:</h6>
    <div class="form-check mb-2 d-flex align-items-center">
        <input type="checkbox" class="form-check-input" id="checkbox-trainings-mgr-options-showNavigation" {% if showNavigation == "1" %}checked{% endif %}>
        <label class="ml-1 form-check-label trainings-options-label" for="checkbox-trainings-mgr-options-showNavigation">Navigationsleiste anzeigen</label>
    </div>
    <div class="form-check mb-2 d-flex align-items-center">
        <input type="checkbox" class="form-check-input" id="checkbox-trainings-mgr-options-showPagination" {% if showPagination == "1" %}checked{% endif %} {% if showNavigation != "1" %}disabled {% endif %}>
        <label class="ml-1 form-check-label trainings-options-label" for="checkbox-trainings-mgr-options-showPagination">Seitennummerierung anzeigen</label>
    </div>
    <div class="form-check mb-2 d-flex align-items-center">
        <input type="checkbox" class="form-check-input" id="checkbox-trainings-mgr-options-showLektionenButton" {% if showLektionenButton == "1" %}checked{% endif %}>
        <label class="ml-1 form-check-label trainings-options-label" for="checkbox-trainings-mgr-options-showLektionenButton">Lektionen-Button anzeigen</label>
    </div>
    <div class="w-100 d-flex flex-row align-items-center">
        <b>Seitennumerierung:</b>
        <button class="btn btn-secondary btn-sm ml-auto" type="button" data-toggle="modal" data-target="#trainings-mgr-navigationType-helpmodal"><i class="fas fa-question-circle"></i></button>
    </div>
    <div class="form-check mb-1 d-flex align-items-center">
        <input class="form-check-input" type="radio" name="trainings-mgr-options-navigation-type" id="navigation-type-all" value="all" {% if navigationType == "all" %}checked{% endif %} {% if showNavigation != "1" or showPagination != "1" %}disabled {% endif %}>
        <label class="ml-1 form-check-label trainings-options-label" for="navigation-type-all">Alle Seiten anzeigen</label>
    </div>
    <div class="form-check mb-1 d-flex align-items-center">
        <input class="form-check-input" type="radio" name="trainings-mgr-options-navigation-type" id="navigation-type-all-circle" value="circle" {% if navigationType == "circle" %}checked{% endif %} {% if showNavigation != "1" or showPagination != "1" %}disabled {% endif %}>
        <label class="ml-1 form-check-label trainings-options-label" for="navigation-type-all-circle">Alle Seiten als Kreise anzeigen</label>
    </div>
    <div class="form-check mb-1 d-flex align-items-center">
        <input class="form-check-input" type="radio" name="trainings-mgr-options-navigation-type" id="navigation-type-all-bar" value="bar" {% if navigationType == "bar" %}checked{% endif %} {% if showNavigation != "1" or showPagination != "1" %}disabled {% endif %}>
        <label class="ml-1 form-check-label trainings-options-label" for="navigation-type-all-bar">Alle Seiten als Balken anzeigen</label>
    </div>
    <div class="form-check mb-1 d-flex align-items-center">
        <input class="form-check-input" type="radio" name="trainings-mgr-options-navigation-type" id="navigation-type-fcl" value="fcl" {% if navigationType == "fcl" %}checked{% endif %} {% if showNavigation != "1" or showPagination != "1" %}disabled {% endif %}>
        <label class="ml-1 form-check-label trainings-options-label" for="navigation-type-fcl">Erste - Aktuelle - Letzte Seite</label>
    </div>
    <div class="form-check mb-1 d-flex align-items-center">
        <input class="form-check-input" type="radio" name="trainings-mgr-options-navigation-type" id="navigation-type-neighbors" value="neighbors" {% if navigationType == "neighbors" %}checked{% endif %} {% if showNavigation != "1" or showPagination != "1" %}disabled {% endif %}>
        <label class="ml-1 form-check-label trainings-options-label" for="navigation-type-neighbors">Nachbar-Seiten anzeigen</label>
    </div>
    <div class="form-check mb-2 d-flex align-items-center">
        <input class="form-check-input" type="radio" name="trainings-mgr-options-navigation-type" id="navigation-type-dropdown" value="dropdown" {% if navigationType == "dropdown" %}checked{% endif %} {% if showNavigation != "1" or showPagination != "1" %}disabled {% endif %}>
        <label class="ml-1 form-check-label trainings-options-label" for="navigation-type-dropdown">Seiten als Dropdown anzeigen</label>
    </div>
    <hr>
    <div class="form-check mb-2 d-flex align-items-center">
        <input class="form-check-input" type="radio" name="radio-content-placement" id="radio-content-above-list" value="radio-content-above-list" {% if contentPlacement == "top" %}checked{% endif %}>
        <label class="ml-1 form-check-label trainings-options-label" for="radio-content-above-list">
        Inhalt über Lektionsliste 
        </label>
    </div>
    <div class="form-check d-flex align-items-center">
        <input class="form-check-input" type="radio" name="radio-content-placement" id="radio-content-below-list" value="radio-content-below-list" {% if contentPlacement == "bottom" %}checked{% endif %}>
        <label class="ml-1 form-check-label trainings-options-label" for="radio-content-below-list">
        Inhalt unter Lektionsliste 
        </label>
    </div>
    <div class="form-check mb-2 mt-2 d-flex align-items-center">
        <input type="checkbox" class="form-check-input" id="checkbox-trainings-mgr-options-skipdashboard" {% if skipDashboard == "1" %}checked{% endif %}>
        <label class="ml-1 mr-2 form-check-label trainings-options-label" for="checkbox-trainings-mgr-options-skipdashboard">Direkt nach dem Login anzeigen</label>
        <button type="button" class="btn btn-secondary btn-sm ml-auto" data-toggle="modal" data-target="#trainings-mgr-skipdashboard-helpmodal"><i class="fas fa-question-circle"></i></button>
    </div>
            
    {% if rest_activated %}
    <div class="accordion" id="AppOptions">
        <div class="">
            <div class="" id="heading">
                <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                <i class="fas fa-plus ts-accordion-plus"></i>App-Anbindung
            </button>
            </div>
            <div id="collapseOne" class="collapse" aria-labelledby="heading" data-parent="#AppOptions">
            <div class="">
                <div class="form-check mb-2 d-flex align-items-center">
                    <input type="checkbox" class="form-check-input" id="checkbox-trainings-mgr-options-showAppSleepSingleSave" {% if showAppSleepSingleSave == "1" %}checked{% endif %}>
                    <label class="ml-1 form-check-label trainings-options-label" for="checkbox-trainings-mgr-options-showAppSleepSingleSave">Schlaftagebuch (Einfache Speicherung)</label>
                </div>
                <div class="form-check mb-2 d-flex align-items-center">
                    <input type="checkbox" class="form-check-input" id="checkbox-trainings-mgr-options-showAppSleepMultiSave" {% if showAppSleepMultiSave == "1" %}checked{% endif %}>
                    <label class="ml-1 form-check-label trainings-options-label" for="checkbox-trainings-mgr-options-showAppSleepMultiSave">Schlaftagebuch (Mehrfache Speicherung)</label>
                </div>
            </div>
            </div>
        </div>
        </div>
        {% endif %}

    <button id="trainings-mgr-options-save-button" class="btn btn-primary mt-3">Speichern</button>

    <div class="modal fade" id="trainings-mgr-skipdashboard-helpmodal" tabindex="-1" role="dialog" aria-labelledby="trainings-mgr-skipdashboard-helpmodal-label" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="trainings-mgr-skipdashboard-helpmodal-label">Direkt nach dem Login anzeigen</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>
                        Mit dieser Option kann das Training direkt nach dem Login angesteuert werden, wenn das entsprechende Trainings bzw. die Befragung noch nicht abgeschlossen wurde.
                        Es kann sowohl auf die Lektionsliste als auch auf z.B. die erste Seite des Trainings bzw. der Befragung verlinkt werden. 
                        Die ggf. eingestellte Weiterleitung aufs Dashboard wird in diesem Fall übergangen.
                        Um dies zu ermöglichen, muss die URL aus dem Frontend mit allen Paramtern (idt1, idt2) verwendet werden. 
                    </p>
                    <p class="mb-0">
                        Diese Option eignet sich besonders, um Teilnehmende z.B. per E-Mail direkt auf eine Befragung hinzuweisen, da so kein Navigationsaufwand erforderlich ist. 
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="trainings-mgr-navigationType-helpmodal" tabindex="-1" role="dialog" aria-labelledby="trainings-mgr-navigationType-helpmodal-label" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="trainings-mgr-navigationType-helpmodal-label">Seiten-Navigation</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="mb-3">
                        Es stehen insgesamt 6 Arten der Trainingsseiten-Navigation zur Auswahl. Ab einer Seitenzahl von mehr als 8 empfiehlt sich die Verwendung von Arten mit reduzierten Seitenelementen bzw. kompakter Darstellung der Seitenelemente (die letzten drei Arten).
                    </p>
                    <p class="mb-3">
                        <h6>Alle Seiten anzeigen <i>(Standard)</i>:</h6>
                        <div class="btn-group pagenavigation mx-auto" role="group">
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center visited">1</a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center visited">2</a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center visited">3</a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center visited"><span class="currentpage">4</span></a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center unvisited">5</a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center unvisited">6</a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center unvisited">7</a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center unvisited">8</a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center unvisited">9</a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center unvisited"">10</a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center unvisited">11</a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center unvisited"">12</a>
                        </div>
                    </p>
                    <p class="mb-3">
                        <h6>Alle Seiten als Kreise anzeigen:</h6>
                        <div class="btn-group pagenavigation mx-auto" role="group">
                            <a class="btn btn-secondary paging-circle align-self-center p-0  d-flex justify-content-center align-items-center visited">&nbsp;</a>
                            <a class="btn btn-secondary paging-circle align-self-center p-0  d-flex justify-content-center align-items-center visited">&nbsp;</a>
                            <a class="btn btn-secondary paging-circle align-self-center p-0  paging-circle-current  d-flex justify-content-center align-items-center visited">&nbsp;</a>
                            <a class="btn btn-secondary paging-circle align-self-center p-0  d-flex justify-content-center align-items-center unvisited">&nbsp;</a>
                            <a class="btn btn-secondary paging-circle align-self-center p-0  d-flex justify-content-center align-items-center unvisited">&nbsp;</a>
                            <a class="btn btn-secondary paging-circle align-self-center p-0  d-flex justify-content-center align-items-center unvisited">&nbsp;</a>
                        </div>
                    </p>
                    <p class="mb-3">
                        <h6>Alle Seiten als Balken anzeigen:</h6>
                        <div class="btn-group pagenavigation mx-auto w-50" role="group">
                            <a class="btn btn-secondary paging-bar align-self-center p-0  d-flex justify-content-center align-items-center visited">&nbsp;</a>
                            <a class="btn btn-secondary paging-bar align-self-center p-0  d-flex justify-content-center align-items-center visited paging-bar-middle">&nbsp;</a>
                            <a class="btn btn-secondary paging-bar align-self-center p-0  paging-bar-current  d-flex justify-content-center align-items-center visited paging-bar-middle">&nbsp;</a>
                            <a class="btn btn-secondary paging-bar align-self-center p-0  d-flex justify-content-center align-items-center unvisited paging-bar-middle">&nbsp;</a>
                            <a class="btn btn-secondary paging-bar align-self-center p-0  d-flex justify-content-center align-items-center unvisited paging-bar-middle">&nbsp;</a>
                            <a class="btn btn-secondary paging-bar align-self-center p-0  d-flex justify-content-center align-items-center unvisited">&nbsp;</a>
                        </div>
                    </p>
                    <p class="mb-3">
                        <h6>Erste - Aktuelle - Letzte Seite:</h6>
                        <div class="btn-group pagenavigation mx-xl-2" role="group">
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center visited">1</a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center disabled visited">...</a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center visited">4</a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center visited"><span class="currentpage">5</span></a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center unvisited">6</a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center disabled unvisited">...</a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center unvisited">12</a>
                        </div>
                    </p>
                    <p class="mb-3">
                        <h6>Nachbar-Seiten anzeigen:</h6>
                        <div class="btn-group pagenavigation mx-xl-2" role="group">
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center visited">
                                <i class="fas fa-angle-double-left"></i>
                            </a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center visited">
                                3
                            </a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center visited">
                                <span class="currentpage">4</span>
                            </a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center unvisited">
                                5
                            </a>
                            <a class="btn btn-secondary paging d-flex justify-content-center align-items-center unvisited">
                                <i class="fas fa-angle-double-right"></i>
                            </a>
                        </div>
                    </p>
                    <p class="mb-0">
                        <h6>Seiten als Dropdown anzeigen:</h6>
                        <div class="btn-group pagenavigation mx-xl-2 d-flex align-items-center" role="group">
                            <p class="text-muted mb-0">Seite</p>
                            <div class="btn-group dropup mx-2" id="trainingssystem-plugin-navbar-dropdown-wrapper">
                                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <span class="mr-2">4</span>
                                </button>
                                <div id="trainingssystem-plugin-navbar-dropdown" class="dropdown-menu overflow-auto p-0" style="max-height: 200px; min-width: unset;">
                                    <a class="dropdown-item btn btn-secondary btn-block my-0 text-center paging visited">1</a>
                                    <a class="dropdown-item btn btn-secondary btn-block my-0 text-center paging visited">2</a>
                                    <a class="dropdown-item btn btn-secondary btn-block my-0 text-center paging visited">3</a>
                                    <a class="dropdown-item btn btn-secondary btn-block my-0 text-center paging visited"><span class="currentpage">4</span></a>
                                    <a class="dropdown-item btn btn-secondary btn-block my-0 text-center paging unvisited">5</a>
                                    <a class="dropdown-item btn btn-secondary btn-block my-0 text-center paging unvisited">6</a>
                                    <a class="dropdown-item btn btn-secondary btn-block my-0 text-center paging unvisited">7</a>
                                    <a class="dropdown-item btn btn-secondary btn-block my-0 text-center paging unvisited">8</a>
                                    <a class="dropdown-item btn btn-secondary btn-block my-0 text-center paging unvisited">9</a>
                                    <a class="dropdown-item btn btn-secondary btn-block my-0 text-center paging unvisited">10</a>
                                    <a class="dropdown-item btn btn-secondary btn-block my-0 text-center paging unvisited">11</a>
                                    <a class="dropdown-item btn btn-secondary btn-block my-0 text-center paging unvisited">12</a>
                                </div>
                            </div>
                            <p class="text-muted mb-0">von 12</p>
                        </div>
                </div>
            </div>
        </div>
    </div>
</div>