{%- block captcha_label -%}
  {{ form_label(form.solution) }}
{%- endblock captcha_label -%}

{%- block captcha_widget -%}
  <div class="captcha flow-slim"
       data-controller="reload-captcha"
       data-reload-captcha-regenerate-url-value="{{ path('captcha_regenerate') }}"
       data-reload-captcha-interactive-class="captcha--interactive">
    <div class="flex flex--guttered flex--align-center">
      <div>
        <img src="{{ path('captcha_image', { token: captcha_token }) }}"
             width="{{ captcha_width }}"
             height="{{ captcha_height }}"
             class="captcha__image"
             alt="{{ 'label.verification_image'|trans }}"
             data-reload-captcha-target="image">
      </div>
      <div class="captcha__controls" hidden>
        <button class="button button--secondary button--small"
                type="button"
                data-action="reload-captcha#reload">
          {{- 'action.reload'|trans -}}
        </button>
      </div>
    </div>
    {{- form_widget(form.solution) -}}
    {{- form_widget(form.token, { attr: {
      'data-reload-captcha-target': 'tokenField',
    } }) -}}
  </div>
{%- endblock captcha_widget -%}
