<div class="form-group">
    <label class="mb-2 mx-0 mt-0" for="sliderLabel">Label:</label>
    <input type="text" class="form-control newFormFieldInput" id="sliderLabel" placeholder="Label"
        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['label'] }}{% endif %}">
</div>
<div class="form-group">
    <label class="mb-2 mx-0 mt-0" for="sliderMin">Min:</label>
    <input type="number" class="form-control newFormFieldInput" id="sliderMin" placeholder="Min"
        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['min'] }}{% else %}0{% endif %}">
</div>
<div class="form-group">
    <label class="mb-2 mx-0 mt-0" for="sliderMax">Max:</label>
    <input type="number" class="form-control newFormFieldInput" id="sliderMax" placeholder="Max"
        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['max'] }}{% else %}100{% endif %}">
</div>
<div class="form-group">
    <label class="mb-2 mx-0 mt-0" for="sliderStep">Step:</label>
    <input type="number" class="form-control newFormFieldInput" id="sliderStep" placeholder="Step"
        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['step'] }}{% else %}1{% endif %}">
</div>
<div class="accordion" id="sliderAccordion">
    <div class="card m-0 p-0 mw-100">
        <div class="card-header py-1" id="sliderHeading">
            <h6 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#sliderOptions"
                    aria-expanded="false" aria-controls="sliderOptions">
                    <i class="fas fa-plus ts-accordion-plus"></i>Weitere Optionen
                </button>
            </h6>
        </div>
    
        <div id="sliderOptions" class="collapse" aria-labelledby="sliderHeading" data-parent="#sliderAccordion">
            <div class="card-body">
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="sliderLabelPosition">Position des Labels:</label>
                    <select class="form-control newFormFieldInput" size="1" id="sliderLabelPosition">
                        <option value="left" {% if formfield is not null and formfield.getAttributesJsonDecoded['labelPosition'] == "left" %}selected{% endif %}>Linksbündig</option>
                        <option value="center"{% if formfield is not null and formfield.getAttributesJsonDecoded['labelPosition'] == "center" %}selected{% endif %}>Zentriert</option>
                        <option value="right"{% if formfield is not null and formfield.getAttributesJsonDecoded['labelPosition'] == "right" %}selected{% endif %}>Rechtsbündig</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="sliderCss">CSS Klassen:</label>
                    <input type="text" class="form-control newFormFieldInput" id="sliderCss" placeholder="CSS-Klassen"
                        aria-describedby="sliderCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['css'] }}{% endif %}">
                    <small id="sliderCssHelp" 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="sliderParentCss">CSS Klassen für Parent-Container:</label>
                    <input type="text" class="form-control newFormFieldInput" id="sliderParentCss" placeholder="CSS-Klassen"
                        aria-describedby="sliderParentCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['parentcss'] }}{% endif %}">
                    <small id="sliderParentCssHelp" 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="sliderValue">Value:</label>
                    <input type="number" class="form-control newFormFieldInput" id="sliderValue" placeholder="Value"
                        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['value'] }}{% else %}0{% endif %}">
                </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="sliderDisabled" 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="sliderDisabled">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="sliderTooltip" style="margin-top: 0 !important;" 
                        {% if formfield is not null and formfield.getAttributesJsonDecoded['tooltip'] or formfield is null %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="sliderTooltip">Tooltip</label>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="sliderValueLabels">Skalen‑Beschriftungen:</label>
                    <input type="text" class="form-control newFormFieldInput" id="sliderValueLabels" placeholder="z. B.: 0: [thumbs-down]; 5: mittel; 10: [thumbs-up] gut"
                        aria-describedby="sliderValueLabelsHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['valueLabels'] }}{% endif %}">
                    <small id="sliderValueLabelsHelp" class="form-text text-muted">
                        Format: „Wert: Beschriftung | Wert: Beschriftung …“. Separator: „|“ (Semikolon nur als Fallback). Icons: [thumbs-up] oder [fas:thumbs-up].
                        Styles optional in {…}, z. B.: {color:#28a745; font-size:14px} oder {class:text-success}.
                    </small>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="sliderColorSchema">Farbschema:</label>
                    <select id="sliderColorSchema" class="form-control newFormFieldInput">
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['colorschema'] == "" %}selected{% endif %} value="">Kein</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['colorschema'] == "ryg" %}selected{% endif %} value="ryg">Ampel Rot-Gelb-Grün</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['colorschema'] == "gyr" %}selected{% endif %} value="gyr">Ampel Grün-Gelb-Rot</option>
                    </select>
                </div>
                <h6 class="my-4">Profi-Einstellungen</h6>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="sliderTooltipText">Tooltip-Text Funktion:</label>
                    <textarea class="form-control" id="sliderTooltipText" aria-describedby="sliderTooltipTextHelp">{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['tooltipText'] }}{% endif %}</textarea>
                    <small id="sliderTooltipTextHelp" class="form-text text-muted">
                        <b>Achtung, nur fortfahren, wenn Sie wissen, was Sie tun!</b><br>
                        Diese Funktionalität arbeitet nur, wenn Sie den Slider mit der aktivierten Option Tooltip anlegen.<br>
                        Hier können Sie den Inhalt einer jQuery-Funktion definieren, die statt Zahlenwerten eine textuelle Repräsentation im Tooltip ausgibt. Hierzu kann mit <code>if/else if/else</code>-Statements gearbeitet werden.<br>
                        Der numerische Parameter lautet <code>value</code>. Die texteuelle Repräsentation muss mittels <code>return</code> zurückgegeben werden.<br>
                        <b>Beispiel:</b><br>
                        <pre>{# Bitte an dieser Formatierung nichts ändern! #}if(value >= 0 && value <= 33) {
    return "klein";
} else if(value > 33 && value <= 66) {
    return "mittel";
} else {
    return "groß";
}</pre>
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>