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

{strip}
    {block name="et-widget-inline-styles"}
        {if $et_TextVideo.customColorsEnabled}
            <style type="text/css">
                #{$et_BaseWidget.cssId}.bg-fullsize,
                #{$et_BaseWidget.cssId}.bg-boxed .container {
                    {if !empty($et_TextVideo.colorBackground)}background-color: {$et_TextVideo.colorBackground};{/if}
                    {if !empty($et_TextVideo.colorFont)}color: {$et_TextVideo.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_TextVideo.colorBackground} 100%);
                }
            </style>
        {/if}
        {if ((isset($et_TextVideo.textWidth.xs) && $et_TextVideo.textWidth.xs !== '' ||
            isset($et_TextVideo.textWidth.sm) && $et_TextVideo.textWidth.sm !== '' ||
            isset($et_TextVideo.textWidth.md) && $et_TextVideo.textWidth.md !== '' ||
            isset($et_TextVideo.textWidth.lg) && $et_TextVideo.textWidth.lg !== '' ||
            isset($et_TextVideo.textWidth.xl) && $et_TextVideo.textWidth.xl !== ''))
            ||
            ((isset($et_TextVideo.videoWidth.xs) && $et_TextVideo.videoWidth.xs !== '' ||
            isset($et_TextVideo.videoWidth.sm) && $et_TextVideo.videoWidth.sm !== '' ||
            isset($et_TextVideo.videoWidth.md) && $et_TextVideo.videoWidth.md !== '' ||
            isset($et_TextVideo.videoWidth.lg) && $et_TextVideo.videoWidth.lg !== '' ||
            isset($et_TextVideo.videoWidth.xl) && $et_TextVideo.videoWidth.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_TextVideo.textWidth.xs) && $et_TextVideo.textWidth.xs !== ''}
                    @media (max-width: {$et_global.breakpoints.xsMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-video-content {
                            flex-basis: {$et_TextVideo.textWidth.xs}%;
                            max-width: {$et_TextVideo.textWidth.xs}%;
                        }
                    }
                {/if}
                {if isset($et_TextVideo.textWidth.sm) && $et_TextVideo.textWidth.sm !== ''}
                    @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-video-content {
                            flex-basis: {$et_TextVideo.textWidth.sm}%;
                            max-width: {$et_TextVideo.textWidth.sm}%;
                        }
                    }
                {/if}
                {if isset($et_TextVideo.textWidth.md) && $et_TextVideo.textWidth.md !== ''}
                    @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-video-content {
                            flex-basis: {$et_TextVideo.textWidth.sm}%;
                            max-width: {$et_TextVideo.textWidth.sm}%;
                        }
                    }
                {/if}
                {if isset($et_TextVideo.textWidth.lg) && $et_TextVideo.textWidth.lg !== ''}
                    @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-video-content {
                            flex-basis: {$et_TextVideo.textWidth.lg}%;
                            max-width: {$et_TextVideo.textWidth.lg}%;
                        }
                    }
                {/if}
                {if isset($et_TextVideo.textWidth.xl) && $et_TextVideo.textWidth.xl !== ''}
                    @media (min-width: {$et_global.breakpoints.xlMin}px) {
                        #{$et_BaseWidget.cssId} .et-text-video-content {
                            flex-basis: {$et_TextVideo.textWidth.xl}%;
                            max-width: {$et_TextVideo.textWidth.xl}%;
                        }
                    }
                {/if}
                {* Image block width overrides *}
                {if isset($et_TextVideo.videoWidth.xs) && $et_TextVideo.videoWidth.xs !== ''}
                    @media (max-width: {$et_global.breakpoints.xsMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-video-embed {
                            flex-basis: {$et_TextVideo.videoWidth.xs}%;
                            max-width: {$et_TextVideo.videoWidth.xs}%;
                        }
                    }
                {/if}
                {if isset($et_TextVideo.videoWidth.sm) && $et_TextVideo.videoWidth.sm !== ''}
                    @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-video-embed {
                            flex-basis: {$et_TextVideo.videoWidth.sm}%;
                            max-width: {$et_TextVideo.videoWidth.sm}%;
                        }
                    }
                {/if}
                {if isset($et_TextVideo.videoWidth.md) && $et_TextVideo.videoWidth.md !== ''}
                    @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-video-embed {
                            flex-basis: {$et_TextVideo.videoWidth.sm}%;
                            max-width: {$et_TextVideo.videoWidth.sm}%;
                        }
                    }
                {/if}
                {if isset($et_TextVideo.videoWidth.lg) && $et_TextVideo.videoWidth.lg !== ''}
                    @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {
                        #{$et_BaseWidget.cssId} .et-text-video-embed {
                            flex-basis: {$et_TextVideo.videoWidth.lg}%;
                            max-width: {$et_TextVideo.videoWidth.lg}%;
                        }
                    }
                {/if}
                {if isset($et_TextVideo.videoWidth.xl) && $et_TextVideo.videoWidth.xl !== ''}
                    @media (min-width: {$et_global.breakpoints.xlMin}px) {
                        #{$et_BaseWidget.cssId} .et-text-video-embed {
                            flex-basis: {$et_TextVideo.videoWidth.xl}%;
                            max-width: {$et_TextVideo.videoWidth.xl}%;
                        }
                    }
                {/if}
            </style>
        {/if}
        {if isset($et_TextVideo.textPaddingHorizontal) && count($et_TextVideo.textPaddingHorizontal) > 0}
            {include file="widgets/snippets/style_breakpoint_values_generic.tpl" cssProperties=["padding-left","padding-right"] cssValueSuffix="px" breakpointValues=$et_TextVideo.textPaddingHorizontal targetElement="#{$et_BaseWidget.cssId} .et-text-video-content-inner"}
        {/if}
        {if isset($et_TextVideo.textPaddingVertical) && count($et_TextVideo.textPaddingVertical) > 0}
            {include file="widgets/snippets/style_breakpoint_values_generic.tpl" cssProperties=["padding-top","padding-bottom"] cssValueSuffix="px" breakpointValues=$et_TextVideo.textPaddingVertical targetElement="#{$et_BaseWidget.cssId} .et-text-video-content-inner"}
        {/if}
        {if isset($et_TextVideo.shortenToLength) && count($et_TextVideo.shortenToLength) > 0}
            {include file="widgets/snippets/style_limit_height.tpl" breakpointValues=$et_TextVideo.shortenToLength targetElement="#{$et_BaseWidget.cssId} .et-shorten-to-text"}
        {/if}
    {/block}

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

        {block name="et-text-video-wrapper"}
            <div class="row et-text-video-wrapper et-align-horizontal-{$et_TextVideo.alignmentHorizontal} et-align-vertical-{$et_TextVideo.alignmentVertical} et-layout-{$et_TextVideo.layout}"
                data-shorten-to='{json_encode($et_TextVideo.shortenToLength)}'
                data-shorten-to-height-auto="{if $et_TextVideo.shortenToAutoHeight}true{else}false{/if}"
            >
                {block name="et-text-video-embed"}
                    <div class="et-text-video-embed col col-12 col-sm-6">
                        {include file="widgets/base/video.tpl" video=$et_TextVideo.video}
                    </div>
                {/block}

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

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

                            {block name="et-text-video-text-buttons"}
                                {block name="et-text-video-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-video-text-buttons-read-less"}{/block}
                            {/block}

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