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

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

                {* Set correct color to fade out text *}
                {if !empty($et_TextBlock.colorBackground)}
                    #{$et_BaseWidget.cssId} .et-shorten-to-text:after {
                        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, {$et_TextBlock.colorBackground} 100%);
                    }
                {/if}
            </style>
        {/if}
        {if isset($et_TextBlock.columns) && count($et_TextBlock.columns) > 0}
            <style type="text/css">
                {if isset($et_TextBlock.columns.xs) && $et_TextBlock.columns.xs !== ''}
                    @media (max-width: {$et_global.breakpoints.xsMax}px) {
                        #{$et_BaseWidget.cssId} .et-shorten-to-text {
                            column-count: {$et_TextBlock.columns.xs};
                        }
                    }
                {/if}
                {if isset($et_TextBlock.columns.sm) && $et_TextBlock.columns.sm !== ''}
                    @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px)  {
                        #{$et_BaseWidget.cssId} .et-shorten-to-text {
                            column-count: {$et_TextBlock.columns.sm};
                        }
                    }
                {/if}
                {if isset($et_TextBlock.columns.md) && $et_TextBlock.columns.md !== ''}
                    @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px)  {
                        #{$et_BaseWidget.cssId} .et-shorten-to-text {
                            column-count: {$et_TextBlock.columns.md};
                        }
                    }
                {/if}
                {if isset($et_TextBlock.columns.lg) && $et_TextBlock.columns.lg !== ''}
                    @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px)  {
                        #{$et_BaseWidget.cssId} .et-shorten-to-text {
                            column-count: {$et_TextBlock.columns.lg};
                        }
                    }
                {/if}
                {if isset($et_TextBlock.columns.xl) && $et_TextBlock.columns.xl !== ''}
                    @media (min-width: {$et_global.breakpoints.xlMin}px) {
                        #{$et_BaseWidget.cssId} .et-shorten-to-text {
                            column-count: {$et_TextBlock.columns.xl};
                        }
                    }
                {/if}
            </style>
        {/if}
        {if isset($et_TextBlock.shortenToLength) && count($et_TextBlock.shortenToLength) > 0}
            {include file="widgets/snippets/style_limit_height.tpl" breakpointValues=$et_TextBlock.shortenToLength targetElement="#{$et_BaseWidget.cssId} .et-shorten-to-text"}
        {/if}
    {/block}

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

        {block name="et-text-block-content"}
            <div class="row et-text-block-content-wrapper"
                data-shorten-to='{json_encode($et_TextBlock.shortenToLength)}'
                data-shorten-to-columns='{json_encode($et_TextBlock.columns)}'
                data-shorten-to-height-auto="{if $et_TextBlock.shortenToAutoHeight}true{else}false{/if}"
            >
                <div class="col">
                    {block name="et-text-block-content-text"}
                        <div class="et-shorten-to-text">
                            {$et_TextBlock.text}
                        </div>
                    {/block}

                    {block name="et-text-block-content-buttons"}
                        {block name="et-text-block-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-block-content-buttons-read-less"}{/block}
                    {/block}
                </div>
            </div>
        {/block}
        {block name="et-text-block-related-link"}
            {if !empty($et_TextBlock.link)}
                {include file="widgets/snippets/slider_related_link.tpl" context="text_block" link=$et_TextBlock.link label=$et_TextBlock.linkLabel displayMode=$et_TextBlock.linkDisplayMode alignmentHorizontal=$et_TextBlock.linkAlignmentHorizontal}
            {/if}
        {/block}
    {/block}
{/strip}