{% if fields|length > 0 %}
    <ul id="sortable-form-fields" class="ts-backend-list mb-0" data-order="{% for field in fields %}{{field.fieldid}}-{%endfor%}">
        {% for field in fields %}
            <li class="ui-state-default mylist" id="li-formfield-{{ field.fieldid }}" data-fieldid="{{ field.fieldid }}">
                <div class="d-flex align-items-center justify-content-between pb-2">
                    <span>
                        {% if field.type == 'input' %}
                            <i class="fas fa-font"></i> Textfeld
                        {% elseif field.type == 'textarea' %}
                            <i class="fas fa-align-justify"></i> Textbox
                        {% elseif field.type == 'select' %}
                            <i class="far fa-caret-square-down"></i> Dropdown
                        {% elseif field.type == 'radio' %}
                            <i class="far fa-dot-circle"></i> Radio-Button
                        {% elseif field.type == 'checkbox' %}
                            <i class="far fa-check-square"></i> Checkbox
                        {% elseif field.type == 'slider' %}
                            <i class="fas fa-sliders-h"></i> Slider
                        {% elseif field.type == 'text' %}
                            <i class="fas fa-paragraph"></i> Text
                        {% elseif field.type == 'scale' %}
                            <i class="fas fa-grip-horizontal"></i> Skala
                        {% elseif field.type == 'matrix' %}
                            <i class="fas fa-th"></i> Matrix
                        {% elseif field.type == 'upload' %}
                            <i class="fas fa-file-upload"></i> Upload
                        {% elseif field.type == 'captcha' %}
                            <i class="fas fa-robot"></i> Captcha
                        {% endif %}
                        (#{{ field.fieldid }})
                    </span>
                    <div>
                        <button type="button" class="btn btn-secondary btn-sm mr-2 backend-formfield-edit" data-fieldid="{{ field.fieldid }}" title="Formularfeld bearbeiten"><i class="fas fa-edit"></i></button>
                        <button type="button" class="btn btn-secondary btn-sm mr-2 backend-formfield-duplicate" data-fieldid="{{ field.fieldid }}" title="Formularfeld duplizieren"><i class="fas fa-copy"></i></button>
                        <button type="button" class="btn btn-danger btn-sm mr-2 backendDeleteFormFieldData" data-formid="{{ id }}" data-fieldid="{{ field.fieldid }}" title="Alle Eingaben für dieses Formularfeld löschen"><i class="fas fa-user-times"></i></button>
                        <button type="button" class="btn btn-danger btn-sm backend-formfield-delete" data-fieldid="{{ field.fieldid }}" data-toggle="modal" data-target="#deleteFormfieldModal" title="Formularfeld löschen"><i class="fas fa-trash-alt"></i></button>
                    </div>
                </div>
                <div class="accordion" id="accordion-{{field.fieldid}}">
                    <div class="card m-0 p-0 mw-100">
                        <div class="card-header py-1 pl-2" id="accordion-heading-{{field.fieldid}}">
                            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-options-{{field.fieldid}}"
                                aria-expanded="false" aria-controls="accordion-options-{{field.fieldid}}">
                                <i class="fas fa-plus ts-accordion-plus"></i>Einstellungen:
                            </button>
                        </div>
                    
                        <div id="accordion-options-{{field.fieldid}}" class="collapse" aria-labelledby="accordion-heading-{{field.fieldid}}" data-parent="#accordion-{{field.fieldid}}">
                            <ul class="list-group p-3">
                                {% for attr_key, attr_value in field.getAttributesJsonDecoded() %}
                                    {% if attr_value is not empty and attr_value is not iterable %}
                                        <li class="list-group-item mb-0">
                                            <b>{{ attr_key|capitalize }}:</b> 
                                            {% if 'type' in attr_key|lower and (field.type == 'text' or field.type == 'scale' or field.type == 'matrix') %}
                                                &lt;{{ attr_value }}&gt;
                                            {% else %} 
                                                {{ attr_value }}
                                            {% endif %}
                                        </li>
                                    {% elseif attr_value is not empty and attr_value is iterable and attr_value|length > 0 %}
                                        <li class="list-group-item mb-0">
                                            <b>{{ attr_key|capitalize }}:</b> 
                                            ({% for a in attr_value %}{% if a.text is not null %}{{ a.text }}{% elseif field.type == 'scale' and a.labelLeft is not empty and a.labelRight is not empty %}{% if a.subheadline is not null and a.subheadline is not empty %}{{ a.subheadline }}: {% endif %}{{ a.labelLeft }} <i class="fas fa-ellipsis-h m-1"></i> {{ a.labelRight }}{% elseif field.type == "matrix" and a.question is not empty %}{{ a.question }}{% endif %}{% if not loop.last %}, {% endif %}{% endfor %})
                                        </li>
                                    {% endif %}
                                {% endfor %}
                                <li class="list-group-item mb-0 p-0 pb-1 list-group-item-secondary"></li> {# separator #}
                                <li class="list-group-item mb-0"><b>Nutzer-Eingaben:</b> {{ field.countSubmissions }}
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
        {% endfor %}
    </ul>
    <div class="modal fade" id="deleteFormfieldModal" tabindex="-1" role="dialog" aria-labelledby="deleteFormfieldModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteFormfieldModalTitle">Formularfeld löschen</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="mb-0">Möchten Sie dieses Formularfeld wirklich löschen?</p>
                    <input type="hidden" id="deleteFormfieldId" value="">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
                    <button type="button" class="btn btn-danger" id="deleteFormfieldConfirmButton">Löschen</button>
                </div>
            </div>
        </div>
    </div>
{% else %}
<div class="alert alert-info" role="alert">
    <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
    <p>
        Es sind noch keine Formularfelder vorhanden.
    </p>
</div>
{% endif %}