{% set radioselected = false %}
{% for element in formfield.getAttributesJsonDecoded['elements'] %}
    {% if element['selected'] %}
        {% set radioselected = true %}
   {% endif %} 
{% endfor %}
<div class="form-group">
    <label class="mb-2 mx-0 mt-0" for="radioTitle">Titel:</label>
    <input type="text" class="form-control newFormFieldInput" id="radioTitle" placeholder="Titel"
        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['title'] }}{% endif %}">
</div>
<div id="radioButtonsSelectOne" class="form-check pl-0 mb-2 d-none">
    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="radioNoneSelected" style="margin-top: 0 !important;" {% if radioselected %}checked{% endif%}>
    <label class="form-check-label m-0" for="radioNoneSelected">Einen Radio-Button vorauswählen</label>
</div>
<label class="mb-2 mx-0 mt-0">Radio-Buttons:</label>
<button type="button" class="btn btn-sm btn-secondary float-right" id="radioButtonProButton"><i class="fas fa-plus-square"></i></button>
<div class="clearfix">
    <div class="card card-body p-0 m-0 border-0 mw-100">
        <table id="radioButtonsTable" class="table table-striped table-sm table-hover">
            <thead>
                <th scope="col">&nbsp;</th>
                <th class="align-top" scope="col">Label</th>
                <th class="align-top" scope="col">Value</th>
                <th class="align-top" scope="col">Disabled</th>
                <th class="align-top" scope="col">Ausgewählt</th>
                <th class="align-top" scope="col">CSS-Klassen<br><small class="form-text text-muted">Mehrere Klassen durch Leerzeichen getrennt.
                    Beispielsweise &laquo;col-12 col-md-6&raquo;</small></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-sm btn-danger radioButtonRemove" title="Radio-Button löschen" {% if formfield.getAttributesJsonDecoded['elements']|length == 1 %}disabled{% endif %}><i class="fas fa-minus-square"></i></button>
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control radiobutton-text newFormFieldInput" placeholder="Text" id="radioButton-text-{{ key }}" value="{{ element['text'] }}">
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control radiobutton-value newFormFieldInput" placeholder="Value" id="radioButton-value-{{ key }}" value="{{ element['value'] }}">
                        </td>
                        <td class="align-middle text-center">
                            <input type="checkbox" class="form-check-input position-relative m-0 radiobutton-disabled newFormFieldInput" id="radioButton-disabled-{{ key }}" 
                                style="margin-top: 0 !important;" {% if element['disabled'] %}checked{% endif %}>
                        </td>
                        <td class="align-middle text-center">
                            <input type="radio" class="form-check-input position-relative m-0 radiobutton-selected newFormFieldInput" id="radioButton-selected-{{ key }}" 
                                name="newRadiobuttonSelected" {% if not radioselected %}disabled{% elseif element['selected'] %}checked{% endif %} style="margin-top: 0 !important;">
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control radiobutton-css newFormFieldInput" placeholder="CSS-Klassen" id="radioButton-css-{{ key }}" value="{{ element['css'] }}">
                        </td>
                    </tr>
                {% else %}
                    <tr data-rowid="0">
                        <td class="align-middle text-center">
                            <button type="button" class="btn btn-sm btn-danger radioButtonRemove" title="Radio-Button löschen" disabled><i class="fas fa-minus-square"></i></button>
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control radiobutton-text newFormFieldInput" placeholder="Text" id="radioButton-text-0">
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control radiobutton-value newFormFieldInput" placeholder="Value" id="radioButton-value-0">
                        </td>
                        <td class="align-middle text-center">
                            <input type="checkbox" class="form-check-input position-relative m-0 radiobutton-disabled newFormFieldInput" id="radioButton-disabled-0" style="margin-top: 0 !important;">
                        </td>
                        <td class="align-middle text-center">
                            <input type="radio" class="form-check-input position-relative m-0 radiobutton-selected newFormFieldInput" id="radioButton-selected-0" 
                                name="newRadiobuttonSelected" disabled style="margin-top: 0 !important;">
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control radiobutton-css newFormFieldInput" placeholder="CSS-Klassen" id="radioButton-css-0">
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <button class="btn btn-info float-right mb-3 mt-1" type="button" id="radioButtonAddButton"><i class="fas fa-plus"></i>&nbsp;Hinzufügen</button>
</div>
<div class="accordion" id="radioAccordion">
    <div class="card m-0 p-0 mw-100">
        <div class="card-header py-1" id="radioHeading">
            <h6 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#radioOptions"
                    aria-expanded="false" aria-controls="radioOptions">
                    <i class="fas fa-plus ts-accordion-plus"></i>Weitere Optionen
                </button>
            </h6>
        </div>
    
        <div id="radioOptions" class="collapse" aria-labelledby="radioHeading" data-parent="#radioAccordion">
            <div class="card-body">
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="radioLabelPosition">Position des Labels:</label>
                    <select class="form-control newFormFieldInput" size="1" id="radioLabelPosition" aria-describedby="radioLabelPositionHelp">
                        <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="radioLabelPositionHelp" 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="radioParentCss">CSS Klassen für Parent-Container:</label>
                    <input type="text" class="form-control newFormFieldInput" id="radioParentCss" placeholder="CSS-Klassen"
                        aria-describedby="radioParentCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['parentcss'] }}{% endif %}">
                    <small id="radioParentCssHelp" 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="radioformCheckCss">CSS Klassen für Container um Input und Label:</label>
                    <input type="text" class="form-control newFormFieldInput" id="radioformCheckCss" placeholder="CSS-Klassen"
                        aria-describedby="radioformCheckCss" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['formCheckCss'] }}{% endif %}">
                    <small id="radioformCheckCssHelp" 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="radioRequired" style="margin-top: 0 !important;"
                        {% if formfield is not null and formfield.getAttributesJsonDecoded['required'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="radioRequired">Required</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="radioInline" style="margin-top: 0 !important;"
                        {% if formfield is not null and formfield.getAttributesJsonDecoded['inline'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="radioInline">Inline</label>
                </div>
            </div>
        </div>
    </div>
</div>