<div class="modal fade" id="training-mgr-datedep-edit-modal" tabindex="-1" role="dialog"
    aria-labelledby="training-mgr-datedep-edit-modallabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="training-mgr-datedep-edit-modal-label">{% if type == "date" %}Zeitpunkt{% else %}Zeitliche Abhängigkeit{% endif %} bearbeiten</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body training-mgr-datedep-edit-modal-data">
                <h4 class="mt-0">Training: «<i>{{ alltrainings[element.trainingId].getTitle() }}</i>»</h4>
                <input type="hidden" id="modal-datedep-edit-type" value="{{ type }}">
                <input type="hidden" id="modal-datedep-edit-training-id" value="{{ element.trainingId }}">
                <div class="form-group">
                    <label for="modal-datedep-edit-training-mode" class="ml-0">Trainingsmodus:</label>
                    <select class="custom-select" size="1" id="modal-datedep-edit-training-mode">
                        <option value="0" {% if element.trainingMode == 0 %}selected{% endif %}>Individuell</option>
                        <option value="1" {% if element.trainingMode == 1 %}selected{% endif %}>Sequentiell</option>
                        <option value="2" {% if element.trainingMode == 2 %}selected{% endif %}>Begleitet</option>
                    </select>
                </div>
                <div class="form-check d-flex align-items-center mt-0 mb-0">
                    <input class="form-check-input" type="checkbox" id="modal-datedep-edit-training-ecoaching" {% if element.ecoachingEnable or element.trainingMode == '2' %}checked{% endif %} {% if element.trainingMode == '2' %}disabled{% endif %}>
                    <label class="form-check-label my-2" for="modal-datedep-edit-training-ecoaching">E-Coaching aktivieren</label>
                </div>
                <div class="form-check d-flex align-items-center mt-0 mb-0">
                    <input class="form-check-input" type="checkbox" id="modal-datedep-edit-training-redirect" {% if element.redirect %}checked{% endif %}>
                    <label class="form-check-label my-2" for="modal-datedep-edit-training-redirect">Weiterleitung nach Login aktivieren</label>
                </div>
                {% include 'coach-user-training-mgr/coach-user-training-mgr-datedep-redirect-note.html' %}
                <div id="extended-settings-area-editmodal" class="w-100 my-3 {% if element.trainingMode == 2 %}d-block{% else %}d-none{% endif %}">
                    <div class="accordion" id="extended-settings-parent-editmodal">
                        <div class="card m-0">
                            <div class="card-header p-1 pl-2"
                                id="extended-settings-heading-editmodal">
                                <h6 class="m-0">
                                    <button class="btn btn-link collapsed p-0" type="button"
                                        data-toggle="collapse"
                                        data-target="#extended-settings-body-editmodal"
                                        aria-expanded="false"
                                        aria-controls="extended-settings-body-editmodal">
                                        <i class="fas fa-chevron-right ts-accordion-chevron"></i>
                                        Erweiterte E-Coaching-Einstellungen auf Lektionsebene
                                    </button>
                                </h6>
                            </div>
                            <div id="extended-settings-body-editmodal" class="collapse"
                                aria-labelledby="extended-settings-heading-editmodal"
                                data-parent="#extended-settings-parent-editmodal">
                                <div class="card-body p-0">
                                    <ul class="list-group list-group-flush">
                                        {% for lektion in alltrainings[element.trainingId].lektionsliste %}
                                        <li class="list-group-item d-flex flex-column">
                                            <div class="w-100">
                                                <i class="fas fa-stream"></i>
                                                {{ lektion.title }}
                                            </div>
                                            <div class="form-group form-check d-flex flex-row align-items-center p-0 m-0">
                                                <input type="checkbox"
                                                    class="form-check-input datedep-checkbox-coaching-lektion {% if
                                                        loop.first %} datedep-checkbox-coaching-lektion-first {% endif %} m-0"
                                                    id="e-coaching-lektion-editmodal{{lektion.id}}" data-lektionid="{{ lektion.id }}" 
                                                    data-trainingid="{{ training.id }}"
                                                    name="e-coaching-lektion{{lektion.id}}" {% if loop.first %}disabled checked{% elseif element.getLektionSettingsJsonDecoded()[lektion.id] == 2 %}checked{% endif %}>
                                                <label
                                                    class="form-check-label pl-2"
                                                    for="e-coaching-lektion-editmodal{{lektion.id}}">E-Coach nach
                                                    Fertigstellung benachrichtigen</label>
                                            </div>
                                        </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <nav>
                    <div class="nav nav-tabs" id="nav-edit-tab" role="tablist">
                        <a class="nav-item nav-link {% if type == 'date' %}active{% else %}disabled{% endif %}" id="nav-edit-date-tab" data-toggle="tab" href="#nav-edit-date" role="tab" aria-controls="nav-edit-date" aria-selected="{% if type == 'date' %}true{% else %}false{% endif %}"><i class="fas fa-clock"></i> Zeitpunkt</a>
                        <a class="nav-item nav-link {% if type == 'dep' %}active{% else %}disabled{% endif %}" id="nav-edit-dependency-tab" data-toggle="tab" href="#nav-edit-dependency" role="tab" aria-controls="nav-edit-dependency" aria-selected="{% if type == 'dep' %}true{% else %}false{% endif %}"><i class="fas fa-share"></i> Zeitliche Abhängigkeit</a>
                    </div>
                </nav>
                <div class="tab-content mb-3" id="nav-tabEditContent">
                    {#########################################           Zeitpunkt           #############################################}
                    <div class="tab-pane fade {% if type == 'date' %}show active{% endif %} p-4" id="nav-edit-date" role="tabpanel" aria-labelledby="nav-edit-date-tab">
                        {% if type == 'date' %}
                            <h4>Zeitpunkt</h4>
                            <div class="alert alert-info mt-3" role="alert">
                                <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
                                <p>
                                    Weisen Sie Training(s) zu einem bestimmten Datum zu.
                                </p>
                            </div>
                            <div class="form-group mt-2">
                                <label for="modal-datedep-edit-dateinput" class="ml-0">
                                    Zeitpunkt:
                                </label>
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-calendar"></i></span></div>
                                    <input type="date" id="modal-datedep-edit-dateinput" class="form-control" min="{{ "now"|date_modify('+1 day')|date('Y-m-d') }}" value="{{ element.AssignDatetime|date('Y-m-d') }}">
                                    <div class="input-group-append"><button id="modal-datedep-edit-dateinput-clear" type="button" class="btn btn-outline-secondary"><i class="fas fa-trash-alt"></i></button></div>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                    {#########################################           Abhängig zuweisen           #############################################}
                    <div class="tab-pane fade {% if type == 'dep' %}show active{% endif %} p-4" id="nav-edit-dependency" role="tabpanel" aria-labelledby="nav-edit-dependency-tab">
                        {% if type == 'dep' %}
                            <h4>Zeiliche Abhängigkeit von anderem Training</h4>
                            <div class="alert alert-info mt-3" role="alert">
                                <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
                                <p>
                                    Weisen Sie Training(s) sofort oder nach einer bestimmten Zeitspanne nach Beendigung eines/mehrerer anderer Trainings zu.
                                </p>
                            </div>
                            <div class="form-row mt-2">
                                <div class="form-group col-md-6">
                                    <label for="modal-datedep-edit-dependency-time" class="ml-0">Zahl:</label>
                                    <select id="modal-datedep-edit-dependency-time" class="custom-select" size="1">
                                        <option value="0" {% if element.getTimeAdd() == 0 %}selected{% endif %}>0</option>
                                        <option value="1" {% if element.getTimeAdd() == 1 %}selected{% endif %}>1</option>
                                        <option value="2" {% if element.getTimeAdd() == 2 %}selected{% endif %}>2</option>
                                        <option value="3" {% if element.getTimeAdd() == 3 %}selected{% endif %}>3</option>
                                        <option value="4" {% if element.getTimeAdd() == 4 %}selected{% endif %}>4</option>
                                        <option value="5" {% if element.getTimeAdd() == 5 %}selected{% endif %}>5</option>
                                        <option value="6" {% if element.getTimeAdd() == 6 %}selected{% endif %}>6</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for=modal-datedep-edit-dependency-timemultiplier" class="ml-0">Einheit:</label>
                                    <select id="modal-datedep-edit-dependency-timemultiplier" class="custom-select" size="1">
                                        <option value="hours" {% if element.getTimeMultiplier() == "hours" %}selected{% endif %}>Stunde(n)</option>
                                        <option value="days" {% if element.getTimeMultiplier() == "days" %}selected{% endif %}>Tag(e)</option>
                                        <option value="weeks" {% if element.getTimeMultiplier() == "weeks" %}selected{% endif %}>Woche(n)</option>
                                        <option value="months" {% if element.getTimeMultiplier() == "months" %}selected{% endif %}>Monat(e)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-row mt-2">
                                <div class="form-group col-md-6">
                                    <label for="modal-datedep-edit-dependency-trainings" class="ml-0">Nach Beendigung von:</label>
                                    <div id="modal-datedep-edit-dependency-trainings" class="w-100 card panel panel-default list-group-flush mb-0" style="height:120px!important;overflow-y: auto;">
                                        {% for tr in alltrainings %}
                                            {% if tr.getFin() < 100.0 %}
                                                <div class="form-group form-check list-group-item p-2 mb-0 d-flex align-items-center">
                                                    <input class="form-check-input ml-0 datedep-edit-dependency-training" type="checkbox" id="modal-datedep-edit-dependency-trainings-{{ tr.id }}" value="{{ tr.id }}" {% if element.hasDependentTraining(tr.id) %}checked{% endif %}>
                                                    <label class="form-check-label mb-0 pl-2" for="modal-datedep-edit-dependency-trainings-{{ tr.id }}">{{ tr.title }}</label>
                                                </div>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                    <p class="text-muted mt-2 pl-2"><small>Nur Trainings die bereits zugewiesen wurden und der <span class="badge badge-secondary">Main</span>-Nutzer noch nicht abgeschlossen hat stehen hier zur Auswahl.</small></p>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="modal-datedep-edit-dependency-condition" class="ml-0">Bedingung:</label>
                                    <select id="modal-datedep-edit-dependency-condition" class="custom-select" size="1" {% if element.getDependentTrainingsJsonDecoded()|length > 0 %}disabled{% endif %}>
                                        <option value="or" {% if element.getDependentCondition() == "or" %}selected{% endif %}>oder</option>
                                        <option value="and" {% if element.getDependentCondition() == "and" %}selected{% endif %}>und</option>
                                    </select>
                                    <p class="text-muted mt-2 pl-2"><small>Bei Auswahl von mehreren Trainings kann hier mit einer Bedingung für die Zuteilung angegeben werden, ob alle Trainings oder eines der Auswahl absolviert sein müssen.</small></p>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="modal-footer d-flex justify-content-between">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
                <button type="button" class="btn btn-primary" id="modal-datedep-edit-save" data-trainingdatedepid="{{ element.id }}">Speichern</button>
            </div>
        </div>
    </div>
</div>