{# Please note if you want styling to be present on submit you should add styling via the CMS #}
{% if footerNewsletterForm | length %}
    {{ footerNewsletterForm.render({
        attributes: {
            id: footerNewsletterForm.handle,
            class: "footer-newsletter-form relative w-full m-0",
            'data-page-title': entry.title
        },
        buttons: {
            attributes: {
                container: {
                    '+class': "absolute w-full h-18 bottom-2.5 pointer-events-none"
                },
                column: {
                    '+class': "absolute w-full h-full"
                },
                buttonWrapper: {
                    '+class': "w-full relative flex flex-row justify-end items-center px-3"
                },
                submit: {
                    '+class': "form-button bg-brand-terracotta-aa text-white-pure px-6 py-3 font-body font-normal text-lg rounded-lg pointer-events-auto transition-colors duration-700 xs:hover:bg-brand-terracotta-i active:ring-brand-terracotta-i active:ring-2 active:ring-offset-2 focus:ring-brand-terracotta-i focus:ring-2 focus:ring-offset-2"
                }
            },
            submitLabel: "Submit"
        },
        fields: {
            "@global": {
                attributes: {
                    input: {
                        '+class': 'form-field-input !bg-brand-terracotta-aaa !text-white-pure placeholder:text-white-primary font-body font-normal text-lg px-6 h-18 mt-4 border-0 rounded-xl active:ring-brand-terracotta-i active:ring-2 active:ring-offset-2 focus:ring-brand-terracotta-i focus:ring-2 focus:ring-offset-2'
                    },
                    label: {
                        '+class': "form-field-label text-white font-body text-base !font-normal transition-opacity duration-300 after:opacity-0",
                    },
                    instructions: {
                        '+class': "form-field-instructions",
                    }
                },
            },
            ":success": {
                attributes: {
                    label: {
                        '+class': "opacity-0"
                    }
                }
            },
            ":required": {
                attributes: {
                    label: {
                        "+class": "form-field-required"
                    }
                },
            },
        }
    }) }}
{% endif %}