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

{strip}
    {block name="et-widget-inline-styles"}
        {if $et_TextLinks.customColorsEnabled}
            <style type="text/css">
                {if $et_TextLinks.customColorsEnabled}
                     #{$et_BaseWidget.cssId}.bg-fullsize.bg-fullsize,
                     #{$et_BaseWidget.cssId}.bg-boxed.bg-boxed .container {
                        {if !empty($et_TextLinks.colorBackground)} background-color: {$et_TextLinks.colorBackground};{/if}
                        {if !empty($et_TextLinks.colorFont)} color: {$et_TextLinks.colorFont};{/if}
                     }
                {/if}
                {if !empty($et_TextLinks.colorPartingLine)}
                    #{$et_BaseWidget.cssId} .et-text-links-wrapper.et-with-parting-line .et-text-links-item:not(:last-child) {
                        border-right-color: {$et_TextLinks.colorPartingLine};
                    }
                {/if}
            </style>
        {/if}
    {/block}
    {block name="et-widget-container-inner"}
        {block name="et-text-links-headline"}
            {include file="widgets/base/textfield.tpl" value=$et_TextLinks.headline type="h2" asRow=true classes="et-widget-headline"}
        {/block}
        <div class="row et-text-links-wrapper et-align-horizontal-{$et_TextLinks.alignmentHorizontal}{if $et_TextLinks.displayPartingLine} et-with-parting-line{/if}">
            <div class="col-12 et-text-links-items">
                {foreach from=$et_TextLinks.textLinks item='textLink'}
                    <div class="et-text-links-item" id="et-text-links-item-{$et_BaseWidget.id}-{$textLink.id}">
                        {if $textLink.link !== null}
                            <a href="{$textLink.link.href}" class="link-discreet" title="{$textLink.link.title}"{if $textLink.link.external} target="_blank" rel="noreferrer noopener"{/if}>
                                {/if}
                                {include file="widgets/base/textfield.tpl" value=$textLink.text type="div" prepend="{if $textLink.icon !== '' && !empty($textLink.text.value)}<i class=\"{$textLink.icon} et-text-links-item-icon\"></i>{/if}" classes="et-text-links-item-text" fallbackValue="{if $textLink.icon !== ''}<i class=\"{$textLink.icon} et-text-links-item-icon\"></i>{/if}"}
                                {if $textLink.link !== null}
                            </a>
                        {/if}
                    </div>
                {/foreach}
            </div>
        </div>
    {/block}
{/strip}