{namespace r=Evoweb\Recaptcha\ViewHelpers}
<div class="subscribe-box layout-7">
    <f:if condition="{settings.provider} == 'mailrelay'">
        <f:then>
            <f:form.validationResults for="subscribeForm" as="validationErrors">
                <f:variable name="formErrors" value="{validationErrors.flattenedErrors}" />
            </f:form.validationResults>
            <f:form id="newsletter" action="mailRelaySubmit" objectName="subscribeForm" object="{subscribeForm}" name="subscribeForm">
                <input type="hidden" name="subscribe" value="1" />
                <f:form.textfield property="email" id="subscribe" value="{subscribeForm.email}"
                    placeholder="{f:translate(key: 'LLL:EXT:wabs_sp_isla_magica/Resources/Private/Languages/locallang.xlf:placeholder')} " aria-label="subscribe" 
                    title="{f:translate(key: 'LLL:EXT:wabs_sp_isla_magica/Resources/Private/Languages/locallang.xlf:placeholder')}" />
                <f:if condition="{settings.showGtmButton} == 1">
                    <f:if condition="{settings.gtmButtonValue}">
                        <f:variable name="attribute" value="{settings.gtmButtonValue}" />
                    </f:if>
                </f:if>
                <f:form.button onclick="dataLayer.push({f:format.raw(value:'{')}'event': 'register'{f:format.raw(value:'}')});" data="{recaptcha-form-submit: '',gtm-event:'{attribute}'}" aria-label="Send email">
                    <span class="icon" style="-webkit-mask-image:url({f:uri.image(src: 'EXT:wabs_sitepackage_park/Resources/Public/Images/Icons/streamline-send-email--emails--48x48.svg')}); mask-image:url({f:uri.image(src: 'EXT:wabs_sitepackage_park/Resources/Public/Images/Icons/streamline-send-email--emails--48x48.svg')});" aria-hidden="true">
                    </span>
                </f:form.button>
                <f:render partial="Errors" arguments="{formErrors: formErrors, field: 'email', errors: errors}" />
                <div class="privacy-wrapper{f:if(condition: '{formErrors} || {errors}', then: ' show', else: '')}">
                    <div class="discription">
                        <f:format.html>{settings.description}</f:format.html>
                    </div>
                    <div class="check-box">
                        <f:form.checkbox property="privacyPolicyAccepted" id="privacy" value="1"
                            label="{f:translate(key: 'LLL:EXT:wabs_sp_isla_magica/Resources/Private/Languages/locallang.xlf:privacy')}" />
                        <label for="privacy">He leído y consiento expresamente al tratamiento de protección de datos en los términos establecidos.</label>
                        <f:render partial="Errors" arguments="{formErrors: formErrors, field: 'privacyPolicyAccepted'}" />
                    </div>
                    <r:form.recaptcha>
                        <f:form.hidden type="hidden" property="recaptcha" data="{recaptcha-form-field: ''}" value="1"  respectSubmittedDataValue="false" />
                        <f:if condition="{showCaptcha}">
                            <f:then>
                                <f:asset.script identifier="recaptcha_form" src="EXT:recaptcha/Resources/Public/JavaScript/Frontend/form.js"/>
                                <f:asset.script identifier="recaptcha" async="true" src="{configuration.api_server}{f:if(condition: configuration.lang, then: '?hl={configuration.lang}')}"/>
                                <div class="g-recaptcha" 
                                    data-sitekey="{configuration.public_key}"
                                    data-callback="onRecaptchaCallback"
                                    data-expired-callback="onRecaptchaExpired"
                                    data-error-callback="onRecaptchaError"
                                ></div>
                                <f:render partial="Errors" arguments="{formErrors: formErrors, field: 'recaptcha'}" />
                            </f:then>
                            <f:else>
                                <div class="recaptcha-development-mode" role="status" aria-live="polite">
                                    Development mode active. Do not expect the captcha to appear.
                                </div>
                            </f:else>
                        </f:if>
                    </r:form.recaptcha>
                </div>
            </f:form>

            <f:if condition="!{errors}">
                {result}
            </f:if>
        </f:then>
        <f:else>
            <form method="post" action="#newsletter">
                <input type="text" name="subscribe" id="subscribe"
                    placeholder="{f:translate(key: 'LLL:EXT:wabs_sp_isla_magica/Resources/Private/Languages/locallang.xlf:placeholder')}" title="{f:translate(key: 'LLL:EXT:wabs_sp_isla_magica/Resources/Private/Languages/locallang.xlf:placeholder')}" /> 
                <button onclick="dataLayer.push({'event': 'register'});" aria-label="Send email">
                    <span class="icon"
                        style="-webkit-mask-image:url({f:uri.image(src: 'EXT:wabs_sitepackage_park/Resources/Public/Images/Icons/streamline-send-email--emails--48x48.svg')}); mask-image:url({f:uri.image(src: 'EXT:wabs_sitepackage_park/Resources/Public/Images/Icons/streamline-send-email--emails--48x48.svg')});">
                    </span>
                </button>
            </form>
        </f:else>
    </f:if>
</div>