<div class="form-group {{ field.getAttributesJsonDecoded()['parentcss'] }} {% if is_multiform and multiform_orientation == 'next' %}col px-1{% endif %}">
    {% if field.getAttributesJsonDecoded()['label'] is not empty %}
        <label for="tsform-field-{{ field.fieldid }}-{{ index }}" class="ts-forms-label w-100 
        {% if field.getAttributesJsonDecoded()['labelPosition'] == "center" %}text-center{% elseif field.getAttributesJsonDecoded()['labelPosition'] == "right"%}text-right{% else %}text-left{% endif %}"
        >{{ field.getAttributesJsonDecoded()['label'] }}</label>
    {% endif %}
    <select id="tsform-field-{{ field.fieldid }}-{{ index }}"
    size="{{ field.getAttributesJsonDecoded()['size'] }}"
    class="ts-forms-element{% if submitmanually %}-{{ formid }}{% endif %} custom-select {{ field.getAttributesJsonDecoded()['css'] }}"
    data-fieldid="{{ field.fieldid }}"

    {% if field.getAttributesJsonDecoded()['required'] %}
        required
    {% endif %}
    {% if field.getAttributesJsonDecoded()['disabled'] or usermodus or saveOnceDisable %}
        disabled
    {% endif %}
    {% if field.getAttributesJsonDecoded()['multiple'] %}
        multiple
    {% endif %}
    >
    {% set elementfound = false %}
    {% if not field.getFormData().dataIsArray() %}
        {% for el in field.getAttributesJsonDecoded()['elements'] %}
            {% if el['value'] is not empty and el['text'] is not empty %}
                <option value="{{ el['value'] }}" 
                    {% if (field.getFormdata() is empty and el['selected']) or (field.getFormdata() is not empty and field.getFormdata().getData() == el['value'] and not keepdata) %}
                        selected
                    {% endif %}
                >{{ el['text'] }}</option>
                {% set elementfound = true %}
            {% endif %}
        {% endfor %}
    {% else %}
        {% for el in field.getAttributesJsonDecoded()['elements'] %}
            {% if el['value'] is not empty and el['text'] is not empty %}
                <option value="{{ el['value'] }}" 
                    {% if (field.getFormdata() is empty and el['selected']) or el['value'] in field.getFormdata().getDataJsonDecoded() and not keepdata %}
                        selected
                    {% endif %}
                >{{ el['text'] }}</option>
                {% set elementfound = true %}
            {% endif %}
        {% endfor %}
    {% endif %}
    {% if field.getAttributesJsonDecoded()['useradd'] and not elementfound %}
        <option value></option>
    {% endif %}
    {% if field.getAttributesJsonDecoded()['useradd'] %}
        <option value="tsform-field-{{ field.fieldid }}-{{ index }}-useradd">Eintrag hinzufügen</option>
    {% endif %}
    </select>

    {% if field.getAttributesJsonDecoded()['useradd'] %}
        <script>
            jQuery(document).on('change', '#tsform-field-{{ field.fieldid }}-{{ index }}', function (e) {
                if(jQuery(this).val() == "tsform-field-{{ field.fieldid }}-{{ index }}-useradd" || (Array.isArray(jQuery(this).val()) && jQuery.inArray( "tsform-field-{{ field.fieldid }}-{{ index }}-useradd", jQuery(this).val()) !== -1)) {
                    jQuery('#tsform-field-{{ field.fieldid }}-{{ index }}-useradd-modal').modal();
                }
            });

            jQuery(document).on('shown.bs.modal', '#tsform-field-{{ field.fieldid }}-{{ index }}-useradd-modal', function (e) {
                jQuery('#tsform-field-{{ field.fieldid }}-{{ index }}-useradd-modal-input').focus();
            });

            jQuery(document).on('click', '#tsform-field-{{ field.fieldid }}-{{ index }}-useradd-modal-confirm', function (e) {
                if(jQuery('#tsform-field-{{ field.fieldid }}-{{ index }} option').length == 2 && 
                        jQuery('#tsform-field-{{ field.fieldid }}-{{ index }} option').first().val() == "" && 
                        jQuery('#tsform-field-{{ field.fieldid }}-{{ index }} option').first().html() == "") {
                    jQuery('#tsform-field-{{ field.fieldid }}-{{ index }} option').first().remove();
                }
                var input = jQuery('#tsform-field-{{ field.fieldid }}-{{ index }}-useradd-modal-input').val();
                if(jQuery("#tsform-field-{{ field.fieldid }}-{{ index }} option[value='"+input+"']").length == 0 && input.trim() != "") {
                    jQuery('#tsform-field-{{ field.fieldid }}-{{ index }}').prepend(jQuery('<option>', {
                        value: input,
                        text: input
                    }));
                    jQuery('#tsform-field-{{ field.fieldid }}-{{ index }} option').removeAttr("selected");
                    jQuery("#tsform-field-{{ field.fieldid }}-{{ index }} option[value='"+input+"']").attr("selected", "selected");
                    jQuery('#tsform-field-{{ field.fieldid }}-{{ index }}-useradd-modal').modal('hide');
                } else { // duplicate
                    jQuery('#tsform-field-{{ field.fieldid }}-{{ index }}-useradd-modal-input').addClass('is-invalid');
                    jQuery('#tsform-field-{{ field.fieldid }}-{{ index }}-useradd-modal-input').parent().find('span.invalid-feedback').addClass('d-block');
                }
            });

            jQuery(document).on('keydown', '#tsform-field-{{ field.fieldid }}-{{ index }}-useradd-modal-input', function (e) {
                if(jQuery(this).hasClass('is-invalid')) {
                    jQuery(this).removeClass('is-invalid');
                    jQuery(this).parent().find('span.invalid-feedback').removeClass('d-block');
                }
            })

            jQuery(document).on('hidden.bs.modal', '#tsform-field-{{ field.fieldid }}-{{ index }}-useradd-modal', function (e) {
                jQuery('#tsform-field-{{ field.fieldid }}-{{ index }}-useradd-modal-input').val('');
                if(jQuery("#tsform-field-{{ field.fieldid }}-{{ index }}").val() == "tsform-field-{{ field.fieldid }}-{{ index }}-useradd") {
                    jQuery("#tsform-field-{{ field.fieldid }}-{{ index }}").val(jQuery("#tsform-field-{{ field.fieldid }}-{{ index }} option").first().val());
                }
            });

            jQuery(document).on('keydown', '#tsform-field-{{ field.fieldid }}-{{ index }}-useradd-modal-input', function(e) {
                if(e.which == 13) {
                    jQuery('#tsform-field-{{ field.fieldid }}-{{ index }}-useradd-modal-confirm').click();
                    e.preventDefault();
                    return false;
                }
            });
        </script>
        <div class="modal fade" id="tsform-field-{{ field.fieldid }}-{{ index }}-useradd-modal" tabindex="-1" role="dialog" aria-labelledby="tsform-field-{{ field.fieldid }}-{{ index }}-useradd-modal-label" aria-hidden="true">
            <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="tsform-field-{{ field.fieldid }}-{{ index }}-useradd-modal-label">Eintrag hinzufügen</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="mb-2 mx-0 mt-0" for="tsform-field-{{ field.fieldid }}-{{ index }}-useradd-modal-input">Neuer Eintrag:</label>
                            <input type="text" class="form-control" id="tsform-field-{{ field.fieldid }}-{{ index }}-useradd-modal-input" placeholder="Eintrag">
                            <span class="invalid-feedback d-none">Dieser Eintrag ist bereits vorhanden. Bitte wählen Sie einen anderen Namen.</span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary float-left" data-dismiss="modal">Abbrechen</button>
                        <button type="button" class="btn btn-primary" id="tsform-field-{{ field.fieldid }}-{{ index }}-useradd-modal-confirm">Eintrag hinzufügen</button>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
    {% if field.getAttributesJsonDecoded()['required'] %}
        <span class="help-block text-danger d-none">Dieses Feld muss ausgefüllt werden.</span>
    {% endif %}
    {% if saveOnceDisable %} 
        <span class="help-block text-muted">Sie haben dieses Formular am {{ saveOnceDate|date("d.m.Y") }} um {{ saveOnceDate|date("H:i") }} Uhr bereits gespeichert.</span>
    {% endif %}
</div>