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

{strip}
    {block name="et-widget-inline-styles"}
        {if $et_Marquee.customColorsEnabled
        || !empty($et_Marquee.duration.xs) || !empty($et_Marquee.duration.sm) || !empty($et_Marquee.duration.md) || !empty($et_Marquee.duration.lg) || !empty($et_Marquee.duration.xl)
        || !empty($et_Marquee.minGap.xs) || !empty($et_Marquee.minGap.sm) || !empty($et_Marquee.minGap.md) || !empty($et_Marquee.minGap.lg) || !empty($et_Marquee.minGap.xl)}
            <style type="text/css">
                {if $et_Marquee.customColorsEnabled}
                     #{$et_BaseWidget.cssId}.bg-fullsize.bg-fullsize,
                     #{$et_BaseWidget.cssId}.bg-boxed.bg-boxed .container {
                        {if !empty($et_Marquee.colorBackground)} background: {$et_Marquee.colorBackground};{/if}
                        {if !empty($et_Marquee.colorFont)} color: {$et_Marquee.colorFont};{/if}
                     }
                {/if}
                {if !empty($et_Marquee.colorPartingText)}
                    #{$et_BaseWidget.cssId} .et-marquee-wrapper .et-marquee-parting-text {
                        color: {$et_Marquee.colorPartingText};
                    }
                {/if}
                {if !empty($et_Marquee.duration.xs)}
                    @media (max-width: {$et_global.breakpoints.xsMax}px) {
                        #{$et_BaseWidget.cssId} .et-marquee-items {
                            animation-duration: {$et_Marquee.duration.xs}s;
                        }
                    }
                {/if}
                {if !empty($et_Marquee.duration.sm)}
                    @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {
                        #{$et_BaseWidget.cssId} .et-marquee-items {
                            animation-duration: {$et_Marquee.duration.sm}s;
                        }
                    }
                {/if}
                {if !empty($et_Marquee.duration.md)}
                    @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {
                        #{$et_BaseWidget.cssId} .et-marquee-items {
                            animation-duration: {$et_Marquee.duration.md}s;
                        }
                    }
                {/if}
                {if !empty($et_Marquee.duration.lg)}
                    @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {
                        #{$et_BaseWidget.cssId} .et-marquee-items {
                            animation-duration: {$et_Marquee.duration.lg}s;
                        }
                    }
                {/if}
                {if !empty($et_Marquee.duration.xl)}
                    @media (min-width: {$et_global.breakpoints.xlMin}px) {
                        #{$et_BaseWidget.cssId} .et-marquee-items {
                            animation-duration: {$et_Marquee.duration.xl}s;
                        }
                    }
                {/if}
                {if !empty($et_Marquee.minGap.xs)}
                    @media (max-width: {$et_global.breakpoints.xsMax}px) {
                        #{$et_BaseWidget.cssId} .et-marquee-items-wrapper {
                            --et-marquee-gap: {$et_Marquee.minGap.xs}px;
                        }
                    }
                {/if}
                {if !empty($et_Marquee.minGap.sm)}
                    @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {
                        #{$et_BaseWidget.cssId} .et-marquee-items-wrapper {
                            --et-marquee-gap: {$et_Marquee.minGap.sm}px;
                        }
                    }
                {/if}
                {if !empty($et_Marquee.minGap.md)}
                    @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {
                        #{$et_BaseWidget.cssId} .et-marquee-items-wrapper {
                            --et-marquee-gap: {$et_Marquee.minGap.md}px;
                        }
                    }
                {/if}
                {if !empty($et_Marquee.minGap.lg)}
                    @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {
                        #{$et_BaseWidget.cssId} .et-marquee-items-wrapper {
                            --et-marquee-gap: {$et_Marquee.minGap.lg}px;
                        }
                    }
                {/if}
                {if !empty($et_Marquee.minGap.xl)}
                    @media (min-width: {$et_global.breakpoints.xlMin}px) {
                        #{$et_BaseWidget.cssId} .et-marquee-items-wrapper {
                            --et-marquee-gap: {$et_Marquee.minGap.xl}px;
                        }
                    }
                {/if}
            </style>
        {/if}
    {/block}
    {block name="et-widget-container-inner"}
        {block name="et-marquee-headline"}
            {include file="widgets/base/textfield.tpl" value=$et_Marquee.headline type="h2" asRow=true classes="et-widget-headline"}
        {/block}
        <div class="row et-marquee-wrapper{if $et_Marquee.direction !== 'none'} et-animation-{$et_Marquee.direction}{if $et_Marquee.pauseOnHover === 'enabled'} et-pause-on-hover{/if}{/if}">
            <div class="col-12">
                <div class="{block name="et-marquee-items-wrapper-class"}et-marquee-items-wrapper d-flex{/block}">
                    <div class="{block name="et-marquee-items-class"}et-marquee-items d-flex overflow-hidden{/block}">
                        {foreach from=$et_Marquee.items item='marqueeItem'}
                            <div class="et-marquee-item">
                                {if $marqueeItem.link !== null && !empty($marqueeItem.link.href)}
                                    <a href="{$marqueeItem.link.href}" class="link-discreet" title="{$marqueeItem.link.title}"{if $marqueeItem.link.external} target="_blank" rel="noreferrer noopener"{/if}>
                                        {/if}
                                        {include file="widgets/base/textfield.tpl" value=$marqueeItem.text type="div" prepend="{if $marqueeItem.icon !== '' && !empty($marqueeItem.text.value)}<i class=\"{$marqueeItem.icon} et-marquee-item-icon\"></i>{/if}" classes="et-marquee-item-text" fallbackValue="{if $marqueeItem.icon !== ''}<i class=\"{$marqueeItem.icon} et-marquee-item-icon\"></i>{/if}"}
                                        {if $marqueeItem.link !== null && !empty($marqueeItem.link.href)}
                                    </a>
                                {/if}
                            </div>
                            {block name="et-marquee-parting-text"}
                                {include file="widgets/base/textfield.tpl" value=$et_Marquee.partingText type="div" asRow=false classes="et-marquee-item et-marquee-parting-text"}
                            {/block}
                        {/foreach}
                    </div>
                    {if $et_Marquee.direction !== 'none'}
                        {* Duplicated items to achieve infinite animation *}
                        <div class="{block name="et-marquee-items-duplicated-class"}et-marquee-items d-flex{/block}" aria-hidden="true" data-nosnippet>
                            {foreach from=$et_Marquee.items item='marqueeItem'}
                                <div class="et-marquee-item">
                                    {if $marqueeItem.link !== null && !empty($marqueeItem.link.href)}
                                        <a href="{$marqueeItem.link.href}" class="link-discreet" title="{$marqueeItem.link.title}"{if $marqueeItem.link.external} target="_blank" rel="noreferrer noopener"{/if}>
                                            {/if}
                                            {include file="widgets/base/textfield.tpl" value=$marqueeItem.text type="div" prepend="{if $marqueeItem.icon !== '' && !empty($marqueeItem.text.value)}<i class=\"{$marqueeItem.icon} et-marquee-item-icon\"></i>{/if}" classes="et-marquee-item-text" fallbackValue="{if $marqueeItem.icon !== ''}<i class=\"{$marqueeItem.icon} et-marquee-item-icon\"></i>{/if}"}
                                            {if $marqueeItem.link !== null && !empty($marqueeItem.link.href)}
                                        </a>
                                    {/if}
                                </div>
                                {block name="et-marquee-parting-text"}
                                    {include file="widgets/base/textfield.tpl" value=$et_Marquee.partingText type="div" asRow=false classes="et-marquee-item et-marquee-parting-text"}
                                {/block}
                            {/foreach}
                        </div>
                    {/if}
                </div>
            </div>
        </div>
    {/block}
{/strip}