{% set form_field_outer_data_classes = 'form-data basic-captcha' %}

{% extends "forms/field.html.twig" %}

{% block prepend %}
    {% set field_id = field.name|default('default') %}
    {% set config_hash = (form.id ~ '_basic_captcha_' ~ field_id)|md5 %}
    {% set image_url = url('/forms-basic-captcha-image.jpg') ~ '?field=' ~ config_hash %}

    {# Store field configuration in session for image generation #}
    {% set global_config = grav.config.get('plugins.form.basic_captcha', {}) %}
    {% set merged_config = global_config|merge(field) %}
    {% do store_basic_captcha_config(config_hash, merged_config) %}

    <div class="form-input-addon form-input-prepend"
         data-captcha-provider="basic-captcha"
         data-field-id="{{ config_hash }}">
        <img id="basic-captcha-reload-{{ form.id }}"
             src="{{ image_url }}"
             alt="human test"
             data-base-url="{{ url('/forms-basic-captcha-image.jpg') }}"
             data-field-id="{{ config_hash }}" />
        <button type="button" id="reload-captcha-{{ form.id }}" class="reload-captcha-button"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="M14.74 22.39c4.68-1.24 8-5.49 8-10.4 0-5.95-4.79-10.75-10.75-10.75 -3.11 0-5.78 1.11-7.99 2.95 -.77.64-1.43 1.32-1.98 2.01 -.34.41-.57.75-.69.95 -.22.35-.1.81.25 1.02 .35.21.81.09 1.02-.26 .08-.15.27-.43.56-.79 .49-.62 1.08-1.23 1.76-1.81C6.87 3.67 9.21 2.7 11.94 2.7c5.13 0 9.25 4.12 9.25 9.25 0 4.22-2.86 7.88-6.9 8.94 -.41.1-.64.51-.54.91 .1.4.51.63.91.53Zm-12-14.84V2.99c-.001-.42-.34-.75-.75-.75 -.42 0-.75.33-.75.75v4.56c0 .41.33.75.75.75 .41 0 .75-.34.75-.75Zm-.75.75H4h2.43c.41 0 .75-.34.75-.75 0-.42-.34-.75-.75-.75H4 1.99c-.42 0-.75.33-.75.75 0 .41.33.75.75.75Z"/><path d="M1.25 12c0 1.09.16 2.16.48 3.18 .12.39.54.61.93.49 .39-.13.61-.55.49-.94 -.28-.89-.42-1.81-.42-2.75 0-.42-.34-.75-.75-.75 -.42 0-.75.33-.75.75Zm1.93 6.15c.61.88 1.36 1.67 2.22 2.33 .32.25.79.19 1.05-.14 .25-.33.19-.8-.14-1.06 -.74-.58-1.38-1.25-1.92-2.02 -.24-.34-.71-.43-1.05-.19 -.34.23-.43.7-.19 1.04Zm5.02 3.91c1 .37 2.06.6 3.15.66 .41.02.76-.3.79-.71 .02-.42-.30-.77-.71-.80 -.94-.06-1.85-.25-2.72-.58 -.39-.15-.83.04-.97.43 -.15.38.04.82.43.96Z"/></g></svg></button>
    </div>

    {% do assets.addJs('plugin://form/assets/captcha/basic-captcha-refresh.js') %}
{% endblock %}

{% block input_attributes %}
    type="text"
    {% if field.size %}size="{{ field.size }}"{% endif %}
    {% if field.minlength is defined or field.validate.min is defined %}minlength="{{ field.minlength | default(field.validate.min) }}"{% endif %}
    {% if field.maxlength is defined or field.validate.max is defined %}maxlength="{{ field.maxlength | default(field.validate.max) }}"{% endif %}
    {{ parent() }}
{% endblock %}