<div class="form-group">
    <label class="mb-2 mx-0 mt-0" for="textText">Text:</label>
    <input type="text" class="form-control newFormFieldInput" id="textText" placeholder="Text" 
        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['text'] }}{% endif %}">
</div>
<div class="accordion" id="textAccordion">
    <div class="card m-0 p-0 mw-100">
        <div class="card-header py-1" id="textHeading">
            <h6 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#textOptions"
                    aria-expanded="false" aria-controls="textOptions">
                    <i class="fas fa-plus ts-accordion-plus"></i>Weitere Optionen
                </button>
            </h6>
        </div>
    
        <div id="textOptions" class="collapse" aria-labelledby="textHeading" data-parent="#textAccordion">
            <div class="card-body">
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="textType">HTML-Element:</label>
                    <select class="form-control newFormFieldInput" id="textType">
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "p" %}selected{% endif %} value="p">&lt;p&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "h1" %}selected{% endif %} value="h1">&lt;h1&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "h2" %}selected{% endif %} value="h2">&lt;h2&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "h3" %}selected{% endif %} value="h3">&lt;h3&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "h4" %}selected{% endif %} value="h4">&lt;h4&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "h5" %}selected{% endif %} value="h5">&lt;h5&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "h6" %}selected{% endif %} value="h6">&lt;h6&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "small" %}selected{% endif %} value="small">&lt;small&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "b" %}selected{% endif %} value="b">&lt;b&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "i" %}selected{% endif %} value="i">&lt;i&gt;</option>
                        <option {% if formfield is not null and formfield.getAttributesJsonDecoded['type'] == "span" %}selected{% endif %} value="span">&lt;span&gt;</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="textPosition">Position des Texts:</label>
                    <select class="form-control newFormFieldInput" size="1" id="textPosition">
                        <option value="left" {% if formfield is not null and formfield.getAttributesJsonDecoded['textPosition'] == "left" %}selected{% endif %}>Linksbündig</option>
                        <option value="center"{% if formfield is not null and formfield.getAttributesJsonDecoded['textPosition'] == "center" %}selected{% endif %}>Zentriert</option>
                        <option value="right"{% if formfield is not null and formfield.getAttributesJsonDecoded['textPosition'] == "right" %}selected{% endif %}>Rechtsbündig</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="textCss">CSS Klassen:</label>
                    <input type="text" class="form-control newFormFieldInput" id="textCss" placeholder="CSS-Klassen"
                        aria-describedby="textCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['css'] }}{% endif %}">
                    <small id="textCssHelp" 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="textParentCss">CSS Klassen für Parent-Container:</label>
                    <input type="text" class="form-control newFormFieldInput" id="textParentCss" placeholder="CSS-Klassen"
                        aria-describedby="textParentCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['parentcss'] }}{% endif %}">
                    <small id="textParentCssHelp" class="form-text text-muted">Mehrere Klassen durch Leerzeichen getrennt.
                        Beispielsweise &laquo;col-12 col-md-6&raquo;</small>
                </div>
            </div>
        </div>
    </div>
</div>