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

{strip}
    {block name="et-widget-inline-styles"}
        {if $et_ImageList.customColorsEnabled}
            <style type="text/css">
                {if $et_ImageList.customColorsEnabled}
                     #{$et_BaseWidget.cssId}.bg-fullsize,
                     #{$et_BaseWidget.cssId}.bg-boxed .container {
                        {if !empty($et_ImageList.colorBackground)} background-color: {$et_ImageList.colorBackground};{/if}
                        {if !empty($et_ImageList.colorFont)} color: {$et_ImageList.colorFont};{/if}
                     }
                {/if}
            </style>
        {/if}
    {/block}
    {block name="et-widget-container-inner"}
        {block name="et-image-list-headline"}
            {include file="widgets/base/textfield.tpl" value=$et_ImageList.headline type="h2" asRow=true classes="et-widget-headline"}
        {/block}
        {block name="et-image-list-text-before"}
            {if !empty($et_ImageList.textBefore.value)}{include file="widgets/base/textfield.tpl" value=$et_ImageList.textBefore type='div' classes="et-text-before"}{/if}
        {/block}
        <div class="et-image-list-wrapper et-align-horizontal-{$et_ImageList.alignmentHorizontal} row">
            {foreach from=$et_ImageList.imageLinks item='imageLink'}
                <div class="col et-image-list-item" id="et-image-list-item-{$et_BaseWidget.id}-{$imageLink.id}">
                    {if isset($imageLink.link, $imageLink.link.href) && $imageLink.link.href !== ''}<a href="{$imageLink.link.href}" title="{$imageLink.link.title}" class="et-image-list-item-link"{if $imageLink.link.external} rel="noreferrer noopener" target="_blank"{/if}>{/if}
                        {image fluid=true lazy=$et_BaseWidget.lazyLoadImages webp=!empty($imageLink.image.srcWebP)
                            src=$imageLink.image.src
                            alt=$imageLink.image.alt|escape
                            class="et-image-list-item-image"
                        }
                    {if isset($imageLink.link, $imageLink.link.href) && $imageLink.link.href !== ''}</a>{/if}
                </div>
            {/foreach}
        </div>
        {block name="et-image-list-text-after"}
            {if !empty($et_ImageList.textAfter.value)}{include file="widgets/base/textfield.tpl" value=$et_ImageList.textAfter type='div' classes="et-text-after"}{/if}
        {/block}
        {block name="et-image-list-related-link"}
            {if !empty($et_ImageList.link)}
                {include file="widgets/snippets/slider_related_link.tpl" context="image_list" link=$et_ImageList.link label=$et_ImageList.linkLabel displayMode=$et_ImageList.linkDisplayMode alignmentHorizontal=$et_ImageList.linkAlignmentHorizontal}
            {/if}
        {/block}
    {/block}
{/strip}