{% if not is_multiform %}
    <div id="ts-forms-scale-{{ field.fieldid }}" class="form-group {{ field.getAttributesJsonDecoded()['parentCss'] }}">
        {% if field.getAttributesJsonDecoded()['headline'] is not empty %}
            <{{ field.getAttributesJsonDecoded()['headlineType'] }} class="w-100 {{ field.getAttributesJsonDecoded()['headlineCss'] }}
            {% if field.getAttributesJsonDecoded()['headlinePosition'] == "center" %}text-center{% elseif field.getAttributesJsonDecoded()['headlinePosition'] == "right"%}text-right{% else %}text-left{% endif %}
            ">{{ field.getAttributesJsonDecoded()['headline'] }}
            </{{ field.getAttributesJsonDecoded()['headlineType'] }}>
        {% endif %}
        <table class="table {{ field.getAttributesJsonDecoded()['tableCss'] }}
        {% if field.getAttributesJsonDecoded()['striped'] %}table-striped {% endif %}
        {% if field.getAttributesJsonDecoded()['border'] %}table-bordered {% endif %}
        {% if field.getAttributesJsonDecoded()['hover'] %}table-hover {% endif %}
        {% if field.getAttributesJsonDecoded()['small'] %}table-sm {% endif %}
        ">
            {% for key, el in field.getAttributesJsonDecoded()['elements'] %}
                {% if el['subheadline'] is not empty %}
                    <tr>
                        <td colspan="{% if el['labelLeft'] is not empty and el['labelRight'] is not empty %}3{% elseif el['labelLeft'] is not empty or el['labelRight'] is not empty %}2{% else %}1{% endif %}" class="align-middle">
                            <{{ field.getAttributesJsonDecoded()['subheadlineType'] }} class="w-100 m-0 {{ field.getAttributesJsonDecoded()['subheadlineCss'] }}
                            {% if field.getAttributesJsonDecoded()['subheadlinePosition'] == "center" %}text-center{% elseif field.getAttributesJsonDecoded()['subheadlinePosition'] == "right"%}text-right{% else %}text-left{% endif %}
                            ">{{ el['subheadline'] }}
                            </{{ field.getAttributesJsonDecoded()['subheadlineType'] }}>
                        </td>
                    </tr>
                {% endif %}
                    <tr class="scaleTrData" data-row="{{ (key+1) }}">
                        {% if el['labelLeft'] is not empty %}
                            <td class="align-middle {% if field.getAttributesJsonDecoded()['labelLeftPosition'] == "center" %}text-center{% elseif field.getAttributesJsonDecoded()['labelLeftPosition'] == "right"%}text-right{% else %}text-left{% endif %}">
                                <{{ field.getAttributesJsonDecoded()['labelType'] }} class="m-0 {{ field.getAttributesJsonDecoded()['labelCss'] }}
                                ">{{ el['labelLeft'] }}
                                </{{ field.getAttributesJsonDecoded()['labelType'] }}>
                            </td>
                        {% endif %}
                        <td class="align-middle">
                            <div class="d-flex justify-content-between align-items-center">
                                {% for i in 1..field.getAttributesJsonDecoded()['selectCount'] %}
                                    {% if field.getAttributesJsonDecoded()['numberLabels'] %}
                                    <div class="form-check d-flex align-items-center visualInput-{{field.getAttributesJsonDecoded()['visualInput']}}">
                                        <input type="radio" class="ts-forms-element{% if submitmanually %}-{{ formid }}{% endif %} m-0 p-0"
                                        name="tsform-field-{{ field.fieldid }}-{{ key }}" 
                                        id="tsform-field-{{ field.fieldid }}-{{ key }}-{{ i }}" 
                                        value="{{ i }}"
                                        data-fieldid="{{ field.fieldid }}"
                                        data-scale="true"
                                        data-optionid="{{ key }}"
                                        {% if field.getAttributesJsonDecoded()['required'] %}
                                            required
                                        {% endif %}
                                        {% if field.getAttributesJsonDecoded()['disabled'] or usermodus or saveOnceDisable %}
                                            disabled
                                        {% endif %}
                                        {% if field.getFormdata() is not empty and field.getFormdata().dataIsArray() and field.getFormdata().getDataJsonDecoded()[key] == i  and not keepdata %}
                                            checked
                                        {% endif %}
                                        >
                                        <label for="tsform-field-{{ field.fieldid }}-{{ key }}-{{ i }}" class="form-check-label ts-forms-label ml-2">{{i}}</label>
                                    </div>
                                    {% elseif field.getAttributesJsonDecoded()['visualInput'] == "stars" %}
                                    <div class="form-check d-flex align-items-center visualInput-{{field.getAttributesJsonDecoded()['visualInput']}}">
                                        <input type="radio" class="ts-forms-element{% if submitmanually %}-{{ formid }}{% endif %} m-0 p-0"
                                        name="tsform-field-{{ field.fieldid }}-{{ key }}" 
                                        id="tsform-field-{{ field.fieldid }}-{{ key }}-{{ i }}" 
                                        value="{{ i }}"
                                        data-fieldid="{{ field.fieldid }}"
                                        data-scale="true"
                                        data-optionid="{{ key }}"
                                        {% if field.getAttributesJsonDecoded()['required'] %}
                                            required
                                        {% endif %}
                                        {% if field.getAttributesJsonDecoded()['disabled'] or usermodus or saveOnceDisable %}
                                            disabled
                                        {% endif %}
                                        {% if field.getFormdata() is not empty and field.getFormdata().dataIsArray() and field.getFormdata().getDataJsonDecoded()[key] == i  and not keepdata %}
                                            checked            
                                        {% endif %}
                                        ><label for="tsform-field-{{ field.fieldid }}-{{ key }}-{{ i }}" class="form-check-label ts-forms-label ml-2"><i class="far fa-star {% if field.getFormdata() is not empty and field.getFormdata().dataIsArray() and field.getFormdata().getDataJsonDecoded()[key] >= i %} visualInput-stars-selected {% endif %}"></i></label>
                                    </div>
                                    {% elseif field.getAttributesJsonDecoded()['visualInput'] == "smileys" and field.getAttributesJsonDecoded()['selectCount'] == scale_smileys|length  %}
                                    <div class="form-check d-flex align-items-center visualInput-{{field.getAttributesJsonDecoded()['visualInput']}}">
                                        <input type="radio" class="ts-forms-element{% if submitmanually %}-{{ formid }}{% endif %} m-0 p-0"
                                        name="tsform-field-{{ field.fieldid }}-{{ key }}" 
                                        id="tsform-field-{{ field.fieldid }}-{{ key }}-{{ i }}" 
                                        value="{{ i }}"
                                        data-fieldid="{{ field.fieldid }}"
                                        data-scale="true"
                                        data-optionid="{{ key }}"
                                        {% if field.getAttributesJsonDecoded()['required'] %}
                                            required
                                        {% endif %}
                                        {% if field.getAttributesJsonDecoded()['disabled'] or usermodus or saveOnceDisable %}
                                            disabled
                                        {% endif %}
                                        {% if field.getFormdata() is not empty and field.getFormdata().dataIsArray() and field.getFormdata().getDataJsonDecoded()[key] == i  and not keepdata %}
                                            checked
                                        {% endif %}
                                        ><label for="tsform-field-{{ field.fieldid }}-{{ key }}-{{ i }}" class="form-check-label ts-forms-label ml-2"><i class="{{scale_smileys[i-1]}}"></i></label>
                                    </div>
                                    {% else %}
                                        <input type="radio" class="ts-forms-element{% if submitmanually %}-{{ formid }}{% endif %} m-0 p-0 ts-forms-scale-nonvisual"
                                        name="tsform-field-{{ field.fieldid }}-{{ key }}" 
                                        id="tsform-field-{{ field.fieldid }}-{{ key }}-{{ i }}" 
                                        value="{{ i }}"
                                        data-fieldid="{{ field.fieldid }}"
                                        data-scale="true"
                                        data-optionid="{{ key }}"
                                        {% if field.getAttributesJsonDecoded()['required'] %}
                                            required
                                        {% endif %}
                                        {% if field.getAttributesJsonDecoded()['disabled'] or usermodus or saveOnceDisable %}
                                            disabled
                                        {% endif %}
                                        {% if field.getFormdata() is not empty and field.getFormdata().dataIsArray() and field.getFormdata().getDataJsonDecoded()[key] == i  and not keepdata %}
                                            checked
                                        {% endif %}
                                        >
                                    {% endif %}
                                {% endfor %}
                            </div>
                            {% if field.getAttributesJsonDecoded()['required'] %}
                                <div class="help-block text-danger d-none mt-2">Eine Option muss gewählt werden.</div>
                            {% endif %}
                        </td>
                        {% if el['labelRight'] is not empty %}
                            <td class="align-middle {% if field.getAttributesJsonDecoded()['labelRightPosition'] == "center" %}text-center{% elseif field.getAttributesJsonDecoded()['labelRightPosition'] == "right"%}text-right{% else %}text-left{% endif %}">
                                <{{ field.getAttributesJsonDecoded()['labelType'] }} class="m-0 {{ field.getAttributesJsonDecoded()['labelCss'] }}
                                ">{{ el['labelRight'] }}
                                </{{ field.getAttributesJsonDecoded()['labelType'] }}>
                            </td>
                        {% endif %}
                    </tr>
            {% endfor %}
        </table>
        {% 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>
{% else %}
    <div class="alert alert-danger" role="alert">
        <h5><i class="fas fa-times-circle"></i>&nbsp;Fehler</h5>
        <p>
            Der Formularfeld-Typ Skala ist nicht für die Verwendung mit MultiForms vorgesehen!<br>
            Deaktivieren Sie die Option MultiForm für das Formular #{{ formid }} in den Einstellungen im WordPress Backend.
        </p>
    </div>
{% endif %}