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

{strip}
    {block name="et-widget-container-inner"}
        {block name="et-listing-headline"}
            {include file="widgets/base/textfield.tpl" value=$et_Listing.headline type="h2" asRow=true classes="et-widget-headline"}
        {/block}
        {block name="et-listing-text-before"}
            {if !empty($et_Listing.textBefore.value)}{include file="widgets/base/textfield.tpl" value=$et_Listing.textBefore type='div' classes="et-text-before"}{/if}
        {/block}
        {block name="et-listing-general-link-above"}
            {if !empty($et_Listing.generalLink) && !empty($et_Listing.generalLinkPosition) && $et_Listing.generalLinkPosition === 'aboveItems'}
                {if !empty($et_Listing.generalLinkLabel)}
                    <div class="et-listing-general-link et-position-above-items et-align-horizontal-{$et_Listing.generalLinkAlignmentHorizontal}">
                        {capture name='generalLinkLabel'}{include file="widgets/base/textfield.tpl" value=$et_Listing.generalLinkLabel type='span'}{/capture}
                        {include file='widgets/base/button.tpl' variant="{($et_Listing.generalLinkDisplayMode === 'button') ? 'primary':'link'}" label="{$smarty.capture.generalLinkLabel}" href="{$et_Listing.generalLink.href}" isExternal="{$et_Listing.generalLink.external}" title="{$et_Listing.generalLink.title}"}
                    </div>
                {/if}
            {/if}
        {/block}
        {block name="et-listing-wrapper"}
            <div class="et-listing-wrapper et-layout-{$et_Listing.layout} row">
                {block name="et-listing-image"}
                    {if !empty($et_Listing.image.src)}
                        <div class="{block name="et-listing-image-class"}et-listing-image col-12 col-lg-6{/block}">
                            {if !empty($et_Listing.generalLink.href)}
                            <a href="{$et_Listing.generalLink.href}"{if $et_Listing.generalLink.title !== ''} title="{$et_Listing.generalLink.title|escape:'html'}"{/if}{if $et_Listing.generalLink.external} target="_blank" rel="noreferrer noopener"{/if} class="no-style">
                                {/if}
                                {image lazy=$et_BaseWidget.lazyLoadImages webp=!empty($et_Listing.image.srcWebP)
                                    src="{$et_Listing.image.src}"
                                    alt="{$et_Listing.image.alt}"
                                    width={$et_Listing.image.width}
                                    height={$et_Listing.image.height}
                                    fluid=true
                                }
                                {if !empty($et_Listing.generalLink.href)}
                            </a>
                            {/if}
                        </div>
                    {/if}
                {/block}
                {block name="et-listing-list"}
                    <div class="{block name="et-listing-list-class"}col-12{if !empty($et_Listing.image.src)} col-lg-6{/if}{/block}">
                        <{if strpos($et_Listing.bulletType, 'ordered') === 0}ol{else}ul{/if} class="et-listing-list et-listing-bullet-{$et_Listing.bulletType}">
                        {foreach $et_Listing.items as $item}
                            {block name="et-listing-item"}
                                <li class="et-listing-item">
                                    {if $et_Listing.bulletType !== 'none'}<span class="et-listing-item-bullet">{* Filled by CSS *}</span>{/if}
                                    {include file="widgets/base/textfield.tpl" value=$item.text type="span" classes="et-listing-item-text"}
                                </li>
                            {/block}
                        {/foreach}
                        </{if strpos($et_Listing.bulletType, 'ordered') === 0}ol{else}ul{/if}>
                    </div>
                {/block}
            </div>
        {/block}
        {block name="et-listing-text-after"}
            {if !empty($et_Listing.textAfter.value)}{include file="widgets/base/textfield.tpl" value=$et_Listing.textAfter type='div' classes="et-text-after"}{/if}
        {/block}
        {block name="et-listing-general-link-below"}
            {if !empty($et_Listing.generalLink.href) && !empty($et_Listing.generalLinkPosition) && $et_Listing.generalLinkPosition === 'belowItems'}
                {if !empty($et_Listing.generalLinkLabel.value)}
                    <div class="et-listing-general-link et-position-below-items et-align-horizontal-{$et_Listing.generalLinkAlignmentHorizontal}">
                        {capture name='generalLinkLabel'}{include file="widgets/base/textfield.tpl" value=$et_Listing.generalLinkLabel type='span'}{/capture}
                        {include file='widgets/base/button.tpl' variant="{($et_Listing.generalLinkDisplayMode === 'button') ? 'primary':'link'}" label="{$smarty.capture.generalLinkLabel}" href="{$et_Listing.generalLink.href}" isExternal="{$et_Listing.generalLink.external}" title="{$et_Listing.generalLink.title}"}
                    </div>
                {/if}
            {/if}
        {/block}
    {/block}
{/strip}