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

{strip}
    {block name="et-widget-inline-styles"}
        {if !empty($et_TextSections.textWidth.xs) ||
            !empty($et_TextSections.textWidth.sm) ||
            !empty($et_TextSections.textWidth.md) ||
            !empty($et_TextSections.textWidth.lg) ||
            !empty($et_TextSections.textWidth.xl) ||
            !empty($et_TextSections.imageWidth.xs) ||
            !empty($et_TextSections.imageWidth.sm) ||
            !empty($et_TextSections.imageWidth.md) ||
            !empty($et_TextSections.imageWidth.lg) ||
            !empty($et_TextSections.imageWidth.xl) ||
            !empty($et_TextSections.separatorLineSpacing.xs) ||
            !empty($et_TextSections.separatorLineSpacing.sm) ||
            !empty($et_TextSections.separatorLineSpacing.md) ||
            !empty($et_TextSections.separatorLineSpacing.lg) ||
            !empty($et_TextSections.separatorLineSpacing.xl) ||
            !empty($et_TextSections.customColorsEnabled)
        }
            <style type="text/css">
                {* COLORS *}
                {if !empty($et_TextSections.customColorsEnabled)}
                    {if !empty($et_TextSections.colorBackground) || !empty($et_TextSections.colorBackground)}
                        #{$et_BaseWidget.cssId}.bg-fullsize,
                        #{$et_BaseWidget.cssId}.bg-boxed .container {
                             {if !empty($et_TextSections.colorBackground)}background-color: {$et_TextSections.colorBackground};{/if}
                             {if !empty($et_TextSections.colorFont)}color: {$et_TextSections.colorFont};{/if}
                         }
                    {/if}
                    {if !empty($et_TextSections.colorSeparatorLine) || !empty($et_TextSections.colorSeparatorLine)}
                        #{$et_BaseWidget.cssId} .et-text-sections-section-separator {
                            border-bottom-color: {$et_TextSections.colorSeparatorLine};
                        }
                    {/if}
                {/if}
                {* TEXT WIDTH *}
                {if !empty($et_TextSections.textWidth.xs)}
                    @media (max-width: {$et_global.breakpoints.xsMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-sections-section-content {
                            flex-basis: calc({$et_TextSections.textWidth.xs}% - (var(--grid-gutter-width) / 2) - 1px);
                        }
                    }
                {/if}
                {if !empty($et_TextSections.textWidth.sm)}
                    @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-sections-section-content {
                            flex-basis: calc({$et_TextSections.textWidth.sm}% - (var(--grid-gutter-width) / 2) - 1px);
                        }
                    }
                {/if}
                {if !empty($et_TextSections.textWidth.md)}
                    @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-sections-section-content {
                            flex-basis: calc({$et_TextSections.textWidth.md}% - (var(--grid-gutter-width) / 2) - 1px);
                        }
                    }
                {/if}
                {if !empty($et_TextSections.textWidth.lg)}
                    @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-sections-section-content {
                            flex-basis: calc({$et_TextSections.textWidth.lg}% - (var(--grid-gutter-width) / 2) - 1px);
                        }
                    }
                {/if}
                {if !empty($et_TextSections.textWidth.xl)}
                    @media (min-width: {$et_global.breakpoints.xlMin}px) {
                        #{$et_BaseWidget.cssId} .et-text-sections-section-content {
                            flex-basis: calc({$et_TextSections.textWidth.xl}% - (var(--grid-gutter-width) / 2) - 1px);
                        }
                    }
                {/if}
                {* IMAGE WIDTH *}
                {if !empty($et_TextSections.imageWidth.xs)}
                    @media (max-width: {$et_global.breakpoints.xsMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-sections-section-image {
                            flex-basis: calc({$et_TextSections.imageWidth.xs}% - (var(--grid-gutter-width) / 2) - 1px);
                        }
                    }
                {/if}
                {if !empty($et_TextSections.imageWidth.sm)}
                    @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-sections-section-image {
                            flex-basis: calc({$et_TextSections.imageWidth.sm}% - (var(--grid-gutter-width) / 2) - 1px);
                        }
                    }
                {/if}
                {if !empty($et_TextSections.imageWidth.md)}
                    @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-sections-section-image {
                            flex-basis: calc({$et_TextSections.imageWidth.md}% - (var(--grid-gutter-width) / 2) - 1px);
                        }
                    }
                {/if}
                {if !empty($et_TextSections.imageWidth.lg)}
                    @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-sections-section-image {
                            flex-basis: calc({$et_TextSections.imageWidth.lg}% - (var(--grid-gutter-width) / 2) - 1px);
                        }
                    }
                {/if}
                {if !empty($et_TextSections.imageWidth.xl)}
                    @media (min-width: {$et_global.breakpoints.xlMin}px) {
                        #{$et_BaseWidget.cssId} .et-text-sections-section-image {
                            flex-basis: calc({$et_TextSections.imageWidth.xl}% - (var(--grid-gutter-width) / 2) - 1px);
                        }
                    }
                {/if}
                {* SEPARATOR LINE SPACING *}
                {if !empty($et_TextSections.separatorLineSpacing.xs)}
                    @media (max-width: {$et_global.breakpoints.xsMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-sections-section-separator {
                            margin-top: {$et_TextSections.separatorLineSpacing.xs}px;
                            margin-bottom: {$et_TextSections.separatorLineSpacing.xs}px;
                        }
                    }
                {/if}
                {if !empty($et_TextSections.separatorLineSpacing.sm)}
                    @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-sections-section-separator {
                            margin-top: {$et_TextSections.separatorLineSpacing.sm}px;
                            margin-bottom: {$et_TextSections.separatorLineSpacing.sm}px;
                        }
                    }
                {/if}
                {if !empty($et_TextSections.separatorLineSpacing.md)}
                    @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-sections-section-separator {
                            margin-top: {$et_TextSections.separatorLineSpacing.md}px;
                            margin-bottom: {$et_TextSections.separatorLineSpacing.md}px;
                        }
                    }
                {/if}
                {if !empty($et_TextSections.separatorLineSpacing.lg)}
                    @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-sections-section-separator {
                            margin-top: {$et_TextSections.separatorLineSpacing.lg}px;
                            margin-bottom: {$et_TextSections.separatorLineSpacing.lg}px;
                        }
                    }
                {/if}
                {if !empty($et_TextSections.separatorLineSpacing.xl)}
                    @media (min-width: {$et_global.breakpoints.xlMin}px) {
                        #{$et_BaseWidget.cssId} .et-text-sections-section-separator {
                            margin-top: {$et_TextSections.separatorLineSpacing.xl}px;
                            margin-bottom: {$et_TextSections.separatorLineSpacing.xl}px;
                        }
                    }
                {/if}
            </style>
        {/if}
    {/block}
    {block name="et-widget-container-inner"}
        {block name="et-text-sections-headline"}
            {include file="widgets/base/textfield.tpl" value=$et_TextSections.headline type="h2" asRow=true classes="et-widget-headline"}
        {/block}
        {block name="et-text-sections-text-before"}
            {if !empty($et_TextSections.textBefore.value)}{include file="widgets/base/textfield.tpl" value=$et_TextSections.textBefore type='div' classes="et-text-before"}{/if}
        {/block}
        {block name="et-text-sections-general-link-above"}
            {if !empty($et_TextSections.generalLink) && !empty($et_TextSections.generalLinkPosition) && $et_TextSections.generalLinkPosition === 'aboveSections'}
                {if !empty($et_TextSections.generalLinkLabel)}
                    <div class="et-text-sections-general-link et-position-above-sections et-align-horizontal-{$et_TextSections.generalLinkAlignmentHorizontal}">
                        {capture name='generalLinkLabel'}{include file="widgets/base/textfield.tpl" value=$et_TextSections.generalLinkLabel type='span'}{/capture}
                        {include file='widgets/base/button.tpl' variant="{($et_TextSections.generalLinkDisplayMode === 'button') ? 'primary':'link'}" label="{$smarty.capture.generalLinkLabel}" href="{$et_TextSections.generalLink.href}" isExternal="{$et_TextSections.generalLink.external}" title="{$et_TextSections.generalLink.title}"}
                    </div>
                {/if}
            {/if}
        {/block}
        {block name="et-text-sections-wrapper"}
            <div class="et-text-sections-wrapper">
                {foreach $et_TextSections.sections as $section}
                    <div class="et-text-sections-section et-text-sections-section-layout-{$section.layout}">
                        {block name="et-text-sections-sections-section-image"}
                            {if !empty($section.image.src)}
                                <div class="et-text-sections-section-image">
                                    {if !empty($section.link.href)}
                                        <a href="{$section.link.href}"{if $section.link.title !== ''} title="{$section.link.title|escape:'html'}"{/if}{if $section.link.external} target="_blank" rel="noreferrer noopener"{/if} class="no-style">
                                            {/if}
                                            {image lazy=$et_BaseWidget.lazyLoadImages webp=!empty($section.image.srcWebP)
                                                src="{$section.image.src}"
                                                alt="{$section.image.alt}"
                                                width={$section.image.width}
                                                height={$section.image.height}
                                                fluid=true
                                            }
                                            {if !empty($section.link.href)}
                                        </a>
                                    {/if}
                                </div>
                            {/if}
                        {/block}
                        {block name="et-text-sections-sections-section-content"}
                            <div class="et-text-sections-section-content et-text-sections-section-type-{$section.displayType}">
                                {if $section.displayType === 'structured'}
                                    {block name="et-text-sections-section-content-structured"}
                                        {if !empty($section.imageContent1.src)}
                                            <div class="et-text-sections-section-image-content">
                                                {image lazy=$et_BaseWidget.lazyLoadImages webp=!empty($section.imageContent1.srcWebP)
                                                    src="{$section.imageContent1.src}"
                                                    alt="{$section.imageContent1.alt}"
                                                    width={$section.imageContent1.width}
                                                    height={$section.imageContent1.height}
                                                    fluid=true
                                                }
                                            </div>
                                        {/if}
                                        {if !empty($section.textContent1.value)}{include file="widgets/base/textfield.tpl" value=$section.textContent1 type='div' classes="et-text-sections-section-text-content et-text-sections-section-text-content-1"}{/if}
                                        {if !empty($section.textContent2.value)}{include file="widgets/base/textfield.tpl" value=$section.textContent2 type='div' classes="et-text-sections-section-text-content et-text-sections-section-text-content-2"}{/if}
                                        {if !empty($section.textContent3.value)}{include file="widgets/base/textfield.tpl" value=$section.textContent3 type='div' classes="et-text-sections-section-text-content et-text-sections-section-text-content-3"}{/if}
                                        {block name="et-text-sections-section-content-link"}
                                            {if !empty($section.link.href) && $section.linkDisplayMode !== 'none' && !empty($section.linkLabel.value)}
                                                {if !empty($section.linkLabel.value)}
                                                    <div class="et-text-sections-section-content-link">
                                                        {capture name='contentLinkLabel'}{include file="widgets/base/textfield.tpl" value=$section.linkLabel type='span'}{/capture}
                                                        {include file='widgets/base/button.tpl' variant="{($section.linkDisplayMode === 'button') ? 'primary':'link'}" label="{$smarty.capture.contentLinkLabel}" href="{$section.link.href}" isExternal="{$section.link.external}" title="{$section.link.title}"}
                                                    </div>
                                                {/if}
                                            {/if}
                                        {/block}
                                    {/block}
                                {else}
                                    {block name="et-text-sections-section-content-flexible"}
                                        {$section.content}
                                    {/block}
                                {/if}
                            </div>
                        {/block}
                    </div>
                    {block name="et-text-sections-section-separator"}
                        {if $et_TextSections.separatorLine !== 'none' && !$section@last}
                            <div class="et-text-sections-section-separator et-text-sections-section-separator-{$et_TextSections.separatorLine}"></div>
                        {/if}
                    {/block}
                {/foreach}
            </div>
        {/block}
        {block name="et-text-sections-text-after"}
            {if !empty($et_TextSections.textAfter.value)}{include file="widgets/base/textfield.tpl" value=$et_TextSections.textAfter type='div' classes="et-text-after"}{/if}
        {/block}
        {block name="et-text-sections-general-link-below"}
            {if !empty($et_TextSections.generalLink) && !empty($et_TextSections.generalLinkPosition) && $et_TextSections.generalLinkPosition === 'belowSections'}
                {if !empty($et_TextSections.generalLinkLabel)}
                    <div class="et-text-sections-general-link et-position-below-sections et-align-horizontal-{$et_TextSections.generalLinkAlignmentHorizontal}">
                        {capture name='generalLinkLabel'}{include file="widgets/base/textfield.tpl" value=$et_TextSections.generalLinkLabel type='span'}{/capture}
                        {include file='widgets/base/button.tpl' variant="{($et_TextSections.generalLinkDisplayMode === 'button') ? 'primary':'link'}" label="{$smarty.capture.generalLinkLabel}" href="{$et_TextSections.generalLink.href}" isExternal="{$et_TextSections.generalLink.external}" title="{$et_TextSections.generalLink.title}"}
                    </div>
                {/if}
            {/if}
        {/block}
    {/block}
{/strip}