{% extends '@Contao/form_row.html.twig' %}

{% block label %}
    {% if this.label %}
        <label for="ctrl_{{ this.id }}"{% if this.class|default %} class="{{ this.class|default }}"{% endif %}>
            <span class="invisible">{{ this.mandatoryField }} </span>{{ this.label|insert_tag_raw }}<span class="mandatory">*</span>
        </label>
    {% endif %}
{% endblock %}

{% block field %}
    {% if hasErrors.invoke() %}
        <p class="error">{{ getErrorAsString.invoke() }}</p>
    {% endif %}

    {% set input_attributes = attrs(getAttributes.invoke()) %}

    <input{{ attrs()
        .set('type', 'text')
        .set('name', this.name)
        .set('id', "ctrl_#{this.id}")
        .addClass('captcha mandatory')
        .addClass(this.class|default)
        .set('aria-describedby', "captcha_text_#{this.id}")
        .set('value', '')
        .mergeWith(input_attributes)
        .setIfExists('placeholder', input_attributes.placeholder|default|insert_tag)
    }}>
    <span id="captcha_text_{{ this.id }}" class="captcha_text{% if this.class|default %} {{ this.class|default }}{% endif %}">{{ getQuestion.invoke() }}</span>
    <input type="hidden" name="{{ this.name }}_hash{{ hasErrors.invoke() ? 1 + this.sum ** 2 : '' }}" value="{{ hasErrors.invoke() ? getHash.invoke() : '' }}">

    {% if not hasErrors.invoke() %}
        <div style="{{ 'display:none'|csp_unsafe_inline_style }}">
            <label for="ctrl_{{ this.id }}_hp">Do not fill in this field</label>
            <input type="text" name="{{ this.name }}_name" id="ctrl_{{ this.id }}_hp" value="">
        </div>
        {% if not as_editor_view %}
            <script src="{{ getAjaxUrl.invoke() }}" data-id="{{ this.id }}" data-name="{{ this.name }}" async></script>
        {% endif %}
    {% endif %}

{% endblock %}
