<script type=“text/javascript”>

const contactFormElement = document.getElementById("{{ include.form_id | default: 'contact-form' }}");
const nameInputElement = document.getElementById("{{ include.name_input_id | default: 'contact-name' }}");
const emailInputElement = document.getElementById("{{ include.email_input_id | default: 'contact-email' }}");
const messageInputElement = document.getElementById("{{ include.message_input_id | default: 'contact-message' }}");
const submitInputElement = document.getElementById("{{ include.submit_input_id | default: 'contact-submit-button' }}");
const modalWindowElement = document.getElementById("{{ include.modal_window_id | default: 'modal-recaptcha-window' }}");
var recaptchaWidget;

const isInputValid = function() {
    return (nameInputElement.checkValidity()
        && emailInputElement.checkValidity()
        && messageInputElement.checkValidity())
};

const disableSubmitInputElement = function (disabled = true) {
    submitInputElement.disabled = disabled;
}

const {{ include.onfocusout_callback | default: 'toggleSubmitInputElement' }} = function() {
    if (isInputValid()) {
        disableSubmitInputElement(false);
    } else {
        disableSubmitInputElement();
    }
};

const showModalWindow = function() {
    modalWindowElement.classList.add('visible');
    modalWindowElement.classList.add('loaded');
    modalWindowElement.focus();
}

const hideModalWindow = function() {
    modalWindowElement.classList.remove('loaded');
    modalWindowElement.classList.remove('visible');
    contactFormElement.focus();
}

const {{ include.onsubmit_callback | default: 'processContactRequest' }} = function() {
    if (grecaptcha.getResponse(recaptchaWidget).length > 0) {
        sendContactMessage();
        hideModalWindow();
        resetContactForm();
        grecaptcha.reset();
    } else {
        showModalWindow();
    }
};

const {{ include.onreset_callback | default: 'resetContactForm' }} = function() {
    contactFormElement.reset();
    disableSubmitInputElement();
};

const sendContactMessage = function() {
    const formData = new FormData();
    formData.append('name', encodeURI(nameInputElement.value));
    formData.append('email', encodeURI(emailInputElement.value));
    formData.append('message', encodeURI(messageInputElement.value));
    formData.append('token', grecaptcha.getResponse(recaptchaWidget));

    fetch("{{ '/contact.php' | absolute_url }}", {
        method: 'POST',
        body: formData})
    .then((response) => alert('Message sent!'))
    .catch((error) => console.error('Error:', error));
};

var onRecaptchaLoadCallback = function() {
    recaptchaWidget = grecaptcha.render("{{ include.recaptcha_widget_id | default: 'recaptcha-checkbox' }}", {
        'sitekey' : '{{ site.recaptcha.sitekey }}',
        'theme' : 'dark',
        'size' : 'compact',
        'callback' : processContactRequest});
};

modalWindowElement.addEventListener('click', hideModalWindow);
modalWindowElement.addEventListener('keyup', hideModalWindow);

</script> <script src=“www.google.com/recaptcha/api.js?onload=onRecaptchaLoadCallback&render=explicit” async defer></script>