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

{strip}
    {block name="et-widget-inline-styles"}
        {if $et_LinkGroups.customColorsEnabled || $et_LinkGroups.displayPartingLine}
            <style type="text/css">
                {if $et_LinkGroups.customColorsEnabled}
                     #{$et_BaseWidget.cssId}.bg-fullsize.bg-fullsize,
                     #{$et_BaseWidget.cssId}.bg-boxed.bg-boxed .container {
                        {if !empty($et_LinkGroups.colorBackground)} background-color: {$et_LinkGroups.colorBackground};{/if}
                        {if !empty($et_LinkGroups.colorFont)} color: {$et_LinkGroups.colorFont};{/if}
                     }
                     {if !empty($et_LinkGroups.colorPartingLine)}
                        #{$et_BaseWidget.cssId} .et-link-groups-display-column .et-link-groups-group,
                        #{$et_BaseWidget.cssId} .et-link-groups-display-row .et-links-recursive-wrapper.et-links-recursive-level-0 {
                            border-color: {$et_LinkGroups.colorPartingLine};
                        }
                    {/if}
                {/if}
                {block name="et-link-groups-inline-style-parting-line-correction"}
                    {if $et_LinkGroups.displayPartingLine}
                        {* The point of these styles is to correct for the superfluous right border on multilines per breakpoint when displaying a parting line. *}
                        {$itemsPerRow = $et_LinkGroups.itemsPerRow}
                        @media (max-width: {$et_global.breakpoints.xsMax}px) {
                            #{$et_BaseWidget.cssId} .et-link-groups-display-column .et-link-groups-group:nth-child({$itemsPerRow.xs}n),
                            #{$et_BaseWidget.cssId} .et-link-groups-display-row .et-links-recursive-wrapper.et-links-recursive-level-0:nth-child({$itemsPerRow.xs}n) {
                                border-color: transparent;
                            }
                        }
                        @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {
                            #{$et_BaseWidget.cssId} .et-link-groups-display-column .et-link-groups-group:nth-child({$itemsPerRow.sm}n),
                            #{$et_BaseWidget.cssId} .et-link-groups-display-row .et-links-recursive-wrapper.et-links-recursive-level-0:nth-child({$itemsPerRow.sm}n) {
                                border-color: transparent;
                            }
                        }
                        @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {
                            #{$et_BaseWidget.cssId} .et-link-groups-display-column .et-link-groups-group:nth-child({$itemsPerRow.md}n),
                            #{$et_BaseWidget.cssId} .et-link-groups-display-row .et-links-recursive-wrapper.et-links-recursive-level-0:nth-child({$itemsPerRow.md}n) {
                                border-color: transparent;
                            }
                        }
                        @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {
                            #{$et_BaseWidget.cssId} .et-link-groups-display-column .et-link-groups-group:nth-child({$itemsPerRow.lg}n),
                            #{$et_BaseWidget.cssId} .et-link-groups-display-row .et-links-recursive-wrapper.et-links-recursive-level-0:nth-child({$itemsPerRow.lg}n) {
                                border-color: transparent;
                            }
                        }
                        @media (min-width: {$et_global.breakpoints.xlMin}px) {
                            #{$et_BaseWidget.cssId} .et-link-groups-display-column .et-link-groups-group:nth-child({$itemsPerRow.xl}n),
                            #{$et_BaseWidget.cssId} .et-link-groups-display-row .et-links-recursive-wrapper.et-links-recursive-level-0:nth-child({$itemsPerRow.xl}n) {
                                border-color: transparent;
                            }
                        }
                    {/if}
                {/block}
            </style>
        {/if}
    {/block}
    {block name="et-widget-container-inner"}
        {et_isShopVersionAtLeast value="5.3.0-rc.3" assign='shopIsAtLeast53'}
        {block name="et-link-groups-headline"}
            {include file="widgets/base/textfield.tpl" value=$et_LinkGroups.headline type="h2" asRow=true classes="et-widget-headline"}
        {/block}
        {block name="et-link-groups-text-before"}
            {if !empty($et_LinkGroups.textBefore.value)}{include file="widgets/base/textfield.tpl" value=$et_LinkGroups.textBefore type='div' classes="et-text-before"}{/if}
        {/block}
        {$itemsPerRow = $et_LinkGroups.itemsPerRow}
        {$itemsCount=count($et_LinkGroups.linkGroups)}
        {block name="et-link-groups-wrapper"}
            <div class="{block name="et-link-groups-wrapper-class"}et-link-groups-wrapper et-link-groups-display-{$et_LinkGroups.linkGroupDisplay} et-align-horizontal-{$et_LinkGroups.alignmentHorizontal}{if $et_LinkGroups.displayPartingLine} et-with-parting-line{/if}{if $et_LinkGroups.linkGroupDisplay === 'column'} row row-cols-{min($itemsPerRow.xs, $itemsCount)} row-cols-sm-{min($itemsPerRow.sm, $itemsCount)} row-cols-md-{min($itemsPerRow.md, $itemsCount)} row-cols-lg-{min($itemsPerRow.lg, $itemsCount)} row-cols-xl-{min($itemsPerRow.xl, $itemsCount)}{/if}{/block}">
                {foreach $et_LinkGroups.linkGroups as $linkGroup}
                    {block name="et-link-groups-group"}
                        <div class="{block name="et-link-groups-group-class"}et-link-groups-group{if $et_LinkGroups.linkGroupDisplay === 'column'} col{/if}{/block}">
                            {block name="et-link-groups-group-name"}
                                {if $et_LinkGroups.showLinkGroupNameEnabled}<div class="{block name="et-link-groups-group-name-class"}et-link-groups-group-name h3{/block}">{$linkGroup->getName()}</div>{/if}
                            {/block}
                            {if $shopIsAtLeast53}
                                {$childLinks=$linkGroup->getHierarchy()}
                            {else}
                                {get_navigation linkgroupIdentifier=$linkGroup->getTemplate() assign='childLinks'}
                            {/if}
                            {$itemsCount=count($childLinks)}
                            {block name="et-link-groups-group-links"}
                                <div class="{block name="et-link-groups-group-links-class"}et-link-groups-group-links{if $et_LinkGroups.linkGroupDisplay === 'row'} row row-cols-{min($itemsPerRow.xs, $itemsCount)} row-cols-sm-{min($itemsPerRow.sm, $itemsCount)} row-cols-md-{min($itemsPerRow.md, $itemsCount)} row-cols-lg-{min($itemsPerRow.lg, $itemsCount)} row-cols-xl-{min($itemsPerRow.xl, $itemsCount)}{/if}{/block}">
                                    {foreach $childLinks as $childLink}
                                        {block name="et-link-groups-group-link"}
                                            {include file='widgets/snippets/links_recursive.tpl'
                                                limit=$et_LinkGroups.maxSubLinkDepth
                                                currentLink=$childLink
                                                level=0
                                                cssClass="{if $et_LinkGroups.linkGroupDisplay === 'row'}col{/if}"
                                                discreetLinks=false
                                            }
                                        {/block}
                                    {/foreach}
                                </div>
                            {/block}
                        </div>
                    {/block}
                {/foreach}
            </div>
        {/block}
        {block name="et-link-groups-text-after"}
            {if !empty($et_LinkGroups.textAfter.value)}{include file="widgets/base/textfield.tpl" value=$et_LinkGroups.textAfter type='div' classes="et-text-after"}{/if}
        {/block}
        {block name="et-link-groups-related-link"}
            {if !empty($et_LinkGroups.link)}
                {include file="widgets/snippets/slider_related_link.tpl" context="link_groups" link=$et_LinkGroups.link label=$et_LinkGroups.linkLabel displayMode=$et_LinkGroups.linkDisplayMode alignmentHorizontal=$et_LinkGroups.linkAlignmentHorizontal}
            {/if}
        {/block}
    {/block}
{/strip}