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

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

                    {* Set correct color to fade out text *}
                    #{$et_BaseWidget.cssId} .et-shorten-to-text:after {
                        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, {$et_TextImage.colorBackground} 100%);
                    }
                </style>
            {/block}
        {/if}
        {if ((isset($et_TextImage.textWidth.xs) && $et_TextImage.textWidth.xs !== '' ||
            isset($et_TextImage.textWidth.sm) && $et_TextImage.textWidth.sm !== '' ||
            isset($et_TextImage.textWidth.md) && $et_TextImage.textWidth.md !== '' ||
            isset($et_TextImage.textWidth.lg) && $et_TextImage.textWidth.lg !== '' ||
            isset($et_TextImage.textWidth.xl) && $et_TextImage.textWidth.xl !== ''))
            ||
            ((isset($et_TextImage.imageWidth.xs) && $et_TextImage.imageWidth.xs !== '' ||
            isset($et_TextImage.imageWidth.sm) && $et_TextImage.imageWidth.sm !== '' ||
            isset($et_TextImage.imageWidth.md) && $et_TextImage.imageWidth.md !== '' ||
            isset($et_TextImage.imageWidth.lg) && $et_TextImage.imageWidth.lg !== '' ||
            isset($et_TextImage.imageWidth.xl) && $et_TextImage.imageWidth.xl !== ''))
        }
            {* Styling the width is done by changing flex-basis and max-width on the element in percentages - this is also how Bootstrap 4 does columns. *}
            <style type="text/css">
                {* Text block width overrides *}
                {if isset($et_TextImage.textWidth.xs) && $et_TextImage.textWidth.xs !== ''}
                    @media (max-width: {$et_global.breakpoints.xsMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-image-content-wrapper {
                            flex-basis: {$et_TextImage.textWidth.xs}%;
                            max-width: {$et_TextImage.textWidth.xs}%;
                        }
                    }
                {/if}
                {if isset($et_TextImage.textWidth.sm) && $et_TextImage.textWidth.sm !== ''}
                    @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-image-content-wrapper {
                            flex-basis: {$et_TextImage.textWidth.sm}%;
                            max-width: {$et_TextImage.textWidth.sm}%;
                        }
                    }
                {/if}
                {if isset($et_TextImage.textWidth.md) && $et_TextImage.textWidth.md !== ''}
                    @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-image-content-wrapper {
                            flex-basis: {$et_TextImage.textWidth.sm}%;
                            max-width: {$et_TextImage.textWidth.sm}%;
                        }
                    }
                {/if}
                {if isset($et_TextImage.textWidth.lg) && $et_TextImage.textWidth.lg !== ''}
                    @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-image-content-wrapper {
                            flex-basis: {$et_TextImage.textWidth.lg}%;
                            max-width: {$et_TextImage.textWidth.lg}%;
                        }
                    }
                {/if}
                {if isset($et_TextImage.textWidth.xl) && $et_TextImage.textWidth.xl !== ''}
                    @media (min-width: {$et_global.breakpoints.xlMin}px) {
                        #{$et_BaseWidget.cssId} .et-text-image-content-wrapper {
                            flex-basis: {$et_TextImage.textWidth.xl}%;
                            max-width: {$et_TextImage.textWidth.xl}%;
                        }
                    }
                {/if}
                {* Image block width overrides *}
                {if isset($et_TextImage.imageWidth.xs) && $et_TextImage.imageWidth.xs !== ''}
                    @media (max-width: {$et_global.breakpoints.xsMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-image-image {
                            flex-basis: {$et_TextImage.imageWidth.xs}%;
                            max-width: {$et_TextImage.imageWidth.xs}%;
                        }
                    }
                {/if}
                {if isset($et_TextImage.imageWidth.sm) && $et_TextImage.imageWidth.sm !== ''}
                    @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-image-image {
                            flex-basis: {$et_TextImage.imageWidth.sm}%;
                            max-width: {$et_TextImage.imageWidth.sm}%;
                        }
                    }
                {/if}
                {if isset($et_TextImage.imageWidth.md) && $et_TextImage.imageWidth.md !== ''}
                    @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-image-image {
                            flex-basis: {$et_TextImage.imageWidth.sm}%;
                            max-width: {$et_TextImage.imageWidth.sm}%;
                        }
                    }
                {/if}
                {if isset($et_TextImage.imageWidth.lg) && $et_TextImage.imageWidth.lg !== ''}
                    @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-image-image {
                            flex-basis: {$et_TextImage.imageWidth.lg}%;
                            max-width: {$et_TextImage.imageWidth.lg}%;
                        }
                    }
                {/if}
                {if isset($et_TextImage.imageWidth.xl) && $et_TextImage.imageWidth.xl !== ''}
                    @media (min-width: {$et_global.breakpoints.xlMin}px) {
                        #{$et_BaseWidget.cssId} .et-text-image-image {
                            flex-basis: {$et_TextImage.imageWidth.xl}%;
                            max-width: {$et_TextImage.imageWidth.xl}%;
                        }
                    }
                {/if}
            </style>
        {/if}
        {if isset($et_TextImage.textPaddingHorizontal) && count($et_TextImage.textPaddingHorizontal) > 0}
            {include file="widgets/snippets/style_breakpoint_values_generic.tpl" cssProperties=["padding-left","padding-right"] cssValueSuffix="px" breakpointValues=$et_TextImage.textPaddingHorizontal targetElement="#{$et_BaseWidget.cssId} .et-text-image-content"}
        {/if}
        {if isset($et_TextImage.textPaddingVertical) && count($et_TextImage.textPaddingVertical) > 0}
            {include file="widgets/snippets/style_breakpoint_values_generic.tpl" cssProperties=["padding-top","padding-bottom"] cssValueSuffix="px" breakpointValues=$et_TextImage.textPaddingVertical targetElement="#{$et_BaseWidget.cssId} .et-text-image-content"}
        {/if}
        {if isset($et_TextImage.shortenToLength) && count($et_TextImage.shortenToLength) > 0}
            {include file="widgets/snippets/style_limit_height.tpl" breakpointValues=$et_TextImage.shortenToLength targetElement="#{$et_BaseWidget.cssId} .et-shorten-to-text"}
        {/if}
    {/block}

    {block name="et-widget-container-inner"}
        {block name="et-text-image-headline"}
            <div class="et-text-image-headline">
                {include file="widgets/base/textfield.tpl" value=$et_TextImage.headline asRow=true type="h2" classes="et-widget-headline{if isset($et_TextImage.headline2) && !empty($et_TextImage.headline2.value)} et-has-second-headline{/if}"}
                {if isset($et_TextImage.headline2) && !empty($et_TextImage.headline2.value)}
                    {include file="widgets/base/textfield.tpl" value=$et_TextImage.headline2 asRow=true type="h3" classes="et-widget-headline"}
                {/if}
            </div>
        {/block}

        {block name="et-text-image-wrapper"}
            <div class="row et-text-image-wrapper {if $et_TextImage.noPadding}et-text-image-nopadding{/if} et-align-horizontal-{$et_TextImage.alignmentHorizontal} et-align-vertical-{$et_TextImage.alignmentVertical} et-layout-{$et_TextImage.layout}"
                data-shorten-to='{json_encode($et_TextImage.shortenToLength)}'
                data-shorten-to-height-auto="{if $et_TextImage.shortenToAutoHeight}true{else}false{/if}"
            >
                {block name="et-text-image-image"}
                    {if $et_TextImage.image && $et_TextImage.image.src !== ''}
                        <div class="et-text-image-image col col-12 col-sm-6{if !empty($et_TextImage.imageDisplayMode)} et-image-display-mode-{$et_TextImage.imageDisplayMode}{/if}">
                            {image lazy=$et_BaseWidget.lazyLoadImages webp=!empty($et_TextImage.image.srcWebP)
                                src="{$et_TextImage.image.src}"
                                alt="{$et_TextImage.image.alt}"
                                width={$et_TextImage.image.width}
                                height={$et_TextImage.image.height}
                                class="img-responsive"
                            }
                        </div>
                    {/if}
                {/block}

                {block name="et-text-image-content-wrapper"}
                    <div class="et-text-image-content-wrapper col col-12{if $et_TextImage.image && $et_TextImage.image.src !== ''} col-sm-6{/if}">
                        {block name="et-text-image-content"}
                            <div class="et-text-image-content">
                                {block name="et-text-image-content-headline"}
                                    {include file="widgets/base/textfield.tpl" value=$et_TextImage.textHeadline type="h2" classes="{if isset($et_TextImage.textHeadline2) && !empty($et_TextImage.textHeadline2.value)}et-has-second-headline{/if}"}
                                    {if isset($et_TextImage.textHeadline2) && !empty($et_TextImage.textHeadline2.value)}
                                        {include file="widgets/base/textfield.tpl" value=$et_TextImage.textHeadline2 type="h3"}
                                    {/if}
                                {/block}

                                {block name="et-text-image-text"}
                                    <div class="et-text-image-text et-shorten-to-text">
                                        {$et_TextImage.text}
                                    </div>
                                {/block}

                                {block name="et-text-image-text-buttons"}
                                    {block name="et-text-image-content-buttons-read-more"}
                                        <div class="et-shorten-to-more" style="display: none" aria-expanded="true" role="button">
                                            {include file="widgets/base/button.tpl"
                                                title="{et_language key='et360_read_more'}"
                                                variant="link"
                                                icon="{et_getIcon key='readMore'}"
                                                iconPosition="right"
                                                classes="et-collapse-closed"
                                                label="{et_language key='et360_read_more'}"
                                            }
                                        </div>
                                    {/block}

                                    {* No read less button on default theme, but maybe for child themes *}
                                    {block name="et-text-image-text-buttons-read-less"}{/block}
                                {/block}

                                {if ($et_TextImage.link && isset($et_TextImage.linkLabel) && !empty($et_TextImage.linkLabel.value)) || ($et_TextImage.useSecondaryLink && $et_TextImage.secondaryLink && isset($et_TextImage.secondaryLinkLabel) && !empty($et_TextImage.secondaryLinkLabel.value))}
                                    <div class="et-text-image-links">
                                {/if}
                                {if $et_TextImage.link && isset($et_TextImage.linkLabel) && !empty($et_TextImage.linkLabel.value)}
                                    {block name="et-text-image-link"}
                                        <div class="et-text-image-link et-text-image-link-primary">
                                            {capture name='primaryLinkLabel'}{include file="widgets/base/textfield.tpl" value=$et_TextImage.linkLabel type='span'}{/capture}
                                            {include file="widgets/base/button.tpl"
                                                href="{$et_TextImage.link.href}"
                                                title="{$et_TextImage.link.title}"
                                                isExternal="{$et_TextImage.link.external}"
                                                iconPosition="{($et_TextImage.linkDisplayMode === 'button') ? 'default' : 'right'}"
                                                variant="{($et_TextImage.linkDisplayMode === 'button') ? $et_TextImage.linkButtonType : 'link'}"
                                                label="{$smarty.capture.primaryLinkLabel}"
                                            }
                                        </div>
                                    {/block}
                                {/if}
                                {if $et_TextImage.useSecondaryLink && $et_TextImage.secondaryLink && isset($et_TextImage.secondaryLinkLabel) && !empty($et_TextImage.secondaryLinkLabel.value)}
                                    {block name="et-text-image-link-secondary"}
                                        <div class="et-text-image-link et-text-image-link-secondary">
                                            {capture name='secondaryLinkLabel'}{include file="widgets/base/textfield.tpl" value=$et_TextImage.secondaryLinkLabel type='span'}{/capture}
                                            {include file="widgets/base/button.tpl"
                                            href="{$et_TextImage.secondaryLink.href}"
                                            title="{$et_TextImage.secondaryLink.title}"
                                            isExternal="{$et_TextImage.secondaryLink.external}"
                                            iconPosition="{($et_TextImage.secondaryLinkDisplayMode === 'button') ? 'default' : 'right'}"
                                            variant="{($et_TextImage.secondaryLinkDisplayMode === 'button') ? $et_TextImage.secondaryLinkButtonType : 'link'}"
                                            label="{$smarty.capture.secondaryLinkLabel}"
                                            }
                                        </div>
                                    {/block}
                                {/if}
                                {if ($et_TextImage.link && isset($et_TextImage.linkLabel) && !empty($et_TextImage.linkLabel.value)) || ($et_TextImage.useSecondaryLink && $et_TextImage.secondaryLink && isset($et_TextImage.secondaryLinkLabel) && !empty($et_TextImage.secondaryLinkLabel.value))}
                                    </div>
                                {/if}
                            </div>
                        {/block}
                    </div>
                {/block}
            </div>
        {/block}
    {/block}
{/strip}
