<div class="form-group">
    <label class="mb-2 mx-0 mt-0" for="textfeldLabel">Label:</label>
    <input type="text" class="form-control newFormFieldInput" id="textfeldLabel" placeholder="Label" 
        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['label'] }}{% endif %}">
</div>
<div class="accordion" id="textfeldAccordion">
    <div class="card m-0 p-0 mw-100">
        <div class="card-header py-1" id="textfeldHeading">
            <h6 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#textfeldOptions"
                    aria-expanded="false" aria-controls="textfeldOptions">
                    <i class="fas fa-plus ts-accordion-plus"></i>Weitere Optionen
                </button>
            </h6>
        </div>
    
        <div id="textfeldOptions" class="collapse" aria-labelledby="textfeldHeading" data-parent="#textfeldAccordion">
            <div class="card-body">
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="textfeldLabelPosition">Position des Labels:</label>
                    <select class="form-control newFormFieldInput" size="1" id="textfeldLabelPosition">
                        <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="textfeldPlaceholder">Platzhalter:</label>
                    <input type="text" class="form-control newFormFieldInput" id="textfeldPlaceholder" placeholder="Platzhalter" 
                        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['placeholder'] }}{% endif %}">
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="textfeldMaxlength">maximale Länge:</label>
                    <input type="number" min="0" step="1" class="form-control newFormFieldInput" id="textfeldMaxlength"
                        placeholder="maximale Länge" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['maxlength'] }}{% endif %}">
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="textfeldCss">CSS Klassen:</label>
                    <input type="text" class="form-control newFormFieldInput" id="textfeldCss" placeholder="CSS-Klassen"
                        aria-describedby="textfeldCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['css'] }}{% endif %}">
                    <small id="textfeldCssHelp" 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="textfeldParentCss">CSS Klassen für Parent-Container:</label>
                    <input type="text" class="form-control newFormFieldInput" id="textfeldParentCss" placeholder="CSS-Klassen"
                        aria-describedby="textfeldParentCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['parentcss'] }}{% endif %}">
                    <small id="textfeldParentCssHelp" 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="textfeldValue">Value:</label>
                    <input type="text" class="form-control newFormFieldInput" id="textfeldValue" placeholder="Value"
                        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['value'] }}{% endif %}">
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="textfeldType">Textfeld-Typ:</label>
                    <select class="form-control newFormFieldInput" id="textfeldType">
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "text" %}selected{% endif %} value="text">Text</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "color" %}selected{% endif %} value="color">Color</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "date" %}selected{% endif %} value="date">Date</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "datetime-local" %}selected{% endif %} value="datetime-local">Datetime local</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "email" %}selected{% endif %} value="email">E-Mail</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "month" %}selected{% endif %} value="month">Month</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "number" %}selected{% endif %} value="number">Number</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "password" %}selected{% endif %} value="password">Password</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "tel" %}selected{% endif %} value="tel">Telefonnr.</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "time" %}selected{% endif %} value="time">Time</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "url" %}selected{% endif %} value="url">URL</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "week" %}selected{% endif %} value="week">Week</option>
                    </select>
                </div>
                <div class="collapse {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "number" %}show{% endif %} " id="textfeld-number-options">
                    <div class="card card-body m-0 p-0 mw-100 border-0">
                        <div class="form-group">
                            <label class="mb-2 mx-0 mt-0" for="textfeldMin">Min:</label>
                            <input type="number" class="form-control newFormFieldInput" id="textfeldMin" placeholder="Min"
                                value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['min'] }}{% endif %}">
                        </div>
                        <div class="form-group">
                            <label class="mb-2 mx-0 mt-0" for="textfeldMax">Max:</label>
                            <input type="number" class="form-control newFormFieldInput" id="textfeldMax" placeholder="Max"
                                value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['max'] }}{% endif %}">
                        </div>
                        <div class="form-group">
                            <label class="mb-2 mx-0 mt-0" for="textfeldStep">Step:</label>
                            <input type="number" class="form-control newFormFieldInput" id="textfeldStep" placeholder="Step"
                                value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['step'] }}{% endif %}">
                        </div>
                    </div>
                </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="textfeldDisabled" 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="textfeldDisabled">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="textfeldRequired" 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="textfeldRequired">Required</label>
                </div>
            </div>
        </div>
    </div>
</div>