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

{strip}
    {block name="et-widget-inline-styles"}
        {if $et_HeaderUsp.customColorsEnabled}
            <style type="text/css">
                {if $et_HeaderUsp.customColorsEnabled}
                    #{$et_BaseWidget.cssId}.bg-fullsize,
                    #{$et_BaseWidget.cssId}.bg-boxed .container {
                        {if !empty($et_HeaderUsp.colorBackground)} background-color: {$et_HeaderUsp.colorBackground};{/if}
                        {if !empty($et_HeaderUsp.colorFont)} color: {$et_HeaderUsp.colorFont};{/if}
                        {if !empty($et_HeaderUsp.colorBottomLine) && $et_HeaderUsp.bottomLineEnabled} border-bottom-color: {$et_HeaderUsp.colorBottomLine};{/if}
                    }
                    {if !empty($et_HeaderUsp.colorFontHover)}
                        #{$et_BaseWidget.cssId} a:hover,
                        #{$et_BaseWidget.cssId} a:focus {
                            color: {$et_HeaderUsp.colorFontHover};
                        }
                    {/if}
                {/if}
            </style>
        {/if}
    {/block}
    {block name="et-widget-container-inner"}
        <div class="et-header-usp-wrapper row">
            <div class="col et-header-usp-content">
                <div class="et-header-usp-left">
                    {if count($et_HeaderUsp.uspTextItems) > 0}
                        {block name='et-header-usp-text-items'}
                            <div class="et-header-usp-text-items">
                                {foreach from=$et_HeaderUsp.uspTextItems item='uspTextItem'}
                                    <div class="et-header-usp-text-item" id="et-header-usp-text-item-{$et_BaseWidget.id}-{$uspTextItem.id}">
                                        {if $uspTextItem.link !== null}
                                        <a href="{$uspTextItem.link.href}" class="link-discreet" title="{$uspTextItem.link.title}"{if $uspTextItem.link.external} target="_blank" rel="noreferrer noopener"{/if}>
                                            {/if}
                                            {if !empty($uspTextItem.icon)}<i class="{$uspTextItem.icon}"></i>{/if}{include file='widgets/base/textfield.tpl' value=$uspTextItem.text type='span'}
                                            {if $uspTextItem.link !== null}
                                        </a>
                                        {/if}
                                    </div>
                                {/foreach}
                            </div>
                        {/block}
                    {/if}
                    {if $et_HeaderUsp.certificationImage.src !== '' || $et_HeaderUsp.certificationLabel.value !== ''}
                        {block name='et-header-usp-certification'}
                            <div class="et-header-usp-certification">
                                {if $et_HeaderUsp.certificationLink !== null}
                                <a href="{$et_HeaderUsp.certificationLink.href}" class="link-discreet" title="{$et_HeaderUsp.certificationLink.title}"{if $et_HeaderUsp.certificationLink.external} target="_blank" rel="noreferrer noopener"{/if}>
                                    {/if}
                                    {if $et_HeaderUsp.certificationImage.src !== ''}
                                        <div class="et-header-usp-certification-image">
                                            {image lazy=false webp=!empty($et_HeaderUsp.certificationImage.srcWebP)
                                                    src="{$et_HeaderUsp.certificationImage.src}"
                                                    alt="{$et_HeaderUsp.certificationImage.alt}"
                                                    width={$et_HeaderUsp.certificationImage.width}
                                                    height={$et_HeaderUsp.certificationImage.height}
                                                    class="img-responsive"
                                            }
                                        </div>
                                    {/if}
                                    {if $et_HeaderUsp.certificationLabel.value !== ''}
                                        <div class="et-header-usp-certification-label">
                                            {$et_HeaderUsp.certificationLabel.value}
                                        </div>
                                    {/if}
                                    {if $et_HeaderUsp.certificationLink !== null}
                                </a>
                                {/if}
                            </div>
                       {/block}
                    {/if}
                </div>
                <div class="et-header-usp-right">
                    {if count($et_HeaderUsp.uspMenuItems) > 0}
                        {block name='et-header-usp-menu-items'}
                            <div class="et-header-usp-menu-items">
                            {foreach from=$et_HeaderUsp.uspMenuItems item='uspMenuItem'}
                                <div class="et-header-usp-menu-item" id="et-header-usp-menu-item-{$et_BaseWidget.id}-{$uspMenuItem.id}">
                                     <div class="dropdown">
                                        <a class="dropdown-toggle et-dropdown-toggle nav-link et-header-usp-menu-item-headline" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button">
                                           {include file='widgets/base/textfield.tpl' value=$uspMenuItem.headline type='span' isDropdownControl=true}
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            {if !empty($uspMenuItem.linkGroup)}
                                                {foreach from=$uspMenuItem.linkGroup->getLinks() item='link'}
                                                    <a class="et-header-usp-menu-item-link dropdown-item" href="{$link->getURL()}" title="{$link->getName()}" rel="{if $link->getNoFollow()}nofollow{/if}">{$link->getName()}</a>
                                                {/foreach}
                                            {/if}
                                        </div>
                                    </div>
                                </div>
                            {/foreach}
                            </div>
                        {/block}
                    {/if}
                    {if $et_HeaderUsp.displayCurrencyLanguageSelect}
                        {block name='et-header-usp-currency-language'}
                            <div class="et-header-usp-language-currency">
                                {include file='snippets/language_dropdown.tpl'}
                                {include file='snippets/currency_dropdown.tpl'}
                            </div>
                        {/block}
                    {/if}
                </div>
            </div>
        </div>
    {/block}
{/strip}