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

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

                {if !empty($et_SocialMedia.colorBackground) && empty($et_SocialMedia.colorBorder)}
                    #{$et_BaseWidget.cssId} .et-socialmedia-wrapper,
                    #{$et_BaseWidget.cssId} .et-socialmedia-links {
                        border-top: 0;
                        border-bottom: 0;
                    }
                {/if}

                {if !empty($et_SocialMedia.colorBorder)}
                    #{$et_BaseWidget.cssId} .et-socialmedia-wrapper,
                    #{$et_BaseWidget.cssId} .et-socialmedia-links {
                        border-top-color: {$et_SocialMedia.colorBorder};
                        border-bottom-color: {$et_SocialMedia.colorBorder};
                    }
                {/if}

                {if !empty($et_SocialMedia.colorFont)}
                    #{$et_BaseWidget.cssId} .et-socialmedia-wrapper,
                    #{$et_BaseWidget.cssId} .et-socialmedia-links-link {
                        color: {$et_SocialMedia.colorFont};
                    }
                {/if}

                {if !empty($et_SocialMedia.colorFontHover)}
                    #{$et_BaseWidget.cssId} .et-socialmedia-links-link:hover {
                        color: {$et_SocialMedia.colorFontHover};
                    }
                {/if}
            </style>
        {/if}
    {/block}

    {block name="et-widget-container-inner"}
        <div class="et-socialmedia-wrapper row et-border-top-{if $et_SocialMedia.borderTopEnabled}enabled{else}disabled{/if} et-border-bottom-{if $et_SocialMedia.borderBottomEnabled}enabled{else}disabled{/if}">
            {block name="et-socialmedia-headline"}
                <div class="col col-12 col-sm-4 col-md-3 col-lg-2 et-socialmedia-headline">
                    {include file="widgets/base/textfield.tpl" value=$et_SocialMedia.headline type="h4" classes="mb-0 et-widget-headline"}
                </div>
            {/block}

            {block name="et-socialmedia-links"}
                <ul class="col col-12 col-sm-8 col-md-9 col-lg-8 et-socialmedia-links et-list-unstyled">
                    {foreach from=$et_SocialMedia.socialMediaLinks item="socialMediaItem" name="socialMediaLinksLoop"}
                        {block name="et-socialmedia-links-link"}
                            <li>
                                {if !empty($socialMediaItem.link) && !empty($socialMediaItem.link.href)}<a href="{$socialMediaItem.link.href|default:'#'}" class="et-socialmedia-links-link"{if !empty($socialMediaItem.link.title)} title="{$socialMediaItem.link.title}"{/if}{if $socialMediaItem.link.external} rel="noreferrer noopener" target="_blank"{/if}>{/if}
                                    <i class="{$socialMediaItem.icon} et-socialmedia-links-icon" id="et-social-media-link-{$et_BaseWidget.id}-{$socialMediaItem.id}"></i>
                                {if !empty($socialMediaItem.link) && !empty($socialMediaItem.link.href)}</a>{/if}
                            </li>
                        {/block}
                    {/foreach}
                </ul>
            {/block}
        </div>
    {/block}
{/strip}