<div class="wrapper-admin-backend">
    <ul class="list-group mt-3">
        <li class="list-group-item mb-0 d-flex align-items-center"><label class="mb-0 mr-1">Shortcode: <code>[ts_forms id='{{id}}']</code></label><button class="btn btn-secondary btn-sm copy-shortcode-button" type="button" title="Kopieren"><i class="fas fa-copy"></i></button></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="formular-is-multiform-checkbox" value="true" {% if is_multiform %}checked{% endif %}>
                <label for="formular-is-multiform-checkbox" class="form-check-label mb-0 mr-5 ml-2">
                    Dieses Formular ist ein MultiForm
                </label>
                <button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#multiformHelpModal" type="button"><i class="fas fa-question-circle"></i>&nbsp;Hilfe MultiForms</button>
            </div>
            <h6>MultiForm-Anordnung:</h6>
            <div class="form-check  d-flex align-items-center">
                <input type="radio" class="form-check-input mt-0 position-relative" {% if multiform_orientation == "above" %}checked{% endif %} id="formular-multiform-orientation-above" name="formular-multiform-orientation" {% if not is_multiform %}disabled{% endif %}>
                <label for="formular-multiform-orientation-above" class="form-check-label mb-1 ml-2">
                    Übereinander
                </label>
            </div>
            <div class="form-check  d-flex align-items-center">
                <input type="radio" class="form-check-input mt-0 position-relative" {% if multiform_orientation is empty or multiform_orientation == "next" %}checked{% endif %} id="formular-multiform-orientation-next" name="formular-multiform-orientation" {% if not is_multiform %}disabled{% endif %}>
                <label for="formular-multiform-orientation-next" class="form-check-label mb-1 ml-2">
                    Nebeneinadner
                </label>
            </div>
            <h6>MultiForm-Sortierung:</h6>
            <div class="form-check  d-flex align-items-center">
                <input type="checkbox" class="form-check-input position-relative"  id="formular-multiform-ordering" value="true" {% if not is_multiform %}disabled{% endif %} {% if multiform_ordering %}checked{% endif %}>
                <label for="formular-multiform-ordering" class="form-check-label mb-0 mr-5 ml-2">
                    Sortierung manuell anpassbar machen
                </label>
            </div>
        </li>
        <li class="list-group-item mb-0 formlist">
            <div class="form-check  d-flex align-items-center">
                <input type="checkbox" class="form-check-input position-relative"  id="formular-submitmanually" value="true" {% if submit_manually %}checked{% endif %}>
                <label for="formular-submitmanually" class="form-check-label mb-0 mr-5 ml-2">
                    Formulareingaben manuell absenden
                </label>
                <button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#submitmanuallyHelpModal" type="button"><i class="fas fa-question-circle"></i>&nbsp;Hilfe manuell Absenden</button>
            </div>
            <div class="form-group mb-0">
                <label class="mx-0" for="formular-sendtomail">Weiterleitungs-URL:</label>
                <input type="url" class="form-control"  id="formular-submitmanuallylink" placeholder="https://" value="{{ submitmanuallylink }}" {% if not submit_manually %}disabled{% endif %}>
            </div>
        </li>
        <li class="list-group-item mb-0 formlist">
            <div class="form-check d-flex align-items-center">
                <input type="checkbox" class="form-check-input position-relative"  id="formular-sendbymail" value="true" {% if send_by_mail %}checked{% endif %}>
                <label for="formular-sendbymail" class="form-check-label mb-0 mr-5 ml-2">
                    Formulareingaben per E-Mail senden
                </label>
                <button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#sendbymailHelpModal" type="button"><i class="fas fa-question-circle"></i>&nbsp;Hilfe E-Mail-Versand</button>
            </div>
            <div class="form-group mb-0">
                <label class="mx-0" for="formular-sendtomail">E-Mail-Adresse(n) für Formulareingaben:</label>
                <input type="text" class="form-control" id="formular-sendtomail" placeholder="E-Mail-Adresse(n)" value="{{ send_to_mail }}" {% if not send_by_mail %}disabled{% endif %}>
                <span id="formular-sendtomail-helptext" class="form-text text-muted">
                    Mehrere E-Mail-Adressen mit Semikolon <code>;</code> trennen. Die Eingaben werden an jede E-Mail-Adresse gesendet.
                </span>
                <span id="formular-sendtomail-invalidfeedback" class="form-text invalid-feedback">
                    Die oder eine der E-Mail-Adressen ist nicht gültig. Nutzen Sie kein abschließendes Semikolon.
                </span>
            </div>
        </li>
        <li class="list-group-item mb-0 formlist">
            <div class="form-check">
                <input type="checkbox" class="form-check-input position-relative"  id="formular-send_receipt" value="true" {% if send_receipt %}checked{% endif %}>
                <label for="formular-send_receipt" class="form-check-label mb-0 mr-5 ml-2">
                    Bestätigung an Nutzer senden
                </label>                
                <button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#sendReceiptHelpModal" type="button"><i class="fas fa-question-circle"></i>&nbsp;Hilfe E-Mail-Bestätigung</button>
            </div>
            <div class="form-group mt-2">
                <label class="mx-0" for="formular-send_receipt_subject">Betreff der E-Mail:</label>
                <input type="text" class="form-control"  id="formular-send_receipt_subject" placeholder="Betreff der E-Mail" value="{{ send_receipt_subject }}" {% if not send_receipt %}disabled{% endif %}>
            </div>
            <div class="form-group mb-0">
                <label class="mx-0" for="formular-send_receipt_text">Text der E-Mail:</label>
                <textarea class="form-control" id="formular-send_receipt_text" placeholder="Text der E-Mail" rows="3" {% if not send_receipt %}disabled{% endif %} style="resize: vertical; max-height: unset;">{{send_receipt_text|raw}}</textarea>
            </div>
        </li>
        <li class="list-group-item mb-0 formlist">
            <h6>Speichermodus:</h6>
            <div class="form-check  d-flex align-items-center">
                <input type="radio" class="form-check-input position-relative" name="formular-savemode" id="formular-normaldata" value="true" {% if not keep_data and not nosave %}checked{% endif %}>
                <label for="formular-normaldata" class="form-check-label mb-0 mr-5 ml-2">
                    Normaler Modus
                </label>
                <button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#normaldataHelpModal" type="button"><i class="fas fa-question-circle"></i>&nbsp;Hilfe Normaler Modus</button>
            </div>
            <div class="form-check mt-2  d-flex align-items-center">
                <input type="radio" class="form-check-input position-relative" name="formular-savemode" id="formular-keepdata" value="true" {% if keep_data %}checked{% endif %}>
                <label for="formular-keepdata" class="form-check-label mb-0 mr-5 ml-2">
                    Alle Formulareingaben behalten
                </label>
                <button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#keepdataHelpModal" type="button"><i class="fas fa-question-circle"></i>&nbsp;Hilfe Formulareingaben behalten</button>
            </div>
            <div class="form-check mt-2  d-flex align-items-center">
                <input type="radio" class="form-check-input position-relative" name="formular-savemode" id="formular-saveonce" value="true" {% if saveonce %}checked{% endif %}>
                <label for="formular-saveonce" class="form-check-label mb-0 mr-5 ml-2">
                    Einmaliges Speichern
                </label>
                <button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#saveOnceHelpModal" type="button"><i class="fas fa-question-circle"></i>&nbsp;Hilfe Einmaliges Speichern</button>
            </div>
            <div class="form-check mt-2  d-flex align-items-center">
                <input type="radio" class="form-check-input position-relative" name="formular-savemode" id="formular-nosave" value="true" {% if nosave %}checked{% endif %}>
                <label for="formular-nosave" class="form-check-label mb-0 mr-5 ml-2">
                    Keine Formulareingaben speichern
                </label>
                <button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#nosaveHelpModal" type="button"><i class="fas fa-question-circle"></i>&nbsp;Hilfe keine Formulareingaben speichern</button>
            </div>
            <p class="mt-2 mb-0">
                Sollte ein Benutzer das Formular im nicht-eingeloggten Zustand sehen, so gilt unabhängig von der hier getroffenen Auswahl der Speichermodus "Keine Formulareingaben speichern".<br>
                Hier ist dann lediglich ein E-Mail-Versand der Formulareingaben möglich.
            </p>
        </li>
        <li class="list-group-item mb-0">
            <div class="form-group mb-0">
                <label class="mx-0" for="formular-additional-classes">Zusätzliche CSS-Klassen:</label>
                <input type="text" class="form-control"  id="formular-additional-classes" aria-describedby="formular-additional-classes-helptext" placeholder="CSS-Klassen" value="{{form_css}}">
                <span id="formular-additional-classes-helptext" class="form-text text-muted">
                    Zusätzliche CSS-Klassen, die dem alle Felder umfassenden div-Container gegeben werden sollen. Mehrere Klassen durch Leerzeichen trennen, bspw. "col-sm-12 col-md-6".
                </span>
            </div>
        </li>
    </ul>
    <div class="d-flex justify-content-between w-100">
        <input type="hidden" id="formular-options-id" value="{{id}}">
        <button type="button" class="btn btn-primary my-3" id="backend-form-options-save-button"><i class="fas fa-save"></i>&nbsp;Speichern</button>
        <button type="button" class="btn btn-danger my-3" id="backendDeleteFormData" data-formid="{{ id }}"><i class="fas fa-user-times"></i>&nbsp;Daten löschen</button>
    </div>
</div>
{% include "forms/backend-form-multiform-help-modal.html" %}
{% include "forms/backend-form-sendbymail-help-modal.html" %}
{% include "forms/backend-form-sendreceipt-help-modal.html" %}
{% include "forms/backend-form-submitmanually-help-modal.html" %}
{% include "forms/backend-form-keepdata-help-modal.html" %}
{% include "forms/backend-form-saveonce-help-modal.html" %}
{% include "forms/backend-form-nosave-help-modal.html" %}
{% include "forms/backend-form-normaldata-help-modal.html" %}
{% include "forms/backend-form-delete-data-modal.html" %}
<script>
    jQuery(document).ready(function ($) {
        jQuery(document).on('click', '#publish', function (e) {
            jQuery('#backend-form-options-save-button').click();
        })
    });
</script>