<div class="form-group">
    <label class="mb-2 mx-0 mt-0" for="captchaLabel">Label des Eingabefelds:</label>
    <input type="text" class="form-control newFormFieldInput" id="captchaLabel" 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="captchaLength">Länge des Captchas:</label>
    <input type="number" min="2" max="20" step="1" class="form-control newFormFieldInput" id="captchaLength" placeholder="Länge" 
        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['length'] }}{% else %}5{% endif %}">
</div>
<div class="form-group">
    <label class="mb-2 mx-0 mt-0" for="captchaCharacterset">Zeichensatz des Captchas:</label>
    <select class="form-control newFormFieldInput" size="1" id="captchaCharacterset">
        <option value="all" {% if formfield is not null and formfield.getAttributesJsonDecoded['characterset'] == "all" %}selected{% endif %}>Alle (1-9, a-z, A-Z)</option>
        <option value="numeric" {% if formfield is not null and formfield.getAttributesJsonDecoded['characterset'] == "numeric" %}selected{% endif %}>Numerisch (0-9)</option>
        <option value="chars"{% if formfield is not null and formfield.getAttributesJsonDecoded['characterset'] == "chars" %}selected{% endif %}>Zeichen (a-z, A-Z)</option>
        <option value="charslower"{% if formfield is not null and formfield.getAttributesJsonDecoded['characterset'] == "charslower" %}selected{% endif %}>Zeichen (a-z)</option>
        <option value="charsupper"{% if formfield is not null and formfield.getAttributesJsonDecoded['characterset'] == "charsupper" %}selected{% endif %}>Zeichen (A-Z)</option>
    </select>
</div>
<div class="accordion" id="captchaAccordion">
    <div class="card m-0 p-0 mw-100">
        <div class="card-header py-1" id="captchaHeading">
            <h6 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#captchaOptions"
                    aria-expanded="false" aria-controls="captchaOptions">
                    <i class="fas fa-plus ts-accordion-plus"></i>Weitere Optionen
                </button>
            </h6>
        </div>
    
        <div id="captchaOptions" class="collapse" aria-labelledby="captchaHeading" data-parent="#captchaAccordion">
            <div class="card-body">
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="captchaPlaceholder">Platzhalter:</label>
                    <input type="text" class="form-control newFormFieldInput" id="captchaPlaceholder" 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="captchaWidth">Breite des Captcha-Bilds (in px):</label>
                    <input type="number" min="100" max="2000" step="5" class="form-control newFormFieldInput" id="captchaWidth" placeholder="Breite in px" 
                        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['width'] }}{% else %}150{% endif %}">
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="captchaHeight">Höhe des Captcha-Bilds (in px):</label>
                    <input type="number" min="30" max="1000" step="5" class="form-control newFormFieldInput" id="captchaHeight" placeholder="Höhe in px" 
                        value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['height'] }}{% else %}50{% endif %}">
                </div>                
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="captchaPretext">Hilfe-Text vor Captcha:</label>
                    <textarea class="form-control newFormFieldInput" id="captchaPretext" rows="5" 
                        aria-describedby="captchaPretextHelp" placeholder="Text vor Captcha">{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['pretext'] }}{% endif %}</textarea>
                    <small id="captchaPretextHelp" class="form-text text-muted">
                        Für den Text können Sie die folgenden HTML-Elemente nutzen:
                        <code>
                            {{ allowed_html|raw }}
                        </code>
                    </small>
                </div>
                <div class="form-group">
                    <label class="mb-2 mx-0 mt-0" for="captchaLabelPosition">Position des Labels:</label>
                    <select class="form-control newFormFieldInput" size="1" id="captchaLabelPosition">
                        <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="captchaCssImage">CSS Klassen für Captcha-Bild:</label>
                    <input type="text" class="form-control newFormFieldInput" id="captchaCssImage" placeholder="CSS-Klassen"
                        aria-describedby="captchaCssImageHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['imagecss'] }}{% endif %}">
                    <small id="captchaCssImageHelp" 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="captchaCss">CSS Klassen für Captcha-Input:</label>
                    <input type="text" class="form-control newFormFieldInput" id="captchaCss" placeholder="CSS-Klassen"
                        aria-describedby="captchaCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['css'] }}{% endif %}">
                    <small id="captchaCssHelp" 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="captchaInnerCss">CSS Klassen für Text-Input-Wrapper:</label>
                    <input type="text" class="form-control newFormFieldInput" id="captchaInnerCss" placeholder="CSS-Klassen"
                        aria-describedby="captchaInnerCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['innercss'] }}{% else %}d-flex justify-content-center flex-column w-100 pl-0 pl-sm-4 mt-3 mt-sm-0{% endif %}">
                    <small id="captchaInnerCssHelp" class="form-text text-muted">Klassen für den Div-Container für Label, Input und Fehlertexte. 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="captchaParentCss">CSS Klassen für Parent-Container:</label>
                    <input type="text" class="form-control newFormFieldInput" id="captchaParentCss" placeholder="CSS-Klassen"
                        aria-describedby="captchaParentCssHelp" value="{% if formfield is not null %}{{ formfield.getAttributesJsonDecoded['parentcss'] }}{% else %}d-flex flex-column flex-sm-row{% endif %}">
                    <small id="captchaParentCssHelp" 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="captchaCaseSensitive" style="margin-top: 0 !important;" 
                        aria-describedby="captchaCaseSensitiveHelp" {% if formfield is not null and formfield.getAttributesJsonDecoded['caseSensitive'] %}checked{% endif %}>
                    <label class="form-check-label m-0 ml-2" for="captchaCaseSensitive">Beim Überprüfen Groß- und Kleinschreibung beachten</label>
                </div>
                <small id="captchaCaseSensitiveHelp" class="form-text text-muted"><b>Achtung:</b>&nbsp;Da die Zeichen manchmal schwer zu erkennen und zu unterscheiden sind, kann das Aktivieren dieser Option zu Schwierigkeiten beim Lösen des Captchas führen. Die Option sollte daher nur aktiviert werden, wenn besonders hoher Schutz erforderlich ist.</small>
                <div class="form-check pl-0 mb-2 mt-2 d-flex align-items-center">
                    <input type="checkbox" class="form-check-input position-relative m-0 newFormFieldInput" id="captchaRequired" style="margin-top: 0 !important;"
                        checked disabled>
                    <label class="form-check-label m-0 ml-2" for="captchaRequired">Required</label>
                </div>
            </div>
        </div>
    </div>
</div>