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

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

                {if !empty($et_Usps.colorIcon )}
                #{$et_BaseWidget.cssId} .et-usps-item-icon{
                    color:{$et_Usps.colorIcon };
                }
                {/if}
            </style>
        {/if}
    {/block}

    {block name="et-widget-container-inner"}
        {if isset($et_Usps.headline.value) && $et_Usps.headline.value !== ''}
            {block name="et-usps-headline"}
                <div class="et-usps-headline">
                    {include file="widgets/base/textfield.tpl" value=$et_Usps.headline type="h2" asRow=true classes="et-widget-headline"}
                </div>
            {/block}
        {/if}
        {block name="et-usps-text-before"}
            {if !empty($et_Usps.textBefore.value)}{include file="widgets/base/textfield.tpl" value=$et_Usps.textBefore type='div' classes="et-text-before"}{/if}
        {/block}
        {block name="et-usps-items"}
            <div class="et-usps-items et-usps-items-layout-{$et_Usps.itemLayout}">
                <div class="row">
                    {foreach from=$et_Usps.items item="item" name="uspItemLoop"}
                        {block name="et-usps-items-item"}
                            <div class="{block name="et-usps-items-item-class"}col col-12 col-sm-6 col-lg-3 et-usps-item{/block}">
                            {if isset($item.link) && !empty($item.link.href)}
                             <a href="{$item.link.href}" class="link-discreet"{if !empty($item.link.title)} title="{$item.link.title}"{/if}{if $item.link.external} target="_blank" rel="noreferrer noopener"{/if}>
                            {/if}
                                <div class="media">
                                    {if !empty($item.displayMode) && $item.displayMode === 'image'}
                                        {if !empty($item.image.src)}
                                            {block name="et-usps-items-item-image"}
                                                <div class="et-usps-item-image">
                                                    {image lazy=$et_BaseWidget.lazyLoadImages webp=!empty($item.image.srcWebP)
                                                        src="{$item.image.src}"
                                                        alt="{$item.image.alt}"
                                                        width={$item.image.width}
                                                        height={$item.image.height}
                                                        class="img-responsive"
                                                    }
                                                </div>
                                            {/block}
                                        {/if}
                                    {else}
                                        {if $item.icon}
                                            {block name="et-usps-items-item-icon"}
                                                <div class="et-usps-item-icon">
                                                    <i class="{$item.icon}"></i>
                                                </div>
                                            {/block}
                                        {/if}
                                    {/if}

                                    {block name="et-usps-items-item-content"}
                                        <div class="et-usps-item-content media-body">
                                            {if isset($item.title.value) && $item.title.value !== ''}
                                                {include file="widgets/base/textfield.tpl" value=$item.title type='strong'}
                                            {/if}

                                            {if isset($item.text.value) && $item.text.value !== ''}
                                                {include file="widgets/base/textfield.tpl" value=$item.text type='div'}
                                            {/if}
                                        </div>
                                    {/block}
                                </div>
                                {if isset($item.link) && !empty($item.link.href)}
                                </a>
                                {/if}
                            </div>
                        {/block}
                    {/foreach}
                </div>
            </div>
        {/block}
        {block name="et-usps-text-after"}
            {if !empty($et_Usps.textAfter.value)}{include file="widgets/base/textfield.tpl" value=$et_Usps.textAfter type='div' classes="et-text-after"}{/if}
        {/block}
        {block name="et-usps-related-link"}
            {if !empty($et_Usps.link)}
                {include file="widgets/snippets/slider_related_link.tpl" context="usps" link=$et_Usps.link label=$et_Usps.linkLabel displayMode=$et_Usps.linkDisplayMode alignmentHorizontal=$et_Usps.linkAlignmentHorizontal}
            {/if}
        {/block}
    {/block}
{/strip}