<div class="form-group">
    <label class="mb-2 mx-0 mt-0" for="selectLabel">Label:</label>
    <input type="text" class="form-control newFormFieldInput" id="selectLabel" placeholder="Label"
        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['label'] }}{% endif %}">
</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="selectOptionTable" class="table table-striped table-sm table-hover">
            <thead>
                <th scope="col">&nbsp;</th>
                <th scope="col">Text</th>
                <th scope="col">Value</th>
                <th scope="col">&nbsp;</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 selectOptionRemove" title="Option 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 select-option-text newFormFieldInput" placeholder="Text" id="selectOption-text-{{ key }}" value="{{ element['text'] }}">
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control select-option-value newFormFieldInput" placeholder="Value" id="selectOption-value-{{ key }}" value="{{ element['value'] }}">
                        </td>
                        <td class="align-middle text-nowrap">
                            <div class="form-check d-flex align-items-center">
                                <input type="radio" class="form-check-input position-relative m-0 mr-2 newFormFieldInput" name="selectOption-selected" 
                                    id="selectOption-selected-{{ key }}" {% if element['selected'] %}checked{% endif %}>
                                <label class="form-check-label m-0 ml-2" for="selectOption-selected-{{ key }}">standardmäßig anzeigen</label>
                            </div>
                        </td>
                    </tr>
                {% else %} 
                    <tr data-rowid="0">
                        <td class="align-middle text-center">
                            <button type="button" class="btn btn-danger btn-sm selectOptionRemove" title="Option löschen" disabled><i class="fas fa-minus-square"></i></button>
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control select-option-text newFormFieldInput" placeholder="Text" id="selectOption-text-0">
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control select-option-value newFormFieldInput" placeholder="Value" id="selectOption-value-0">
                        </td>
                        <td class="align-middle text-nowrap">
                            <div class="form-check d-flex align-items-center">
                                <input type="radio" class="form-check-input position-relative m-0 mr-2 newFormFieldInput" name="selectOption-selected" id="selectOption-selected-0" checked>
                                <label class="form-check-label m-0 ml-2" for="selectOption-selected-0">standardmäßig anzeigen</label>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <button class="btn btn-info float-right mb-3 mt-1" type="button" id="selectAddOptionButton"><i class="fas fa-plus"></i>&nbsp;Hinzufügen</button>
</div>
<div class="accordion" id="selectAccordion">
    <div class="card m-0 p-0 mw-100">
        <div class="card-header py-1" id="selectHeading">
            <h6 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#selectOptions"
                    aria-expanded="false" aria-controls="selectOptions">
                    <i class="fas fa-plus ts-accordion-plus"></i>Weitere Optionen
                </button>
            </h6>
        </div>
    
        <div id="selectOptions" class="collapse" aria-labelledby="selectHeading" data-parent="#selectAccordion">
            <div class="card-body">
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="selectLabelPosition">Position des Labels:</label>
                    <select class="form-control newFormFieldInput" size="1" id="selectLabelPosition">
                        <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="selectSize">Anzahl der sichtbaren Elemente:</label>
                    <input type="number" min="1" step="1" class="form-control newFormFieldInput" id="selectSize"
                        placeholder="Anzahl der sichtbaren Elemente" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['size'] }}{% else %}1{% endif %}">
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="selectCss">CSS Klassen:</label>
                    <input type="text" class="form-control newFormFieldInput" id="selectCss" placeholder="CSS-Klassen"
                        aria-describedby="selectCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['css'] }}{% endif %}">
                    <small id="selectCssHelp" 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="selectParentCss">CSS Klassen für Parent-Container:</label>
                    <input type="text" class="form-control newFormFieldInput" id="selectParentCss" placeholder="CSS-Klassen"
                        aria-describedby="selectParentCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['parentcss'] }}{% endif %}">
                    <small id="selectParentCssHelp" 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 d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="selectUserAdd" style="margin-top: 0 !important;"
                        {% if formfield is not null and formfield.getAttributesJsonDecoded['useradd'] %}checked{% endif %} aria-describedby="selectUserAddHelp" >
                    <label class="form-check-label m-0 ml-2" for="selectUserAdd">Benutzer kann eigene Einträge hinzufügen</label>
                </div>
                <small id="selectUserAddHelp" class="form-text text-muted mb-2 mt-0">Ist diese Funktion aktiviert, kann der Benutzer eigene Einträge zum Dropdown-Menü hinzufügen. 
                    Damit dies funktioniert, muss die Option &bdquo;Alle Formulareingaben behalten&ldquo; des Formulars aktiviert sein.</small>
                <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="selectMultiple" style="margin-top: 0 !important;"
                        {% if formfield is not null and formfield.getAttributesJsonDecoded['multiple'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="selectMultiple">Multiple</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="selectDisabled" 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="selectDisabled">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="selectRequired" 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="selectRequired">Required</label>
                </div>
            </div>
        </div>
    </div>
</div>