{% extends "freeform/_layouts/settings" %}

{% import "_includes/forms" as forms %}

{% set title = "Captchas"|t("freeform") %}

{% block content %}

    <input type="hidden" name="action" value="freeform/settings/save-settings">
    {{ redirectInput('freeform/settings/captchas') }}
    {{ csrfInput() }}

    <h2 class="first">{{ "Captcha Settings"|t('freeform') }}</h2>

    {{ forms.lightswitchField({
        first: true,
        label: "Use Captchas on Forms?"|t('freeform'),
        instructions: "Enable this to allow the use of reCAPTCHA or hCaptcha on your forms."|t('freeform'),
        name: "settings[recaptchaEnabled]",
        on: settings.recaptchaEnabled,
        toggle: 'recaptcha-fields',
        errors: settings.errors("recaptchaEnabled"),
    }) }}

    <div id="recaptcha-fields" class="field {{ not settings.recaptchaEnabled ? 'hidden' }}">
        {% set isLite = not craft.freeform.pro %}
        {% set opts = {
            v2_checkbox: "reCAPTCHA v2 - Checkbox",
            v2_invisible: {
                label: "reCAPTCHA v2 - Invisible" ~ (isLite ? " (Pro Only)"),
                disabled: isLite,
            },
            v3: {
                label: "reCAPTCHA v3" ~ (isLite ? " (Pro Only)"),
                disabled: isLite,
            },
            h_checkbox: {
                label: "hCaptcha - Checkbox" ~ (isLite ? " (Pro Only)"),
                disabled: isLite,
            },
            h_invisible: {
                label: "hCaptcha - Invisible" ~ (isLite ? " (Pro Only)"),
                disabled: isLite,
            },
        } %}

        {{ forms.selectField({
            label: "Captcha Type"|t('freeform'),
            instructions: "Choose which Captcha service and type you want to use."|t('freeform'),
            warning: "If using reCAPTCHA, please be sure the selection here matches the type on the Google reCAPTCHA site admin console and this site has been added to the approved Domains list."|t('freeform'),
            id: "recaptcha-type",
            name: "settings[recaptchaType]",
            value: settings.recaptchaType,
            errors: settings.errors("recaptchaType"),
            options: opts,
        }) }}

        {{ forms.autosuggestField({
            label: "Captcha Site Key"|t('freeform'),
            name: "settings[recaptchaKey]",
            required: true,
            value: settings.recaptchaKey,
            errors: settings.errors("recaptchaKey"),
            suggestEnvVars: true,
        }) }}

        {{ forms.autosuggestField({
            label: "Captcha Secret Key"|t('freeform'),
            name: "settings[recaptchaSecret]",
            required: true,
            value: settings.recaptchaSecret,
            errors: settings.errors("recaptchaSecret"),
            suggestEnvVars: true,
        }) }}

        <hr>

        <h3>{{ "Behavior & Configuration"|t('freeform') }}</h3>

        {{ forms.lightswitchField({
            label: "Only load Captcha scripts once the user interacts with the form?"|t('freeform'),
            instructions: "If you'd like to have the associated Captcha scripts load only once a user begins filling out the form, enable this setting. If you'd like your forms to be ready to go at page load, disable this setting."|t('freeform'),
            name: "settings[recaptchaLazyLoad]",
            on: settings.recaptchaLazyLoad,
            errors: settings.errors("recaptchaLazyLoad"),
        }) }}

        <div id="recaptcha-theme" class="field {{ settings.recaptchaType != 'v2_checkbox' ? 'hidden' }}">
            {{ forms.selectField({
                label: "Theme"|t("freeform"),
                name: "settings[recaptchaTheme]",
                value: settings.recaptchaTheme,
                errors: settings.errors("recaptchaTheme"),
                options: {
                    "light": "Light"|t("freeform"),
                    "dark": "Dark"|t("freeform"),
                }
            }) }}

            {{ forms.selectField({
                label: "Size"|t("freeform"),
                name: "settings[recaptchaSize]",
                value: settings.recaptchaSize,
                errors: settings.errors("recaptchaSize"),
                options: {
                    "normal": "Normal"|t("freeform"),
                    "compact": "Compact"|t("freeform"),
                }
            }) }}
        </div>

        <div id="failure-behaviour" class="field {{ settings.recaptchaType == "v2_checkbox" ? "hidden" }}">
            {{ forms.selectField({
                label: "Failure Behavior"|t("freeform"),
                name: "settings[recaptchaBehaviour]",
                value: settings.spamFolderEnabled ? settings.recaptchaBehaviour : 'display_error',
                errors: settings.errors("recaptchaBehaviour"),
                options: {
                    "display_error": "Display Error"|t("freeform"),
                    "spam": {
                        label: "Send to Freeform Spam Folder"|t("freeform"),
                        disabled: not settings.spamFolderEnabled,
                    }
                }
            }) }}
        </div>

        <div id="min-score" class="{{ settings.recaptchaType != "v3" ? "hidden" }}">
            {{ forms.selectField({
                label: "Minimum Score"|t("freeform"),
                instructions: "Enter the minimum score needed to pass the test. The higher the score, the more aggressive the protection will be. Setting this to '0.0' would allow almost all spam through, while '1.0' could potentially block legitimate users. We recommend a value of '0.5' to '0.7'."|t("freeform"),
                name: "settings[recaptchaMinScore]",
                value: settings.recaptchaMinScore,
                errors: settings.errors("recaptchaMinScore"),
                options: {
                    "0.0": "0.0",
                    "0.1": "0.1",
                    "0.2": "0.2",
                    "0.3": "0.3",
                    "0.4": "0.4",
                    "0.5": "0.5",
                    "0.6": "0.6",
                    "0.7": "0.7",
                    "0.8": "0.8",
                    "0.9": "0.9",
                    "1.0": "1.0",
                }
            }) }}
        </div>

        {{ forms.textField({
            label: "Error Message"|t('freeform'),
            name: "settings[recaptchaErrorMessage]",
            value: settings.recaptchaErrorMessage,
            errors: settings.errors("recaptchaErrorMessage"),
        }) }}
    </div>

{% endblock %}

{% js %}
    (function() {
        var select = document.getElementById("recaptcha-type");
        var minScore = document.getElementById("min-score");
        var failureBehaviour = document.getElementById("failure-behaviour");
        var theme = document.getElementById("recaptcha-theme");
        select.addEventListener("change", function (event) {
            var value = event.target.value;

            if (value === "v3") {
                minScore.classList.remove("hidden");
            } else {
                minScore.classList.add("hidden");
            }

            if (value === "v2_checkbox") {
                failureBehaviour.classList.add("hidden");
                theme.classList.remove("hidden");
            } else {
                failureBehaviour.classList.remove("hidden");
                theme.classList.add("hidden");
            }
        });
    })();
{% endjs %}