{% if formfield.countSubmissions > 0 %}
    <div class="alert alert-info " role="alert">
        <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
        <p>
            Da Nutzende bereits Eingaben in dieser Skala getätigt haben, können Sie keine Fragen löschen oder hinzufügen.<br>
            Sie haben die Möglichkeit dieses Formular zu duplizieren und das Formularfeld im Duplikat zu bearbeiten oder die Nutzereingaben mit einem Klick auf den <button class="btn btn-danger btn-inline btn-sm" type="button"><i class="fas fa-user-times"></i></button>-Button zu entfernen. Gegebenenfalls sollten Sie die Eingaben davor mittels Datenexport exportieren.
        </p>
    </div>
{% endif %}
<div class="form-group">
    <label class="mb-2 mx-0 mt-0" for="scaleHeadline">Überschrift:</label>
    <input type="text" class="form-control newFormFieldInput" id="scaleHeadline" placeholder="Überschrift"
        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['headline'] }}{% endif %}">
</div>
<div class="form-group">
    <label class="mb-2 mx-0 mt-0" for="scaleSelectcount">Anzahl der Auswahlfelder:</label>
    <input type="number" class="form-control newFormFieldInput" id="scaleSelectcount" placeholder="Anzahl" min="2" max="99"
        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['selectCount'] }}{% else %}5{% endif %}">
    <span class="help-text text-danger d-none mt-2">Bitte geben Sie einen Wert zwischen 2 und 99 ein.</span>
</div>
<label class="mb-2 mx-0 mt-0">Optionen:</label>
<div class="clearfix">
    <div class="card card-body p-0 m-0 border-0 mw-100">
        <table id="scaleOptionTable" class="table table-striped table-sm table-hover">
            <thead>
                <th scope="col">&nbsp;</th>
                <th scope="col">Unterüberschrift</th>
                <th scope="col">Label links</th>
                <th scope="col">&nbsp;</th>
                <th scope="col">Label rechts</th>
            </thead>
            <tbody>
                {% for key, element in formfield.getAttributesJsonDecoded['elements'] %}
                    <tr data-rowid="{{ key }}">
                        <td class="align-middle text-center">
                            <button type="button" class="btn btn-danger btn-sm scaleOptionRemove" title="Option löschen" {% if formfield.getAttributesJsonDecoded['elements']|length == 1 or formfield.countSubmissions > 0 %}disabled{% endif %}><i class="fas fa-minus-square"></i></button>
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control scale-option-text newFormFieldInput" placeholder="Unterüberschrift" id="scaleOption-subheadline-{{ key }}" value="{{ element['subheadline'] }}">
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control scale-option-text newFormFieldInput" placeholder="Label links" id="scaleOption-labelLeft-{{ key }}" value="{{ element['labelLeft'] }}">
                        </td>
                        <td class="align-middle text-center">
                            <i class="fas fa-ellipsis-h h1 m-0"></i>
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control scale-option-value newFormFieldInput" placeholder="Label rechts" id="scaleOption-labelRight-{{ key }}" value="{{ element['labelRight'] }}">
                        </td>
                    </tr>
                {% else %} 
                    <tr data-rowid="0">
                        <td class="align-middle text-center">
                            <button type="button" class="btn btn-danger btn-sm scaleOptionRemove" title="Option löschen" disabled><i class="fas fa-minus-square"></i></button>
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control scale-option-text newFormFieldInput" placeholder="Unterüberschrift" id="scaleOption-subheadline-0">
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control scale-option-text newFormFieldInput" placeholder="Label links" id="scaleOption-labelLeft-0">
                        </td>
                        <td class="align-middle text-center">
                            <i class="fas fa-ellipsis-h h1 m-0"></i>
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control scale-option-value newFormFieldInput" placeholder="Label rechts" id="scaleOption-labelRight-0">
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <button class="btn btn-info float-right mb-3 mt-1" type="button" {% if formfield.countSubmissions == 0 %}id="scaleAddOptionButton" {% else %} disabled{% endif %}><i class="fas fa-plus"></i>&nbsp;Hinzufügen</button>
</div>
<div class="accordion" id="scaleAccordion">
    <div class="card m-0 p-0 mw-100">
        <div class="card-header py-1" id="scaleHeading">
            <h6 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#scaleOptions"
                    aria-expanded="false" aria-controls="scaleOptions">
                    <i class="fas fa-plus ts-accordion-plus"></i>Weitere Optionen
                </button>
            </h6>
        </div>
    
        <div id="scaleOptions" class="collapse" aria-labelledby="scaleHeading" data-parent="#scaleAccordion">
            <div class="card-body">
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="scaleHeadlinePosition">Position der Überschrift:</label>
                    <select class="form-control newFormFieldInput" size="1" id="scaleHeadlinePosition">
                        <option value="left" {% if formfield is not null and formfield.getAttributesJsonDecoded['headlinePosition'] == "left" %}selected{% endif %}>Linksbündig</option>
                        <option value="center"{% if formfield is not null and formfield.getAttributesJsonDecoded['headlinePosition'] == "center" %}selected{% endif %}>Zentriert</option>
                        <option value="right"{% if formfield is not null and formfield.getAttributesJsonDecoded['headlinePosition'] == "right" %}selected{% endif %}>Rechtsbündig</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="scaleHeadlineType">HTML-Element der Überschrift:</label>
                    <select class="form-control newFormFieldInput" id="scaleHeadlineType">
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "p" %}selected{% endif %} value="p">&lt;p&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "h1" %}selected{% endif %} value="h1">&lt;h1&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "h2" %}selected{% endif %} value="h2">&lt;h2&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "h3" %}selected{% endif %} value="h3">&lt;h3&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "h4" %}selected{% endif %} value="h4">&lt;h4&gt;</option>
                        <option {% if (formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "h5") or formfield is null %}selected{% endif %} value="h5">&lt;h5&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "h6" %}selected{% endif %} value="h6">&lt;h6&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "small" %}selected{% endif %} value="small">&lt;small&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "b" %}selected{% endif %} value="b">&lt;b&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "i" %}selected{% endif %} value="i">&lt;i&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['headlineType'] == "span" %}selected{% endif %} value="span">&lt;span&gt;</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="scaleHeadlineCss">CSS Klassen für Überschrift:</label>
                    <input type="text" class="form-control newFormFieldInput" id="scaleHeadlineCss" placeholder="CSS-Klassen"
                        aria-describedby="scaleHeadlineCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['headlineCss'] }}{% endif %}">
                    <small id="scaleHeadlineCssHelp" class="form-text text-muted">Mehrere Klassen durch Leerzeichen getrennt.
                        Beispielsweise &laquo;col-12 col-md-6&raquo;</small>
                </div>
                <hr>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="scaleSubheadlinePosition">Position der Unterüberschrift:</label>
                    <select class="form-control newFormFieldInput" size="1" id="scaleSubheadlinePosition">
                        <option value="left" {% if formfield is not null and formfield.getAttributesJsonDecoded['subheadlinePosition'] == "left" %}selected{% endif %}>Linksbündig</option>
                        <option value="center"{% if formfield is not null and formfield.getAttributesJsonDecoded['subheadlinePosition'] == "center" %}selected{% endif %}>Zentriert</option>
                        <option value="right"{% if formfield is not null and formfield.getAttributesJsonDecoded['subheadlinePosition'] == "right" %}selected{% endif %}>Rechtsbündig</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="scaleSubheadlineType">HTML-Element der Unterüberschrift:</label>
                    <select class="form-control newFormFieldInput" id="scaleSubheadlineType">
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['subheadlineType'] == "p" %}selected{% endif %} value="p">&lt;p&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['subheadlineType'] == "h1" %}selected{% endif %} value="h1">&lt;h1&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['subheadlineType'] == "h2" %}selected{% endif %} value="h2">&lt;h2&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['subheadlineType'] == "h3" %}selected{% endif %} value="h3">&lt;h3&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['subheadlineType'] == "h4" %}selected{% endif %} value="h4">&lt;h4&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['subheadlineType'] == "h5" %}selected{% endif %} value="h5">&lt;h5&gt;</option>
                        <option {% if (formfield is not null and formfield.getAttributesJsonDecoded['subheadlineType'] == "h6") or formfield is null %}selected{% endif %} value="h6">&lt;h6&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['subheadlineType'] == "small" %}selected{% endif %} value="small">&lt;small&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['subheadlineType'] == "b" %}selected{% endif %} value="b">&lt;b&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['subheadlineType'] == "i" %}selected{% endif %} value="i">&lt;i&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['subheadlineType'] == "span" %}selected{% endif %} value="span">&lt;span&gt;</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="scaleSubheadlineCss">CSS Klassen für Unterüberschriften:</label>
                    <input type="text" class="form-control newFormFieldInput" id="scaleSubheadlineCss" placeholder="CSS-Klassen"
                        aria-describedby="scaleSubheadlineCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['subheadlineCss'] }}{% endif %}">
                    <small id="scaleSubheadlineCssHelp" class="form-text text-muted">Mehrere Klassen durch Leerzeichen getrennt.
                        Beispielsweise &laquo;col-12 col-md-6&raquo;</small>
                </div>
                <hr>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="scaleLabelLeftPosition">Position des linken Labels:</label>
                    <select class="form-control newFormFieldInput" size="1" id="scaleLabelLeftPosition">
                        <option value="left" {% if formfield is not null and formfield.getAttributesJsonDecoded['labelLeftPosition'] == "left" %}selected{% endif %}>Linksbündig</option>
                        <option value="center"{% if formfield is not null and formfield.getAttributesJsonDecoded['labelLeftPosition'] == "center" %}selected{% endif %}>Zentriert</option>
                        <option value="right"{% if (formfield is not null and formfield.getAttributesJsonDecoded['labelLeftPosition'] == "right") or formfield is null %}selected{% endif %}>Rechtsbündig</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="scaleLabelRightPosition">Position des rechten Labels:</label>
                    <select class="form-control newFormFieldInput" size="1" id="scaleLabelRightPosition">
                        <option value="left" {% if formfield is not null and formfield.getAttributesJsonDecoded['labelRightPosition'] == "left" %}selected{% endif %}>Linksbündig</option>
                        <option value="center"{% if formfield is not null and formfield.getAttributesJsonDecoded['labelRightPosition'] == "center" %}selected{% endif %}>Zentriert</option>
                        <option value="right"{% if formfield is not null and formfield.getAttributesJsonDecoded['labelRightPosition'] == "right" %}selected{% endif %}>Rechtsbündig</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="scaleLabelType">HTML-Element der Labels:</label>
                    <select class="form-control newFormFieldInput" id="scaleLabelType">
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['labelType'] == "p" %}selected{% endif %} value="p">&lt;p&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['labelType'] == "h1" %}selected{% endif %} value="h1">&lt;h1&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['labelType'] == "h2" %}selected{% endif %} value="h2">&lt;h2&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['labelType'] == "h3" %}selected{% endif %} value="h3">&lt;h3&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['labelType'] == "h4" %}selected{% endif %} value="h4">&lt;h4&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['labelType'] == "h5" %}selected{% endif %} value="h5">&lt;h5&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['labelType'] == "h6" %}selected{% endif %} value="h6">&lt;h6&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['labelType'] == "small" %}selected{% endif %} value="small">&lt;small&gt;</option>
                        <option {% if (formfield is not null and formfield.getAttributesJsonDecoded['labelType'] == "b") or formfield is null %}selected{% endif %} value="b">&lt;b&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['labelType'] == "i" %}selected{% endif %} value="i">&lt;i&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['labelType'] == "span" %}selected{% endif %} value="span">&lt;span&gt;</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="scaleLabelCss">CSS Klassen für die Label:</label>
                    <input type="text" class="form-control newFormFieldInput" id="scaleLabelCss" placeholder="CSS-Klassen"
                        aria-describedby="scaleLabelCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['labelCss'] }}{% endif %}">
                    <small id="scaleLabelCssHelp" class="form-text text-muted">Mehrere Klassen durch Leerzeichen getrennt.
                        Beispielsweise &laquo;col-12 col-md-6&raquo;</small>
                </div>
                <div class="form-check pl-0 mb-2 d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="scalenumberLabels" style="margin-top: 0 !important;"
                        {% if formfield is null or formfield.getAttributesJsonDecoded['numberLabels'] %}checked{% endif %} {% if formfield is not null and formfield.getAttributesJsonDecoded['visualInput'] != "default" %}disabled{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="scalenumberLabels">Zahlen als Label für die Input-Elemente hinzufügen</label>
                </div>
                <div class="form-group mt-3">
                    <label class="mb-2 mx-0 mt-0" for="scaleVisualInput">Grafische Dateneingabe:</label>
                    <select class="form-control newFormFieldInput" size="1" id="scaleVisualInput">
                        <option value="default" {% if formfield is not null and formfield.getAttributesJsonDecoded['visualInput'] == "default" %}selected{% endif %}>Standard</option>
                        <option value="stars"{% if formfield is not null and formfield.getAttributesJsonDecoded['visualInput'] == "stars" %}selected{% endif %}>Sterne</option>
                        <option value="smileys"{% if formfield is not null and formfield.getAttributesJsonDecoded['visualInput'] == "smileys" %}selected{% endif %}>Smileys</option>
                        <option value="numberboxes"{% if formfield is not null and formfield.getAttributesJsonDecoded['visualInput'] == "numberboxes" %}selected{% endif %}>Boxen mit Zahlen</option>
                    </select>
                </div>
                <hr>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="scaleTableCss">CSS Klassen für Tabelle:</label>
                    <input type="text" class="form-control newFormFieldInput" id="scaleTableCss" placeholder="CSS-Klassen"
                        aria-describedby="scaleTableCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['tableCss'] }}{% endif %}">
                    <small id="scaleTableCssHelp" class="form-text text-muted">Mehrere Klassen durch Leerzeichen getrennt.
                        Beispielsweise &laquo;col-12 col-md-6&raquo;</small>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="scaleParentCss">CSS Klassen für Parent-Container:</label>
                    <input type="text" class="form-control newFormFieldInput" id="scaleParentCss" placeholder="CSS-Klassen"
                        aria-describedby="scaleParentCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['parentCss'] }}{% endif %}">
                    <small id="scaleParentCssHelp" class="form-text text-muted">Mehrere Klassen durch Leerzeichen getrennt.
                        Beispielsweise &laquo;col-12 col-md-6&raquo;</small>
                </div>
                <div class="form-check pl-0 mb-2 d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="scaleStriped" style="margin-top: 0 !important;"
                        {% if formfield is not null and formfield.getAttributesJsonDecoded['striped'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="scaleStriped">Gestreifte Tabelle</label>
                </div>
                <div class="form-check pl-0 mb-2 d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="scaleBorder" style="margin-top: 0 !important;"
                        {% if formfield is not null and formfield.getAttributesJsonDecoded['border'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="scaleBorder">Tabelle mit Rahmen</label>
                </div>
                <div class="form-check pl-0 mb-2 d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="scaleHover" style="margin-top: 0 !important;"
                        {% if formfield is not null and formfield.getAttributesJsonDecoded['hover'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="scaleHover">Tabelle mit Hover-Effekt</label>
                </div>
                <div class="form-check pl-0 mb-2 d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="scaleSmall" style="margin-top: 0 !important;"
                        {% if formfield is not null and formfield.getAttributesJsonDecoded['small'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="scaleSmall">Schmale Tabelle</label>
                </div>                
                <div class="form-check pl-0 mb-2 d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="scaleDisabled" style="margin-top: 0 !important;"
                        {% if formfield is not null and formfield.getAttributesJsonDecoded['disabled'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="scaleDisabled">Disabled</label>
                </div>
                <div class="form-check pl-0 mb-2 d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="scaleRequired" style="margin-top: 0 !important;"
                        {% if formfield is null or formfield.getAttributesJsonDecoded['required'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="scaleRequired">Required</label>
                </div>
            </div>
        </div>
    </div>
</div>