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

{strip}
    {block name="et-widget-inline-styles"}
        {if $et_HeaderMain.customColorsEnabled
        || $et_HeaderMain.orderLogo !== 0
        || $et_HeaderMain.orderSearch !== 0
        || $et_HeaderMain.orderAccountBasket !== 0
        || $et_HeaderMain.orderLogoMobile !== 0
        || $et_HeaderMain.orderSearchMobile !== 0
        || $et_HeaderMain.orderAccountBasketMobile !== 0
        || isset($et_HeaderMain.logoMaxHeight) && (!empty($et_HeaderMain.logoMaxHeight.xs) || !empty($et_HeaderMain.logoMaxHeight.sm) || !empty($et_HeaderMain.logoMaxHeight.md) || !empty($et_HeaderMain.logoMaxHeight.lg) || !empty($et_HeaderMain.logoMaxHeight.xl))}
            <style type="text/css">
                {if $et_HeaderMain.customColorsEnabled}
                    #{$et_BaseWidget.cssId}.bg-fullsize,
                    #{$et_BaseWidget.cssId}.bg-boxed .container,
                    #{$et_BaseWidget.cssId} .et-header-main-search {
                       {if !empty($et_HeaderMain.colorBackground)} background-color: {$et_HeaderMain.colorBackground};{/if}
                       {if !empty($et_HeaderMain.colorFont)} color: {$et_HeaderMain.colorFont};{/if}
                       {if !empty($et_HeaderMain.colorBottomLine)} border-bottom-color: {$et_HeaderMain.colorBottomLine};{/if}
                    }
                    {if !empty($et_HeaderMain.colorBackground) || !empty($et_HeaderMain.colorFont)}
                        #{$et_BaseWidget.cssId} .et-header-main-search {
                           {if !empty($et_HeaderMain.colorBackground)} background-color: {$et_HeaderMain.colorBackground};{/if}
                           {if !empty($et_HeaderMain.colorFont)} color: {$et_HeaderMain.colorFont};{/if}
                        }
                    {/if}
                {/if}
                {if $et_HeaderMain.orderLogoMobile !== 0 || $et_HeaderMain.orderSearchMobile !== 0 || $et_HeaderMain.orderAccountBasketMobile !== 0}
                    {* Order for mobile (MD and lower) to not mess up the regular header with menu etc. *}
                    @media(max-width:{$et_global.breakpoints.mdMax}px) {
                        {if $et_HeaderMain.orderLogoMobile !== 0}
                            #{$et_BaseWidget.cssId} .et-header-main-logo {
                                order: {$et_HeaderMain.orderLogoMobile};
                                justify-content: {if $et_HeaderMain.elementAlignmentMobile.logo === 0}flex-start{elseif $et_HeaderMain.elementAlignmentMobile.logo === 1}center{else}flex-end{/if};
                            }
                        {/if}
                        {if $et_HeaderMain.orderSearchMobile !== 0}
                            #{$et_BaseWidget.cssId} .et-header-main-mobile-menu {
                                order: {$et_HeaderMain.orderSearchMobile};
                                justify-content: {if $et_HeaderMain.elementAlignmentMobile.search === 0}flex-start{elseif $et_HeaderMain.elementAlignmentMobile.search === 1}center{else}flex-end{/if};
                            }
                        {/if}
                        {if $et_HeaderMain.orderAccountBasketMobile !== 0}
                            #{$et_BaseWidget.cssId} .et-header-main-account-basket {
                                order: {$et_HeaderMain.orderAccountBasketMobile};
                                justify-content: {if $et_HeaderMain.elementAlignmentMobile.account === 0}flex-start{elseif $et_HeaderMain.elementAlignmentMobile.account === 1}center{else}flex-end{/if};
                            }
                        {/if}
                    }
                {/if}
                {if $et_HeaderMain.orderLogo !== 0 || $et_HeaderMain.orderSearch !== 0 || $et_HeaderMain.orderAccountBasket !== 0}
                    {* Order for desktop LG and higher to not mess up the mobile header with menu etc. *}
                    @media(min-width:{$et_global.breakpoints.lgMin}px) {
                        {if $et_HeaderMain.orderLogo !== 0}#{$et_BaseWidget.cssId} .et-header-main-logo { order: {$et_HeaderMain.orderLogo}; }{/if}
                        {if $et_HeaderMain.orderSearch !== 0}#{$et_BaseWidget.cssId} .et-header-main-search { order: {$et_HeaderMain.orderSearch}; }{/if}
                        {if $et_HeaderMain.orderAccountBasket !== 0}#{$et_BaseWidget.cssId} .et-header-main-account-basket { order: {$et_HeaderMain.orderAccountBasket}; }{/if}
                    }
                {/if}
                {* Logo max heights *}
                {if isset($et_HeaderMain.logoMaxHeight)}
                    {if !empty($et_HeaderMain.logoMaxHeight.xs)} @media(max-width:{$et_global.breakpoints.xsMax}px) { #{$et_BaseWidget.cssId} .et-header-main-logo img { max-height: {$et_HeaderMain.logoMaxHeight.xs}px;} }{/if}
                    {if !empty($et_HeaderMain.logoMaxHeight.sm)} @media(min-width:{$et_global.breakpoints.smMin}px) and (max-width:{$et_global.breakpoints.smMax}px) { #{$et_BaseWidget.cssId} .et-header-main-logo img { max-height: {$et_HeaderMain.logoMaxHeight.sm}px;} }{/if}
                    {if !empty($et_HeaderMain.logoMaxHeight.md)} @media(min-width:{$et_global.breakpoints.mdMin}px) and (max-width:{$et_global.breakpoints.mdMax}px) { #{$et_BaseWidget.cssId} .et-header-main-logo img { max-height: {$et_HeaderMain.logoMaxHeight.md}px;} }{/if}
                    {if !empty($et_HeaderMain.logoMaxHeight.lg)} @media(min-width:{$et_global.breakpoints.lgMin}px) and (max-width:{$et_global.breakpoints.lgMax}px) { #{$et_BaseWidget.cssId} .et-header-main-logo img { max-height: {$et_HeaderMain.logoMaxHeight.lg}px;} }{/if}
                    {if !empty($et_HeaderMain.logoMaxHeight.xl)} @media(min-width:{$et_global.breakpoints.xlMin}px) { #{$et_BaseWidget.cssId} .et-header-main-logo img { max-height: {$et_HeaderMain.logoMaxHeight.xl}px;} }{/if}
                {/if}
            </style>
        {/if}
        {if isset($et_HeaderMain.mobileBreakpointsOnlyEnabled) && $et_HeaderMain.mobileBreakpointsOnlyEnabled}
            <style>
                @media(min-width:{$et_global.breakpoints.lgMin}px) {
                    #{$et_BaseWidget.cssId} {
                        display: none;
                    }
                }
            </style>
        {/if}
    {/block}
    {block name="et-widget-container-inner"}
        {et_isShopVersionAtLeast value="5.5.0-rc.1" assign='shopIsAtLeast55'}
            <div class="et-header-main-wrapper row">
                {block name="et-header-main-logo"}
                    {et_isShopVersionAtLeast value="5.5.0-rc.1" assign='shopIsAtLeast55'}
                    <div class="{block name="et-header-main-logo-class"}col-4 et-header-main-logo et-align-horizontal-{$et_HeaderMain.alignmentHorizontalLogo} et-align-vertical-{$et_HeaderMain.alignmentVerticalLogo}{/block}">
                        <div id="logo" class="logo-wrapper" itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
                            <meta itemprop="name" content="{$meta_publisher|strip_tags|escape:'html'}" />
                            <meta itemprop="url" content="{if isset($ShopHomeURL)}{$ShopHomeURL}{else}{$ShopURL}{/if}">
                            <meta itemprop="logo" content="{$ShopLogoURL}">
                            <a class="link-discreet no-text-decoration" href="{if isset($ShopHomeURL)}{$ShopHomeURL}{else}{$ShopURL}{/if}"{block name='et-header-main-logo-title'} title="{$Einstellungen.global.global_shopname}{if $shopIsAtLeast55} {lang key='startpage' section='breadcrumb'}{/if}"{/block}>
                                {block name='et-header-main-logo-logo'}
                                    {if $et_HeaderMain.logoSource === 'standard' && isset($ShopLogoURL)}
                                        {image src=$ShopLogoURL
                                        alt="{$Einstellungen.global.global_shopname}{if $shopIsAtLeast55} {lang key='startpage' section='breadcrumb'}{/if}"
                                        id="shop-logo"
                                        class="img-responsive"
                                        }
                                    {elseif $et_HeaderMain.logoSource === 'single' && $et_HeaderMain.logoSingle.src !== ''}
                                        {image src=$et_HeaderMain.logoSingle.src
                                        alt="{$Einstellungen.global.global_shopname}{if $shopIsAtLeast55} {lang key='startpage' section='breadcrumb'}{/if}"
                                        id="shop-logo"
                                        class="img-responsive"
                                        }
                                    {elseif $et_HeaderMain.logoSource === 'breakpoint' && !empty($et_HeaderMain.logoBreakpoint)}
                                        {include file='widgets/base/breakpoint_image.tpl' id='shop-logo' image=$et_HeaderMain.logoBreakpoint alt="{$Einstellungen.global.global_shopname}{if $shopIsAtLeast55} {lang key='startpage' section='breadcrumb'}{/if}" webp=true}
                                    {else}
                                        <span class="h1">{$Einstellungen.global.global_shopname}</span>
                                    {/if}
                                {/block}
                            </a>
                        </div>
                    </div>
                {/block}
                {block name="et-header-main-search"}
                    <div class="{block name="et-header-main-search-class"}col-12 col-lg-4 et-header-main-search et-align-horizontal-{$et_HeaderMain.alignmentHorizontalSearch} et-align-vertical-{$et_HeaderMain.alignmentVerticalSearch}{/block}">
                        <a href="#" class="et-header-main-search-close nav-link" data-toggle-search aria-label="{et_language key='et360_aria_close_search'}">
                            <i class="{et_getIcon key='searchClose'}"></i>
                        </a>
                        {if $et_HeaderMain.searchEnabled}
                            {include file='layout/header_nav_search.tpl'}
                        {/if}
                        {if $et_HeaderMain.comparelistEnabled}
                            {block name='et-header-main-compare'}
                                <div class="et-header-main-compare">
                                    {include file='layout/header_shop_nav_compare.tpl'}
                                </div>
                            {/block}
                        {/if}
                    </div>
                {/block}
                {block name="et-header-main-accout-basket"}
                    <div class="{block name="et-header-main-account-basket-class"}col-4 et-header-main-account-basket et-align-horizontal-{$et_HeaderMain.alignmentHorizontalAccountBasket} et-align-vertical-{$et_HeaderMain.alignmentVerticalAccountBasket}{/block}">
                        {if $et_HeaderMain.certificationImage.src !== '' || $et_HeaderMain.certificationLabel.value !== ''}
                            <div class="et-header-main-certification">
                                {if $et_HeaderMain.certificationLink !== null}
                                <a href="{$et_HeaderMain.certificationLink.href}" class="link-discreet" title="{$et_HeaderMain.certificationLink.title}"{if $et_HeaderMain.certificationLink.external} target="_blank" rel="noreferrer noopener"{/if}>
                                    {/if}
                                    {if $et_HeaderMain.certificationImage.src !== ''}
                                        <div class="et-header-main-certification-image">
                                            {image lazy=false webp=!empty($et_HeaderMain.certificationImage.srcWebP)
                                                src="{$et_HeaderMain.certificationImage.src}"
                                                alt="{$et_HeaderMain.certificationImage.alt}"
                                                width={$et_HeaderMain.certificationImage.width}
                                                height={$et_HeaderMain.certificationImage.height}
                                                class="img-responsive"
                                            }
                                        </div>
                                    {/if}
                                    {if $et_HeaderMain.certificationLabel.value !== ''}
                                        <div class="et-header-main-certification-label">
                                            {$et_HeaderMain.certificationLabel.value}
                                        </div>
                                    {/if}
                                    {if $et_HeaderMain.certificationLink !== null}
                                </a>
                                {/if}
                            </div>
                        {/if}
                        {if $et_HeaderMain.displayCurrencyLanguageSelect}
                            {block name='et-header-main-currency-language'}
                                <div class="et-header-main-language-currency">
                                    {include file='snippets/language_dropdown.tpl'}
                                    {include file='snippets/currency_dropdown.tpl'}
                                </div>
                            {/block}
                        {/if}
                        {block name='et-header-main-account'}
                            <div class="et-header-main-account">
                                {include file='layout/header_shop_nav_account.tpl'}
                            </div>
                        {/block}
                        {if $et_HeaderMain.wishlistEnabled}
                            {block name='et-header-main-wishlist'}
                                <div class="et-header-main-wishlist">
                                    {include file='layout/header_shop_nav_wish.tpl'}
                                </div>
                            {/block}
                        {/if}
                        {block name='et-header-main-basket'}
                            <div class="et-header-main-basket">
                                {include file='basket/cart_dropdown_label.tpl'}
                            </div>
                        {/block}
                    </div>
                {/block}
                {block name="et-header-main-mobilemenu-trigger"}
                    <div class="{block name="et-header-main-mobilemenu-trigger-class"}col-4 d-lg-none et-header-main-mobile-menu{/block}">
                        {et_getMenuSettings assign='etMenuSettings'}
                        {if $et_HeaderMain.searchEnabled && $et_HeaderMain.orderSearchMobile !== 0 && $et_HeaderMain.elementAlignmentMobile.search === 2}
                            {* Special case - here we position the search left of the menu *}
                            <a href="#" class="nav-link" data-toggle-search aria-label="{lang key="search"}">
                                <i class="{et_getIcon key='search'}"></i>
                            </a>
                        {/if}
                        {if $nSeitenTyp !== $smarty.const.PAGE_BESTELLVORGANG || $etMenuSettings.showDuringCheckout}
                            <a href="#" class="nav-link" data-toggle-mobile-menu aria-label="{if $shopIsAtLeast55}{lang key="toggleNavigation" section="aria"}{else}Menu{/if}">
                                <i class="{et_getIcon key='menu'}"></i>
                            </a>
                        {/if}
                        {if $et_HeaderMain.searchEnabled && ($et_HeaderMain.orderSearchMobile === 0 || $et_HeaderMain.elementAlignmentMobile.search !== 2)}
                            <a href="#" class="nav-link" data-toggle-search aria-label="{lang key="search"}">
                                <i class="{et_getIcon key='search'}"></i>
                            </a>
                        {/if}
                    </div>
                {/block}
            </div>
    {/block}
{/strip}