{% use "bootstrap_4_layout.html.twig" %}
{% block form_label -%}
   {% if label is not same as(false) -%}
       {%- if compound is defined and compound -%}
           {%- set element = 'legend' -%}
           {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-label')|trim}) -%}
       {%- else -%}
           {%- set label_attr = label_attr|merge({for: id}) -%}
       {%- endif -%}
       {% if required -%}
           {% set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' required')|trim}) %}
       {%- endif -%}
       {% if label is empty -%}
           {%- if label_format is not empty -%}
               {% set label = label_format|replace({
                   '%name%': name,
                   '%id%': id,
               }) %}
           {%- else -%}
               {% set label = name|humanize %}
           {%- endif -%}
       {%- endif -%}
       <{{ element|default('label') }}{% if label_attr %}{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}{% endif %}>
       {%- if translation_domain is same as(false) -%}
           {%- if label_html is same as(false) -%}
               {{- label -}}
           {%- else -%}
               {{- label|raw -}}
           {%- endif -%}
       {%- else -%}
           {%- if label_html is same as(false) -%}
               {{- label|trans(label_translation_parameters, translation_domain) -}}
           {%- else -%}
               {{- label|trans(label_translation_parameters, translation_domain)|raw -}}
           {%- endif -%}
       {%- endif -%}
       {% if required -%}&nbsp;*{% endif %}
       {% block form_label_errors %}{{- form_errors(form) -}}{% endblock form_label_errors %}</{{ element|default('label') }}>
   {%- else -%}
       {%- if errors|length > 0 -%}
           <div id="{{ id }}_errors" class="mb-2">
               {{- form_errors(form) -}}
           </div>
       {%- endif -%}
   {%- endif -%}
{%- endblock form_label %}

{% block checkbox_radio_label -%}
    {#- Do not display the label if widget is not defined in order to prevent double label rendering -#}
    {%- if widget is defined -%}
        {% set is_parent_custom = parent_label_class is defined and ('checkbox-custom' in parent_label_class or 'radio-custom' in parent_label_class) %}
        {% set is_custom = label_attr.class is defined and ('checkbox-custom' in label_attr.class or 'radio-custom' in label_attr.class) %}
        {%- if is_parent_custom or is_custom -%}
            {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' custom-control-label')|trim}) -%}
        {%- else %}
            {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' form-check-label')|trim}) -%}
        {%- endif %}
        {%- if not compound -%}
            {% set label_attr = label_attr|merge({'for': id}) %}
        {%- endif -%}
        {%- if required -%}
            {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' required')|trim}) -%}
        {%- endif -%}
        {%- if parent_label_class is defined -%}
            {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ' ~ parent_label_class)|replace({'checkbox-inline': '', 'radio-inline': '', 'checkbox-custom': '', 'radio-custom': ''})|trim}) -%}
        {%- endif -%}
        {%- if label is not same as(false) and label is empty -%}
            {%- if label_format is not empty -%}
                {%- set label = label_format|replace({
                    '%name%': name,
                    '%id%': id,
                }) -%}
            {%- else -%}
                {%- set label = name|humanize -%}
            {%- endif -%}
        {%- endif -%}

        {{ widget|raw }}
        <label{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}>{% if required -%}*&nbsp;{% endif %}
            {{- label is not same as(false) ? (translation_domain is same as(false) ? label : label|trans({}, translation_domain))|raw -}}
            {{- form_errors(form) -}}
        </label>
    {%- endif -%}
{%- endblock checkbox_radio_label %}

{% block captcha_row %}
    <script type="text/javascript">
        /**
         * The callback function executed
         * once all the Google dependencies have loaded
         */
        function onGoogleReCaptchaApiLoad() {
            var widgets = document.querySelectorAll('[data-toggle="recaptcha"]');
            for (var i = 0; i < widgets.length; i++) {
                renderReCaptcha(widgets[i]);
            }
        }
    </script>
    <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onGoogleReCaptchaApiLoad&render=explicit&hl={{app.request.locale}}" async defer></script>

    <script type="text/javascript">
        /**
         * Render the given widget as a reCAPTCHA
         * from the data-type attribute
         */
        function renderReCaptcha(widget) {
            var form = widget.closest('form');
            var widgetType = widget.getAttribute('data-type');
            var widgetAction = widget.getAttribute('data-action');
            var widgetParameters = {
                'sitekey': widget.getAttribute('data-site-key'),
                'size': widget.getAttribute('data-size'),
                'theme': widget.getAttribute('data-theme'),
            };

            if (widgetType == 'invisible') {
                widgetParameters['callback'] = function () {
                    form.submit()
                };
                widgetParameters['size'] = "invisible";
            }

            var widgetId = grecaptcha.render(widget, widgetParameters);
            console.log(widgetAction);
            if (widgetType == 'invisible') {
                bindChallengeToSubmitButtons(form, widgetId, widgetAction);
            }
        }

        /**
         * Prevent the submit buttons from submitting a form
         * and invoke the challenge for the given captcha id
         */
        function bindChallengeToSubmitButtons(form, reCaptchaId, action) {
            getSubmitButtons(form).forEach(function (button) {
                button.addEventListener('click', function (e) {
                    if (!e.target.form.checkValidity()) {
                        return;
                    }
                    e.preventDefault();
                    console.log(action);
                    if (action) {
                        grecaptcha.execute(reCaptchaId, {action: action});
                    } else {
                        grecaptcha.execute(reCaptchaId);
                    }
                });
            });
        }

        /**
         * Get the submit buttons from the given form
         */
        function getSubmitButtons(form) {
            var buttons = form.querySelectorAll('button, input');
            var submitButtons = [];

            for (var i= 0; i < buttons.length; i++) {
                var button = buttons[i];
                if (button.getAttribute('type') == 'submit') {
                    submitButtons.push(button);
                }
            }

            return submitButtons;
        }
    </script>

    <div id="{{ id }}" data-toggle="recaptcha" data-action="{{ captcha_action }}" data-type="{{ type }}" data-size="{{ size }}" data-theme="{{ theme }}" data-site-key="{{ site_key }}">
    </div>
{% endblock %}