{% block component_basic_captcha %}
    {% set basicCaptchaOptions = {
        router: path('frontend.captcha.basic-captcha.load'),
        validate: path('frontend.captcha.basic-captcha.validate'),
        captchaRefreshIconId: '#%s-basic-captcha-content-refresh-icon'|format(formId),
        captchaImageId: '#%s-basic-captcha-content-image'|format(formId),
        basicCaptchaInputId: '#%s-basic-captcha-input'|format(formId),
        basicCaptchaFieldId: '#%s-basic-captcha-field'|format(formId),
        invalidFeedbackMessage: 'error.captcha.basic-captcha-invalid'|trans|sw_sanitize,
        formId: formId,
        preCheckRoute : {
            path: path('frontend.captcha.basic-captcha.validate'),
        }
    } %}

    <div class="row g-2 basic-captcha"
         data-basic-captcha="true"
         data-basic-captcha-options="{{ basicCaptchaOptions|json_encode }}">
        <div class="form-group {% if additionalClass %} {{ additionalClass }}{% else %}col-md-6{% endif %} basic-captcha-content">
            {% block component_basic_captcha_image %}
                <div class="basic-captcha-content-code">
                    <div class="basic-captcha-content-image" id="{{ formId }}-basic-captcha-content-image"></div>

                    {% block component_basic_captcha_refresh_icon %}
                        <button type="button" 
                                class="btn btn-outline-primary basic-captcha-content-refresh-icon" 
                                id="{{ formId }}-basic-captcha-content-refresh-icon"
                                aria-label="{{ 'captcha.basicCaptchaRefreshButton'|trans|sw_sanitize }}">
                            {% sw_icon 'arrow-switch' %}
                        </button>
                    {% endblock %}
                </div>
            {% endblock %}

            {% block component_basic_captcha_fields %}
                {% block component_basic_captcha_input %}
                    <div id="{{ formId }}-basic-captcha-field">
                        {% sw_include '@Storefront/storefront/component/form/form-input.html.twig' with {
                            label: 'captcha.basicCaptchaLabel'|trans|sw_sanitize|replace({'*': ''}),
                            id: formId ~ '-basic-captcha-input',
                            name: constant('Shopware\\Storefront\\Framework\\Captcha\\BasicCaptcha::CAPTCHA_REQUEST_PARAMETER'),
                            violationPath: '/' ~ constant('Shopware\\Storefront\\Framework\\Captcha\\BasicCaptcha::CAPTCHA_REQUEST_PARAMETER'),
                            validationRules: 'required,basicCaptcha',
                        } %}
                    </div>
                {% endblock %}

                {% block component_basic_captcha_form_id %}
                    <input type="text"
                           name="formId"
                           class="d-none"
                           value="{{ formId }}">
                {% endblock %}
            {% endblock %}
        </div>
    </div>
{% endblock %}