<div class="form-group">
    <label class="mb-2 mx-0 mt-0" for="checkboxLabel">Label:</label>
    <input type="text" class="form-control newFormFieldInput" id="checkboxLabel" 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="checkboxValue">Value:</label>
    <input type="text" class="form-control newFormFieldInput" id="checkboxValue" placeholder="Value"
        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['value'] }}{% endif %}">
</div>
<div class="accordion" id="checkboxAccordion">
    <div class="card m-0 p-0 mw-100">
        <div class="card-header py-1" id="checkboxHeading">
            <h6 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#checkboxOptions"
                    aria-expanded="false" aria-controls="checkboxOptions">
                    <i class="fas fa-plus ts-accordion-plus"></i>Weitere Optionen
                </button>
            </h6>
        </div>
    
        <div id="checkboxOptions" class="collapse" aria-labelledby="checkboxHeading" data-parent="#checkboxAccordion">
            <div class="card-body">
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="checkboxLabelPosition">Position des Labels:</label>
                    <select class="form-control newFormFieldInput" size="1" id="checkboxLabelPosition" aria-describedby="checkboxLabelPositionHelp">
                        <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>
                    <small id="checkboxLabelPositionHelp" class="form-text text-muted">Die Label-Position hat keinen Einfluss, wenn die Inline-Option aktiviert ist.</small>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="checkboxCss">CSS Klassen:</label>
                    <input type="text" class="form-control newFormFieldInput" id="checkboxCss" placeholder="CSS-Klassen"
                        aria-describedby="checkboxCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['css'] }}{% endif %}">
                    <small id="checkboxCssHelp" 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="checkboxParentCss">CSS Klassen für Parent-Container:</label>
                    <input type="text" class="form-control newFormFieldInput" id="checkboxParentCss" placeholder="CSS-Klassen"
                        aria-describedby="checkboxParentCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['parentcss'] }}{% endif %}">
                    <small id="checkboxParentCssHelp" 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="checkboxDisabled" 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="checkboxDisabled">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="checkboxSelected" style="margin-top: 0 !important;"
                        {% if formfield is not null and formfield.getAttributesJsonDecoded['selected'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="checkboxSelected">Selected</label>
                </div>
                <div class="form-check pl-0 d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="checkboxInline" style="margin-top: 0 !important;" 
                        aria-describedby="checkboxInlineHelp" {% if formfield is not null and formfield.getAttributesJsonDecoded['inline'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="checkboxInline">Inline</label>
                </div>
                <small id="checkboxInlineHelp" class="form-text text-muted">Hiermit können mehrere Checkboxen in einer Zeile angezeigt werden.<br>
                    <b>Achtung:</b> Dazu müssen die Checkboxen in der Sortierung direkt aufeinander folgen und alle das Attribut Inline haben.</small>
            </div>
        </div>
    </div>
</div>