{extends file="widgets/base/widget.tpl"}
{et_isShopVersionAtLeast value="5.7.0-rc.3" assign='shopIsAtLeast57'}

{block name="et-widget-inline-styles"}
    {if $et_FooterBoxes.customColorsEnabled}
        <style type="text/css">
            {if !empty($et_FooterBoxes.colorBackground) || !empty($et_FooterBoxes.colorFont)}
                #{$et_BaseWidget.cssId}.bg-fullsize,
                #{$et_BaseWidget.cssId} .container-md,
                #{$et_BaseWidget.cssId}.bg-fullsize .container-fluid {
                    {if !empty($et_FooterBoxes.colorBackground)} background-color: {$et_FooterBoxes.colorBackground};{/if}
                    {if !empty($et_FooterBoxes.colorFont)} color: {$et_FooterBoxes.colorFont};{/if}
                }
            {/if}
            {if !empty($et_FooterBoxes.colorMobileCollapseBackground) || !empty($et_FooterBoxes.colorMobileCollapseFont)}
                @media (max-width: {$et_global.breakpoints.smMax}px) {
                    #{$et_BaseWidget.cssId} .et-footer-box-content:not(.et-footer-box-content-no-headline) {
                        {if !empty($et_FooterBoxes.colorMobileCollapseBackground)} background-color: {$et_FooterBoxes.colorMobileCollapseBackground};{/if}
                        {if !empty($et_FooterBoxes.colorMobileCollapseFont)} color: {$et_FooterBoxes.colorMobileCollapseFont};{/if}
                    }
                }
            {/if}
            {if !empty($et_FooterBoxes.colorMobilePartingLine)}
                @media (max-width: {$et_global.breakpoints.smMax}px) {
                    #{$et_BaseWidget.cssId} .et-footer-box-heading {
                        border-bottom-color: {$et_FooterBoxes.colorMobilePartingLine};
                    }
                }
            {/if}
        </style>
    {/if}
{/block}

{block name="et-widget-container-class"}{if $et_BaseWidget.size === 'fullsize'}container-fluid{else}container-md{/if}{/block}

{strip}
    {block name="et-widget-container-inner"}
        {block name="et-widget-footer-boxes-defaults"}
            {$defaultTypeClass="h4"}
        {/block}
        <div class="et-footer-boxes-wrapper row" data-boxes-count="{count($et_FooterBoxes.boxes)}">
            {foreach from=$et_FooterBoxes.boxes item='box' name='footerBoxes'}
                <div class="{block name="et-footer-boxes-box-class"}et-footer-box col-12{if count($et_FooterBoxes.boxes) > 1} col-md-6{/if}{if count($et_FooterBoxes.boxes) === 3} col-lg-4{elseif count($et_FooterBoxes.boxes) > 3} col-lg-3{/if} et-footer-box-type-{$box.type}{if $box.mobileInitialOpen} mobile-initial-open{/if}{/block}" id="et-footer-box-{$et_BaseWidget.id}-{$box.id}">
                {if isset($box.headline, $box.headline.value) && !empty($box.headline.value)}
                    {block name="et-footer-box-headline"}
                        <div class="et-footer-box-heading et-collapse d-md-none" role="button" data-toggle="collapse" data-target="#et-footer-box-content-{$et_BaseWidget.id}-{$box.id}" aria-expanded="{if $box.mobileInitialOpen}true{else}false{/if}" aria-controls="et-footer-box-content-{$et_BaseWidget.id}-{$box.id}">
                            {* collapse toggle heading *}
                            {include file="widgets/base/textfield.tpl" value=$box.headline typeClass="{if empty($defaultTypeClass)}h4{else}{$defaultTypeClass}{/if}" classes="et-footer-box-headline" isCollapseControl=true}
                        </div>
                        <div class="et-footer-box-heading d-none d-md-block">
                            {* regular heading *}
                            {include file="widgets/base/textfield.tpl" value=$box.headline typeClass="{if empty($defaultTypeClass)}h4{else}{$defaultTypeClass}{/if}" classes="et-footer-box-headline"}
                        </div>
                    {/block}
                {/if}
                <div class="{block name="et-footer-box-content-collapser-class"}et-footer-content-collapser collapse{if $box.mobileInitialOpen || (!isset($box.headline, $box.headline.value) || empty($box.headline.value))} show{/if} d-md-block{/block}" id="et-footer-box-content-{$et_BaseWidget.id}-{$box.id}">
                    <div class="et-footer-box-content{if !isset($box.headline, $box.headline.value) || empty($box.headline.value)} et-footer-box-content-no-headline{/if}">
                        {if $box.type === 'linkGroup' && !empty($box.linkGroup)}
                            {block name='et-footer-box-linkgroup'}
                                {foreach from=$box.linkGroup->getLinks() item='link'}
                                    {block name='et-footer-box-linkgroup-link'}
                                        {if $link->getParent() === 0}
                                            {* Skip child links here *}
                                            <div class="et-footer-box-link"><a href="{$link->getURL()}" class="link-discreet" title="{$link->getName()}" rel="{if $link->getNoFollow()}nofollow{/if}">{$link->getName()}</a></div>
                                        {/if}
                                    {/block}
                                {/foreach}
                            {/block}
                        {/if}
                        {if $box.type === 'newsletter'}
                            {block name='et-footer-box-newsletter'}
                                <form method="post" action="{get_static_route id='newsletter.php'}">
                                    <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-sm et-input-group-round">
                                            <input type="email" name="et_newsletterEmailPrefill" id="newsletter_email_footerbox" placeholder="{lang key='emailadress'}" aria-label="{lang key='emailadress'}" class="form-control"/>
                                            <div class="input-group-append">
                                                {include file="widgets/base/button.tpl" variant="primary" type="submit" label="{lang key='newsletterSendSubscribe' section='newsletter'}"}
                                            </div>
                                        </div>
                                    </fieldset>
                                </form>
                                <div class="et-newsletter-description">{$box.content}</div>
                            {/block}
                        {/if}
                        {if $box.type === 'contact'}
                            {block name='et-footer-box-contact'}
                                <address translate="no">
                                    {if isset($Firma->cName) && !empty($Firma->cName)}
                                        <div class="et-footer-box-contact-name">{$Firma->cName}</div>
                                    {/if}
                                    {if isset($Firma->cStrasse) && !empty($Firma->cStrasse)}
                                        <div class="et-footer-box-contact-street">{$Firma->cStrasse}{if isset($Firma->cHausnummer) && !empty($Firma->cHausnummer)} {$Firma->cHausnummer}{/if}</div>
                                    {/if}
                                    {if isset($Firma->cPLZ) && !empty($Firma->cPLZ) || isset($Firma->cOrt) && !empty($Firma->cOrt)}
                                        <div class="et-footer-box-contact-city">{if isset($Firma->cPLZ) && !empty($Firma->cPLZ)}{$Firma->cPLZ}{/if}{if isset($Firma->cOrt) && !empty($Firma->cOrt)} {$Firma->cOrt}{/if}</div>
                                    {/if}
                                    {if isset($Firma->cLand) && !empty($Firma->cLand)}
                                        <div class="et-footer-box-contact-country">{$Firma->cLand}</div>
                                    {/if}
                                    {if isset($Firma->cTel) && !empty($Firma->cTel)}
                                        <div class="et-footer-box-contact-phone">{lang key="tel" section="account data"}: <a href="tel:{$Firma->cTel}" class="link-discreet">{$Firma->cTel}</a></div>
                                    {/if}
                                    {if isset($Firma->cFax) && !empty($Firma->cFax)}
                                        <div class="et-footer-box-contact-fax">{lang key="fax" section="account data"}: {$Firma->cFax}</div>
                                    {/if}
                                    {if !empty($box.contactMail)}
                                        <div class="et-footer-box-contact-mail"><a href="mailto:{$box.contactMail}" class="link-discreet">{$box.contactMail}</a></div>
                                    {/if}
                                </address>
                            {/block}
                        {/if}
                        {if $box.type === 'customContent'}
                            {block name='et-footer-box-custom-content'}{$box.content}{/block}
                        {/if}
                        {if $box.type === 'images'}
                            {block name='et-footer-box-images'}
                                <div class="row et-image-align-horizontal-{$box.imageAlignmentHorizontal}">
                                    {foreach from=$box.imageLinks item="imageLink"}
                                        {block name='et-footer-box-images-image-link'}
                                            <div class="et-footer-box-imagelink col-4" id="et-footer-box-imagelink-{$et_BaseWidget.id}-{$imageLink.id}">
                                                {if $imageLink.link !== null}
                                                <a href="{$imageLink.link.href}" title="{$imageLink.link.title}"{if $imageLink.link.external} target="_blank" rel="noreferrer noopener"{/if}>
                                                    {/if}
                                                    {image lazy=$et_BaseWidget.lazyLoadImages webp=!empty($imageLink.image.srcWebP)
                                                        src="{$imageLink.image.src}"
                                                        alt="{$imageLink.image.alt}"
                                                        width={$imageLink.image.width}
                                                        height={$imageLink.image.height}
                                                        class="img-responsive"
                                                    }
                                                    {if $imageLink.link !== null}
                                                </a>
                                                {/if}
                                            </div>
                                        {/block}
                                    {/foreach}
                                </div>
                            {/block}
                        {/if}
                        {if $box.type === 'textLinks'}
                            {block name='et-footer-box-text-links'}
                                <div class="row">
                                    {foreach from=$box.textLinks item="textLink"}
                                        {block name='et-footer-box-text-links-link'}
                                            <div class="et-footer-box-textlink et-footer-box-link{if $textLink.text.value !== ''} col-12{else} col-2 et-icon-only{/if}" id="et-footer-box-textlink-{$et_BaseWidget.id}-{$textLink.id}">
                                                {if $textLink.link !== null}
                                                    <a href="{$textLink.link.href}" class="link-discreet" title="{$textLink.link.title}"{if $textLink.link.external} target="_blank" rel="noreferrer noopener"{/if}>
                                                        {/if}
                                                        {include file="widgets/base/textfield.tpl" value=$textLink.text type="div" prepend="{if $textLink.icon !== '' && $textLink.text.value !== ''}<i class=\"{$textLink.icon} et-footer-box-textlink-icon\"></i>{/if}" classes="et-footer-box-textlink-text" fallbackValue="{if $textLink.icon !== ''}<i class=\"{$textLink.icon} et-footer-box-textlink-icon\"></i>{/if}"}
                                                        {if $textLink.link !== null}
                                                    </a>
                                                {/if}
                                            </div>
                                        {/block}
                                    {/foreach}
                                </div>
                            {/block}
                        {/if}
                        {block name='et-footer-box-withdrawal'}
                            {if $box.type !== 'customContent' && $box.withdrawalButtonEnabled && $shopIsAtLeast57 && isset($oSpezialseiten_arr[$smarty.const.LINKTYP_ONLINE_WRB_FORMULAR])}
                                <div class="et-footer-box-withdrawal">
                                    {block name='et-footer-box-withdrawal-link'}
                                        {if $box.withdrawalButtonType === 'link'}
                                            <div class="et-footer-box-link">
                                                <a href="{$oSpezialseiten_arr[$smarty.const.LINKTYP_ONLINE_WRB_FORMULAR]->getURL()}" class="link-discreet" title="{lang key='withdrawalForm' section='global'}" rel="nofollow">{lang key='withdrawalForm' section='global'}</a>
                                            </div>
                                        {else}
                                            {include file="snippets/withdrawal_link.tpl" variant="{$box.withdrawalButtonType}"}
                                        {/if}
                                    {/block}
                                </div>
                            {/if}
                        {/block}
                    </div>
                </div>
            </div>
            {/foreach}
        </div>
    {/block}
{/strip}