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

{% block label %}{% endblock %}

{% block input %}
    {% set formId        = form.id ?: form.name %}
    {% set endpoint      = base_url_relative ~ '/forms-cap/' %}
    {% set wasm_url      = url('plugin://form/assets/captcha/cap/cap_wasm_bg.wasm') %}
    {% set pako_url      = url('plugin://form/assets/captcha/cap/pako_inflate.min.js') %}
    {% set container_id  = 'cap-' ~ formId %}
    {% set mode          = field.mode ?? grav.config.plugins.form.cap.mode ?? 'invisible' %}
    {% if mode not in ['invisible', 'checkbox'] %}{% set mode = 'invisible' %}{% endif %}

    {# cap.min.js fetches the WASM the moment it executes and memoizes whichever
       URL it resolved first. cap-handler.js only sets CAP_CUSTOM_WASM_URL on
       DOMContentLoaded, by which time that fetch has already started -- so the
       vendored binary went unused and every visitor pulled it from the jsDelivr
       CDN instead.

       This has to be a plain inline tag rather than assets.addInlineJs: Grav
       emits all external JS before any inline JS, so an asset-registered
       snippet lands after cap.min.js no matter what priority it is given. Here
       in the field markup it parses well ahead of the bottom-group scripts.

       CAP_PAKO_URL is set for the same reason. The widget falls back to pako when
       the browser has no DecompressionStream -- Safari before 16.4, Firefox
       before 113 -- and without this it would pull that from jsDelivr, which is
       the third-party runtime dependency vendoring this widget exists to avoid. #}
    <script>window.CAP_CUSTOM_WASM_URL={{ wasm_url|json_encode|raw }};window.CAP_PAKO_URL={{ pako_url|json_encode|raw }};</script>

    {% if mode == 'checkbox' %}

        {# The <cap-widget> renders its own <input type="hidden" name="cap-token"> internally. #}
        <div class="cap-container"
             data-form-id="{{ formId }}"
             data-captcha-provider="cap"
             data-cap-mode="checkbox"
             data-cap-wasm-url="{{ wasm_url }}">
            <cap-widget
                id="{{ container_id }}"
                data-cap-api-endpoint="{{ endpoint }}"
                data-cap-hidden-field-name="cap-token"
                data-cap-i18n-initial-state="{{ 'PLUGIN_FORM.CAP_I18N_INITIAL_STATE'|t|e('html_attr') }}"
                data-cap-i18n-verifying-label="{{ 'PLUGIN_FORM.CAP_I18N_VERIFYING_LABEL'|t|e('html_attr') }}"
                data-cap-i18n-solved-label="{{ 'PLUGIN_FORM.CAP_I18N_SOLVED_LABEL'|t|e('html_attr') }}"
                data-cap-i18n-error-label="{{ 'PLUGIN_FORM.CAP_I18N_ERROR_LABEL'|t|e('html_attr') }}"
                data-cap-i18n-troubleshooting-label="{{ 'PLUGIN_FORM.CAP_I18N_TROUBLESHOOTING_LABEL'|t|e('html_attr') }}"
                data-cap-i18n-wasm-disabled="{{ 'PLUGIN_FORM.CAP_I18N_WASM_DISABLED'|t|e('html_attr') }}"
                data-cap-i18n-verify-aria-label="{{ 'PLUGIN_FORM.CAP_I18N_VERIFY_ARIA_LABEL'|t|e('html_attr') }}"
                data-cap-i18n-verifying-aria-label="{{ 'PLUGIN_FORM.CAP_I18N_VERIFYING_ARIA_LABEL'|t|e('html_attr') }}"
                data-cap-i18n-verified-aria-label="{{ 'PLUGIN_FORM.CAP_I18N_VERIFIED_ARIA_LABEL'|t|e('html_attr') }}"
                data-cap-i18n-required-label="{{ 'PLUGIN_FORM.CAP_I18N_REQUIRED_LABEL'|t|e('html_attr') }}"
                data-cap-i18n-error-aria-label="{{ 'PLUGIN_FORM.CAP_I18N_ERROR_ARIA_LABEL'|t|e('html_attr') }}"
                data-cap-i18n-group-aria-label="{{ 'PLUGIN_FORM.CAP_I18N_GROUP_ARIA_LABEL'|t|e('html_attr') }}"></cap-widget>
        </div>

    {% else %}

        {# Invisible mode: no visible UI. cap-handler.js wires up the solve + submit-intercept. #}
        <div class="cap-container cap-invisible"
             data-form-id="{{ formId }}"
             data-captcha-provider="cap"
             data-cap-mode="invisible"
             data-cap-api-endpoint="{{ endpoint }}"
             data-cap-wasm-url="{{ wasm_url }}"
             aria-hidden="true"
             style="display:none;">
            <input type="hidden" name="cap-token" value="" />
        </div>

    {% endif %}

    {% do assets.addJs('plugin://form/assets/captcha/cap-handler.js', { group: 'bottom', priority: 110 }) %}
    {% do assets.addJs('plugin://form/assets/captcha/cap/cap.min.js', { group: 'bottom', loading: 'defer', priority: 100 }) %}
{% endblock %}