<div class="wrapper-admin-backend">
    <ul class="list-group mt-3">
        <li class="list-group-item mb-0 formlist"> <!--Titel-->
            <h6>Titel des Dokuments:</h6>
            <div class="form-group">
                <input class="form-control" type="text" placeholder="Titel des Dokuments" id="zertifikat-titel" value="{{certificate_content.titel}}">
            </div>
            <h6>Schriftfarbe des Titels:</h6>
            <div class="form-group">
                <input class="mt-0 position-relative form-control form-control-color" type="color" id="zertifikat-titel-color" value="{% if certificate_content is empty%}#000000{% else %}{{certificate_content.titel_color}}{% endif %}">
            </div>
            <h6>Positionierung des Titels:</h6>
            <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input mt-0 position-relative" id="zertifikat-titel-orientation-left" name="zertifikat-titel-orientation" {% if certificate_content is empty or certificate_content.titel_orientation == "left"%}checked{% endif%}>
                <label for="zertifikat-titel-orientation-left" class="form-check-label ml-2">links</label>
            </div>
            <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input mt-0 position-relative" id="zertifikat-titel-orientation-center" name="zertifikat-titel-orientation" {% if certificate_content.titel_orientation == "center"%}checked{% endif%}>
                <label for="zertifikat-titel-orientation-center" class="form-check-label ml-2">mittig</label>
            </div>
            <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input mt-0 position-relative" id="zertifikat-titel-orientation-right" name="zertifikat-titel-orientation" {% if certificate_content.titel_orientation == "right"%}checked{% endif%}>
                <label for="zertifikat-titel-orientation-right" class="form-check-label ml-2">rechts</label>
            </div>
        </li> <!--Titel-->
        <li class="list-group-item mb-0 formlist"> <!--Einleitender Text-->
            <h6>Ergänzende Informationen für einleitenden Text: <small>(optional)</small></h6>
            <div class="form-group">
                <textarea class="form-control" id="zertifikat-additional-info-text" placeholder="Ergänzende Informationen" rows="3" style="resize: vertical; max-height: unset;">{{certificate_content.additional_info_text}}</textarea>
            </div>
            <h6>Alternativen einleitenden Text hinzufügen: <small>(optional)</small></h6>
            <div class="form-check m-2 d-flex align-items-center">
                <input type="checkbox" class="form-check-input position-relative" id="zertifikat-add-alt-info-text" {% if certificate_content.add_alt_info_text == 1 %}checked{% endif %}>
                <label for="zertifikat-add-alt-info-text" class="form-check-label mb-0 mr-5 ml-2">
                    Alternativen einleitenden Text in Dokument einfügen
                </label>
                <button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#altInfoTexteHelpModal" type="button"><i class="fas fa-question-circle"></i>&nbsp;Hilfe Alternativer einleitender Text</button>
            </div>
            <h6>Alternativer einleitender Text: <small>(optional)</small></h6>
            <div class="form-group">
                <textarea class="form-control" id="zertifikat-alt-info-text" placeholder="Alternativer einleitender Text" rows="3" style="resize: vertical; max-height: unset;" {% if certificate_content.add_alt_info_text != 1 %}disabled{% endif %}>{{certificate_content.alt_info_text}}</textarea>
            </div>
            <h6>Schriftfarbe des einleitenden Textes:</h6>
            <div class="form-group">
                <input class="mt-0 position-relative form-control form-control-color" type="color" id="zertifikat-additional-info-color" value="{% if certificate_content is empty %}#000000{% else %}{{certificate_content.additional_info_color}}{% endif %}">
            </div>
            <h6>Positionierung des einleitenden Textes:</h6>
            <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input mt-0 position-relative" id="zertifikat-introduction-orientation-left" name="zertifikat-introduction-orientation" {% if certificate_content is empty or certificate_content.introduction_orientation == "left"%}checked{% endif%}>
                <label for="zertifikat-introduction-orientation-left" class="form-check-label  ml-2">links</label>
            </div>
            <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input mt-0 position-relative" id="zertifikat-introduction-orientation-center" name="zertifikat-introduction-orientation" {% if certificate_content.introduction_orientation == "center"%}checked{% endif%}>
                <label for="zertifikat-introduction-orientation-center" class="form-check-label  ml-2">mittig</label>
            </div>
            <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input mt-0 position-relative" id="zertifikat-introduction-orientation-right" name="zertifikat-introduction-orientation" {% if certificate_content.introduction_orientation == "right"%}checked{% endif%}>
                <label for="zertifikat-introduction-orientation-right" class="form-check-label  ml-2">rechts</label>
            </div>
        </li> <!--Einleitender Text-->
        <li class="list-group-item mb-0 formlist"> <!--Training-Titel-->
            <h6>Training auswählen:</h6>
            <div class="form-group">
                <select class="form-control mt-0" name="zertifikat-training-dropdown" id="zertifikat-training-dropdown">
                    {% for training in allTrainings %}
                        <option value="{{training.getId()}}" {% if training.getId() == selectedTraining %}selected{% endif %}>{{training.getTitle()}}</option>
                    {% endfor %}
                </select>
            </div>
            <h6>Alternativen Training-Titel hinzufügen: <small>(optional)</small></h6>
            <div class="form-check m-2 d-flex align-items-center">
                <input type="checkbox" class="form-check-input position-relative" id="zertifikat-add-alt-training-title" {% if certificate_content.add_alt_training_title == 1 %}checked{% endif %}>
                <label for="zertifikat-add-alt-training-title" class="form-check-label mb-0 mr-5 ml-2">
                    Alternativen Training-Titel in Dokument einfügen
                </label>
                <button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#altTrainingtitleHelpModal" type="button"><i class="fas fa-question-circle"></i>&nbsp;Hilfe Alternativer Training-Titel</button>
            </div>
            <h6>Alternativer Training-Titel: <small>(optional)</small></h6>
            <div class="form-group">
                <input class="form-control" id="zertifikat-alt-training-title" placeholder="Alternativer Training-Titel" value="{{certificate_content.alt_training_title}}" {% if certificate_content.add_alt_training_title != 1 %}disabled{% endif %}>
            </div>
            <h6>Schriftfarbe des Training-Titels:</h6>
            <div class="form-group">
                <input class="mt-0 position-relative form-control form-control-color" type="color" id="zertifikat-training-name-color" value="{% if certificate_content is empty %}#000000{% else %}{{certificate_content.training_title_color}}{% endif %}">
            </div>
            <h6>Positionierung des Training-Titels:</h6>
            <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input mt-0 position-relative" id="zertifikat-training-title-orientation-left" name="zertifikat-training-title-orientation" {% if certificate_content is empty or certificate_content.training_title_orientation == "left"%}checked{% endif%}>
                <label for="zertifikat-training-title-orientation-left" class="form-check-label  ml-2">links</label>
            </div>
            <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input mt-0 position-relative" id="zertifikat-training-title-orientation-center" name="zertifikat-training-title-orientation" {% if certificate_content.training_title_orientation == "center"%}checked{% endif%}>
                <label for="zertifikat-training-title-orientation-center" class="form-check-label  ml-2">mittig</label>
            </div>
            <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input mt-0 position-relative" id="zertifikat-training-title-orientation-right" name="zertifikat-training-title-orientation" {% if certificate_content.training_title_orientation == "right"%}checked{% endif%}>
                <label for="zertifikat-training-title-orientation-right" class="form-check-label  ml-2">rechts</label>
            </div>
        </li> <!--Training-Titel-->
        <li class="list-group-item mb-0 formlist"> <!--Beschreibung des Trainings-->
            <h6>Beschreibung des Trainings: <small>(optional)</small></h6>
            <div class="form-group">
                <textarea class="form-control" id="zertifikat-additional-traininginfo-text" placeholder="Beschreibung des Trainings" rows="3" style="resize: vertical; max-height: unset;">{{certificate_content.additional_traininginfo_text}}</textarea>
            </div>
            <h6>Schriftfarbe der Beschreibung des Trainings:</h6>
            <div class="form-group">
                <input class="mt-0 position-relative form-control form-control-color" type="color" id="zertifikat-additional-traininginfo-color" value="{% if certificate_content is empty %}#000000{% else %}{{certificate_content.additional_traininginfo_color}}{% endif %}">
            </div>
            <h6>Positionierung der Beschreibung des Trainings:</h6>
            <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input mt-0 position-relative" id="zertifikat-additional-traininginfo-orientation-left" name="zertifikat-additional-traininginfo-orientation" {% if certificate_content is empty or certificate_content.additional_traininginfo_orientation == "left"%}checked{% endif%}>
                <label for="zertifikat-additional-traininginfo-orientation-left" class="form-check-label  ml-2">links</label>
            </div>
            <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input mt-0 position-relative" id="zertifikat-additional-traininginfo-orientation-center" name="zertifikat-additional-traininginfo-orientation" {% if certificate_content.additional_traininginfo_orientation == "center"%}checked{% endif%}>
                <label for="zertifikat-additional-traininginfo-orientation-center" class="form-check-label  ml-2">mittig</label>
            </div>
            <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input mt-0 position-relative" id="zertifikat-additional-traininginfo-orientation-right" name="zertifikat-additional-traininginfo-orientation" {% if certificate_content.additional_traininginfo_orientation == "right"%}checked{% endif%}>
                <label for="zertifikat-additional-traininginfo-orientation-right" class="form-check-label  ml-2">rechts</label>
            </div>
        </li> <!--Beschreibung des Trainings-->
        <li class="list-group-item mb-0 formlist"> <!--Schlussformel-->
            <h6>Ort für Schlussformel:</h6>
            <div class="form-group">
                <input class="form-control" id="zertifikat-closing-location" placeholder="Ort für Schlussformel" value="{{certificate_content.closing_location}}">
            </div>
            <h6>Namen der verantwortlichen Personen für Schlussformel:</h6>
            <div class="form-group">
                <textarea class="form-control" id="zertifikat-closing-persons" placeholder="Namen der verantwortlichen Personen für Schlussformel" rows="2" style="resize: vertical; max-height: unset;">{{certificate_content.closing_persons}}</textarea>
            </div>
            <h6>Auswahl eines Bildes für die Schlussformel: <small>(optional)</small></h6>
            <div {% if certificate_content.closing_img_url is not empty %}class="d-none"{% endif %} id="zertifikat-no-closing-img">
                <p>Kein Bild ausgewählt.</p>
            </div>
            <div {% if certificate_content.closing_img_url is empty %}class="d-none"{% endif %} id="zertifikat-closing-img-preview">
                <img class="img-fluid w-25 mb-4 mt-2" {% if certificate_content.closing_img_url is not empty %}src="{{certificate_content.closing_img_url}}"{% endif %}>
            </div>
            <div class="form-group">
                <button id="zertifikat-closing-img-button" class="btn btn-primary mr-3"><i class="fas fa-image"></i>&nbsp;Bild auswählen</button>
                <button id="zertifikat-remove-closing-img-button" class="btn btn-secondary {% if certificate_content.closing_img_url is empty %}d-none{% endif %}">Bild entfernen</button>
                <input type="hidden" id="zertifikat-closing-img-url" value="{% if certificate_content.closing_img_url is not empty%}{{certificate_content.closing_img_url}}{% endif %}">
                <input type="hidden" id="zertifikat-closing-img-id" value="{% if certificate_content.closing_img_id is not empty%}{{certificate_content.closing_img_id}}{% endif %}">
                <input type="hidden" id="zertifikat-closing-img-hwratio" value="{% if certificate_content.closing_img_hwratio is not empty%}{{certificate_content.closing_img_hwratio}}{% endif %}">
            </div>
            <div {% if certificate_content.closing_img_url is empty%}class="d-none"{% endif %} id="zertifikat-closing-img-options">
                <h6>Größe des Bildes festlegen:</h6>
                <div class="form-group">
                    <label class="ml-0" for="zertifikat-closing-img-height">Höhe des Bildes (in mm)</label>
                    <input type="number" min="1" max="25" id="zertifikat-closing-img-height" class="form-control" step="1" {% if certificate_content.closing_img_height is not empty%}value="{{certificate_content.closing_img_height}}"{% endif %}>
                </div>
                <div class="form-group">
                    <label class="ml-0" for="zertifikat-closing-img-width">Breite des Bildes (in mm)</label>
                    <input type="number" min="1" id="zertifikat-closing-img-width" class="form-control" step="1" disabled {% if certificate_content.closing_img_width is not empty%}value="{{certificate_content.closing_img_width}}"{% endif %}>
                </div>
            </div>
            <h6>Schriftfarbe der Schlussformel:</h6>
            <div class="form-group">
                <input class="mt-0 position-relative form-control form-control-color" type="color" id="zertifikat-closing-color" value="{% if certificate_content is empty %}#000000{% else %}{{certificate_content.closing_color}}{% endif %}">
            </div>
            <h6>Positionierung der Schlussformel:</h6>
            <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input mt-0 position-relative" id="zertifikat-closing-orientation-left" name="zertifikat-closing-orientation" {% if certificate_content.closing_orientation == "left" or certificate_content is empty%}checked{% endif %}>
                <label for="zertifikat-closing-orientation-left" class="form-check-label  ml-2">links</label>
            </div>
            <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input mt-0 position-relative" id="zertifikat-closing-orientation-center" name="zertifikat-closing-orientation" {% if certificate_content.closing_orientation == "center"%}checked{% endif %}>
                <label for="zertifikat-closing-orientation-center" class="form-check-label  ml-2">mittig</label>
            </div>
            <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input mt-0 position-relative" id="zertifikat-closing-orientation-right" name="zertifikat-closing-orientation" {% if certificate_content.closing_orientation == "right"%}checked{% endif %}>
                <label for="zertifikat-closing-orientation-right" class="form-check-label  ml-2">rechts</label>
            </div>
        </li> <!--Schlussformel-->
    </ul>
</div>

{% include "zertifikate/backend-zertifikat-alt-training-title-help-modal.html" %}
{% include "zertifikate/backend-zertifikat-alt-info-text-help-modal.html" %}

<script>
    jQuery(document).on('click', '#publish', function(){
        jQuery('#zertifikat-save-button').click();
    });
</script>