{extends file="widgets/base/widget.tpl"}

{strip}
    {block name="et-widget-inline-styles"}
        {if $et_Newsletter.image && $et_Newsletter.image.src !== ''}
            {block name="et-newsletter-bg-image-styles"}
                {if empty($et_Newsletter.imagePosition) || $et_Newsletter.imagePosition === 'background'}
                    <style type="text/css">
                        #{$et_BaseWidget.cssId}.bg-fullsize,
                        #{$et_BaseWidget.cssId}.bg-boxed .container {
                            background-image: url('{if !empty($et_Newsletter.image.srcWebP)}{$et_Newsletter.image.srcWebP}{else}{$et_Newsletter.image.src}{/if}');
                        }
                    </style>
                {/if}
            {/block}
        {/if}

        {if $et_Newsletter.customColorsEnabled}
            {block name="et-newsletter-styles"}
                <style type="text/css">
                    #{$et_BaseWidget.cssId}.bg-fullsize,
                    #{$et_BaseWidget.cssId}.bg-boxed .container{
                        {if !empty($et_Newsletter.colorBackground)}background-color: {$et_Newsletter.colorBackground};{/if}
                        {if !empty($et_Newsletter.colorFont)}color: {$et_Newsletter.colorFont};{/if}
                    }

                    #{$et_BaseWidget.cssId} .btn {
                        {if !empty($et_Newsletter.colorButton)}
                            background-color: {$et_Newsletter.colorButton};
                            border-color: {$et_Newsletter.colorButton};
                        {/if}
                        {if !empty($et_Newsletter.colorButtonFont)}color: {$et_Newsletter.colorButtonFont};{/if}
                    }

                    #{$et_BaseWidget.cssId} .et-has-backdrop .et-newsletter-content{
                        {if !empty($et_Newsletter.colorBackdrop)}background-color: {$et_Newsletter.colorBackdrop};{/if}
                        {if !empty($et_Newsletter.colorFont)}color: {$et_Newsletter.colorFont};{/if}
                    }
                </style>
            {/block}
        {/if}
    {/block}

    {block name="et-widget-container-inner"}
        {assign var="hasImage" value=($et_Newsletter.image && $et_Newsletter.image.src !== '')}
        {assign var="hasBackdrop" value=($hasImage && (empty($et_Newsletter.imagePosition) || $et_Newsletter.imagePosition === 'background'))}
        {block name="et-newsletter-wrapper-before"}{/block}
        <div class="{block name="et-newsletter-wrapper-class"}row et-newsletter-wrapper et-align-horizontal-{$et_Newsletter.contentAlignmentHorizontal} et-align-vertical-{$et_Newsletter.contentAlignmentVertical} et-image-position-{$et_Newsletter.imagePosition}{if $hasBackdrop} et-has-backdrop{/if}{/block}">
            {block name="et-newsletter-content-wrapper-before"}{/block}
            {block name="et-newsletter-image-container"}
                {if $hasImage && !empty($et_Newsletter.imagePosition) && $et_Newsletter.imagePosition !== 'background'}
                    <div class="{block name="et-newsletter-image-container-class"}et-newsletter-image-container col col-12 col-lg-6 px-0{/block}">
                        {image fluid=true lazy=$et_BaseWidget.lazyLoadImages webp=!empty($et_Newsletter.image.srcWebP)
                            src=$et_Newsletter.image.src
                            alt=$et_Newsletter.image.alt|escape
                            class="et-newsletter-image"
                        }
                    </div>
                {/if}
            {/block}
            <div class="{block name="et-newsletter-content-wrapper-class"}et-newsletter-content-wrapper col{if $et_Newsletter.contentAlignmentHorizontal !== 'fullWidth'} col-12 col-sm-10{if $hasImage && !empty($et_Newsletter.imagePosition) && $et_Newsletter.imagePosition !== 'background'} col-lg-6{else} col-lg-8{/if}{else} col-12{if $hasImage && !empty($et_Newsletter.imagePosition) && $et_Newsletter.imagePosition !== 'background'} col-lg-6{/if}{/if}{/block}">
                {block name="et-newsletter-content"}
                    <div class="et-newsletter-content">
                        {if isset($et_Newsletter.headline.value) && $et_Newsletter.headline.value !== ''}
                            {block name="et-newsletter-headline"}
                                <div class="et-newsletter-headline">
                                    {include file="widgets/base/textfield.tpl" value=$et_Newsletter.headline type="h2" classes="et-widget-headline"}
                                </div>
                            {/block}
                        {/if}

                        {block name="et-newsletter-form"}
                            <form method="post" action="{get_static_route id='newsletter.php'}">
                                {csrf_token}

                                {* Add Prefill Flag in case of captcha *}
                                {block name='et-newsletter-form-captcha'}
                                    {if (!isset($smarty.session.bAnti_spam_already_checked) || $smarty.session.bAnti_spam_already_checked !== true) &&
                                    isset($Einstellungen.newsletter.newsletter_sicherheitscode) && $Einstellungen.newsletter.newsletter_sicherheitscode !== 'N' && empty($smarty.session.Kunde->kKunde)}
                                        {assign var="mailInputName" value="et_newsletterEmailPrefill"}
                                    {else}
                                        {assign var="mailInputName" value="cEmail"}
                                        <input type="hidden" name="abonnieren" value="2"/>
                                    {/if}
                                {/block}

                                {block name="et-newsletter-form-fieldset"}
                                    <fieldset class="form-group newsletter-email-wrapper">
                                        <legend class="sr-only">{et_language key="et360_aria_fieldset_newsletter"}</legend>
                                        <div class="input-group input-group-lg et-input-group-round">
                                            {block name="et-newsletter-form-email"}
                                                <input
                                                    type="email"
                                                    name="{$mailInputName|default:"cEmail"}"
                                                    id="newsletter_email"
                                                    placeholder="{if $et_Newsletter.placeholder}{$et_Newsletter.placeholder|escape:"html"}{else}{lang key='emailadress'}{/if}" aria-label="{lang key='emailadress'}"
                                                    class="form-control"
                                                />
                                            {/block}

                                            {block name="et-newsletter-form-submit"}
                                                <div class="input-group-append">
                                                    {include file="widgets/base/button.tpl"
                                                        type="submit"
                                                        variant="primary"
                                                        classes="text-align-{$et_Newsletter.buttonLabel.textAlignment}{if isset($et_Newsletter.buttonLabel.style, $et_Newsletter.buttonLabel.style.classes)} {$et_Newsletter.buttonLabel.style.classes}{/if}"
                                                        cssStyle="{if isset($et_Newsletter.buttonLabel.style, $et_Newsletter.buttonLabel.style.styles)}{$et_Newsletter.buttonLabel.style.styles}{/if}"
                                                        label="{if $et_Newsletter.buttonLabel.value !== ''}{$et_Newsletter.buttonLabel.value}{else}{lang key='newsletterSendSubscribe' section='newsletter'}{/if}"
                                                    }
                                                </div>
                                            {/block}
                                        </div>
                                    </fieldset>
                                {/block}
                            </form>
                        {/block}

                        {if isset($et_Newsletter.description.value) && $et_Newsletter.description.value !== ''}
                            {block name="et-newsletter-description"}
                                <div class="et-newsletter-description">
                                    {include file="widgets/base/textfield.tpl" value=$et_Newsletter.description }
                                </div>
                            {/block}
                        {/if}
                    </div>
                {/block}
            </div>
            {block name="et-newsletter-content-wrapper-after"}{/block}
        </div>
        {block name="et-newsletter-wrapper-after"}{/block}
    {/block}
{/strip}