<div class="wrapper-admin-backend">
    <ul class="list-group mt-3">
        <li class="list-group-item mb-0">
            <h6>Training auswählen:</h6>
            <div class="form-group">
                <select class="form-control mt-0" name="abzeichen-training-dropdown" id="abzeichen-training-dropdown">
                    {% for training in trainings %}
                        <option value="{{training.id}}" {% if training.id == selectedTraining %}selected{% endif %}>{{training.title}}</option>
                    {% endfor %}
                </select>
            </div>
        </li>
        <li class="list-group-item mb-0 formlist">
            <div class="form-check mb-2  d-flex align-items-center">
                <input type="checkbox" class="form-check-input position-relative"  id="abzeichen-lektionsabzeichen-checkbox" value="true" {% if hasLektionsabzeichen %}checked{% endif %}>
                <label for="abzeichen-lektionsabzeichen-checkbox" class="form-check-label mb-0 mr-5 ml-2">
                    Lektionsabzeichen
                </label>
            </div>
            <div class="{% if not hasLektionsabzeichen %}d-none{% endif %}" id="abzeichen-lektionsabzeichen-options">
                <h6>Anzahl an Lektionsabzeichen:</h6>
                <div class="form-check  d-flex align-items-center">
                    <input type="radio" class="form-check-input mt-0 position-relative" id="abzeichen-count-lektionsabzeichen-single" name="abzeichen-count-lektionsabzeichen" {% if countLektionsabzeichen is empty or countLektionsabzeichen == "single"%}checked{% endif %}>
                    <label for="abzeichen-count-lektionsabzeichen-single" class="form-check-label mb-1 ml-2">
                        Ein Abzeichen pro Lektion
                    </label>
                </div>
                <div class="form-check  d-flex align-items-center">
                    <input type="radio" class="form-check-input mt-0 position-relative" id="abzeichen-count-lektionsabzeichen-double" name="abzeichen-count-lektionsabzeichen" {% if countLektionsabzeichen == "double"%}checked{% endif %}>
                    <label for="abzeichen-count-lektionsabzeichen-double" class="form-check-label mb-1 ml-2">
                        Zwei Abzeichen pro Lektion
                    </label>
                </div>
                <h6>Auswahl Lektionsabzeichen:</h6>
                {% for training in trainings %}
                    <div class="backend-abzeichen-training-lektionsliste {% if training.id != selectedTraining %}d-none{% endif %}" training-id="{{training.id}}">
                        {% for lektion in training.lektionsliste %}
                            <div class="backend-abzeichen-lektion" lektion-id="{{lektion.id}}">
                                <p><b>{{lektion.title}}</b></p>
                                <div class="row lektionsabzeichen-lektion-complete">
                                    <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                                        <div class="backend-lektionsabzeichen-no-image {% if lektion.lektionsabzeichenCompleteURL is not empty%}d-none{% endif %}">
                                            <p>Keine Datei ausgewählt.</p>
                                        </div>
                                        <div class="backend-lektionsabzeichen-image-preview {% if lektion.lektionsabzeichenCompleteURL is empty%}d-none{% endif %}">
                                            <img class="img-fluid w-25 mb-4 mt-2" src="{% if lektion.lektionsabzeichenCompleteURL is not empty%}{{lektion.lektionsabzeichenCompleteURL}}{% endif%}">
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
                                        <div class="form-group">
                                            <button class="backend-lektionsabzeichen-select-image btn btn-primary"><i class="fas fa-image"></i>&nbsp;Bilddatei auswählen</button>
                                            <button class="backend-lektionsabzeichen-remove-image btn btn-secondary {% if lektion.lektionsabzeichenCompleteURL is empty%}d-none{% endif %}">Bilddatei entfernen</button>
                                            <input class="backend-lektionsabzeichen-image-url" type="hidden" id="backend-lektionsabzeichen-complete-image-url-{{lektion.id}}" value="{% if lektion.lektionsabzeichenCompleteURL is not empty%}{{lektion.lektionsabzeichenCompleteURL}}{% endif %}">
                                            <input class="backend-lektionsabzeichen-image-id" type="hidden" id="backend-lektionsabzeichen-complere-image-id-{{lektion.id}}" value="{% if lektion.lektionsabzeichenCompleteID is not empty%}{{lektion.lektionsabzeichenCompleteID}}{% endif %}">
                                        </div>
                                    </div>
                                </div>
                                <div class="row lektionsabzeichen-lektion-incomplete {% if countLektionsabzeichen is empty or countLektionsabzeichen == 'single'%}d-none{% endif %}">
                                    <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                                        <div class="backend-lektionsabzeichen-no-image {% if lektion.lektionsabzeichenIncompleteURL is not empty%}d-none{% endif %}">
                                            <p>Keine Datei ausgewählt.</p>
                                        </div>
                                        <div class="backend-lektionsabzeichen-image-preview {% if lektion.lektionsabzeichenIncompleteURL is empty%}d-none{% endif %}">
                                            <img class="img-fluid w-25 mb-4 mt-2" src="{% if lektion.lektionsabzeichenIncompleteURL is not empty%}{{lektion.lektionsabzeichenIncompleteURL}}{% endif%}">
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
                                        <div class="form-group">
                                            <button class="backend-lektionsabzeichen-select-image btn btn-primary"><i class="fas fa-image"></i>&nbsp;Bilddatei auswählen</button>
                                            <button class="backend-lektionsabzeichen-remove-image btn btn-secondary {% if lektion.lektionsabzeichenIncompleteURL is empty%}d-none{% endif %}">Bilddatei entfernen</button>
                                            <input class="backend-lektionsabzeichen-image-url" type="hidden" id="backend-lektionsabzeichen-incomplete-image-url-{{lektion.id}}" value="{% if lektion.lektionsabzeichenIncompleteURL is not empty%}{{lektion.lektionsabzeichenIncompleteURL}}{% endif %}">
                                            <input class="backend-lektionsabzeichen-image-id" type="hidden" id="backend-lektionsabzeichen-incomplere-image-id-{{lektion.id}}" value="{% if lektion.lektionsabzeichenIncompleteID is not empty%}{{lektion.lektionsabzeichenIncompleteID}}{% endif %}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                
                {% endfor %}
            </div>
        </li>
    </ul>
    <div class="d-flex justify-content-between w-100">
        <input type="hidden" id="abzeichen-options-id" value="{{postid}}">
        <button type="button" class="btn btn-primary my-3" id="backend-abzeichen-options-save-button"><i class="fas fa-save"></i>&nbsp;Speichern</button>
    </div>
</div>

<script>
    jQuery(document).ready(function ($) {
        jQuery(document).on('click', '#publish', function (e) {
            jQuery('#backend-abzeichen-options-save-button').click();
        })
    });
</script>