{block name="et-base-widget"}
{strip}
    {opcMountPoint id=$et_BaseWidget.opcIdBefore inContainer=false}
    <div class="et-widget et-widget-{mb_strtolower($et_BaseWidget.type)} bg{if $et_BaseWidget.size === 'fullsizeBoxed' || $et_BaseWidget.size === 'fullsize' || $et_BaseWidget.size === 'fullsizeImage'}-fullsize{else}-boxed{/if}
        {if $et_BaseWidget.cssClass !== ''} {$et_BaseWidget.cssClass}{/if}
        {if isset($et_BaseWidget.bottomLineEnabled) && $et_BaseWidget.bottomLineEnabled} bottom-line-enabled{/if}
        {if isset($et_BaseWidget.sticky) && $et_BaseWidget.sticky} et-sticky{/if}{if JTL\Shop::isAdmin(true) && !empty($et_admin.pluginBaseUrl) && !empty($et_admin.pencilModeEnabled)} et-admin{/if}" id="{$et_BaseWidget.cssId}">
        {block name="et-widget-spacing-styles"}
            {if isset($et_BaseWidget.spacingTop.xs) && $et_BaseWidget.spacingTop.xs !== '' || isset($et_BaseWidget.spacingBottom.xs) && $et_BaseWidget.spacingBottom.xs !== '' ||
                isset($et_BaseWidget.spacingTop.sm) && $et_BaseWidget.spacingTop.sm !== ''  || isset($et_BaseWidget.spacingBottom.sm) && $et_BaseWidget.spacingBottom.sm !== '' ||
                isset($et_BaseWidget.spacingTop.md) && $et_BaseWidget.spacingTop.md !== ''  || isset($et_BaseWidget.spacingBottom.md) && $et_BaseWidget.spacingBottom.md !== '' ||
                isset($et_BaseWidget.spacingTop.lg) && $et_BaseWidget.spacingTop.lg !== ''  || isset($et_BaseWidget.spacingBottom.lg) && $et_BaseWidget.spacingBottom.lg !== '' ||
                isset($et_BaseWidget.spacingTop.xl) && $et_BaseWidget.spacingTop.xl !== ''  || isset($et_BaseWidget.spacingBottom.xl) && $et_BaseWidget.spacingBottom.xl !== ''}
            <style type="text/css">
                {if isset($et_BaseWidget.spacingTop.xs) && $et_BaseWidget.spacingTop.xs !== '' || isset($et_BaseWidget.spacingBottom.xs) && $et_BaseWidget.spacingBottom.xs !== ''}
                    @media(max-width: {$et_global.breakpoints.xsMax}px) {
                        #{$et_BaseWidget.cssId} .container,
                        #{$et_BaseWidget.cssId} .container-xs,
                        #{$et_BaseWidget.cssId} .container-sm,
                        #{$et_BaseWidget.cssId} .container-md,
                        #{$et_BaseWidget.cssId} .container-lg,
                        #{$et_BaseWidget.cssId} .container-xl,
                        #{$et_BaseWidget.cssId} .container-fluid {
                            {if isset($et_BaseWidget.spacingTop.xs) && $et_BaseWidget.spacingTop.xs !== ''}padding-top: {$et_BaseWidget.spacingTop.xs}px;{/if}
                            {if isset($et_BaseWidget.spacingBottom.xs) && $et_BaseWidget.spacingBottom.xs !== ''}padding-bottom: {$et_BaseWidget.spacingBottom.xs}px;{/if}
                        }
                    }
                {/if}
                {if isset($et_BaseWidget.spacingTop.sm) && $et_BaseWidget.spacingTop.sm !== '' || isset($et_BaseWidget.spacingBottom.sm) && $et_BaseWidget.spacingBottom.sm !== ''}
                    @media(min-width:{$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {
                        #{$et_BaseWidget.cssId} .container,
                        #{$et_BaseWidget.cssId} .container-xs,
                        #{$et_BaseWidget.cssId} .container-sm,
                        #{$et_BaseWidget.cssId} .container-md,
                        #{$et_BaseWidget.cssId} .container-lg,
                        #{$et_BaseWidget.cssId} .container-xl,
                        #{$et_BaseWidget.cssId} .container-fluid {
                            {if isset($et_BaseWidget.spacingTop.sm) && $et_BaseWidget.spacingTop.sm !== ''}padding-top: {$et_BaseWidget.spacingTop.sm}px;{/if}
                            {if isset($et_BaseWidget.spacingBottom.sm) && $et_BaseWidget.spacingBottom.xs !== ''}padding-bottom: {$et_BaseWidget.spacingBottom.sm}px;{/if}
                        }
                    }
                {/if}
                {if isset($et_BaseWidget.spacingTop.md) && $et_BaseWidget.spacingTop.md !== '' || isset($et_BaseWidget.spacingBottom.md) && $et_BaseWidget.spacingBottom.md !== ''}
                    @media(min-width:{$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {
                        #{$et_BaseWidget.cssId} .container,
                        #{$et_BaseWidget.cssId} .container-xs,
                        #{$et_BaseWidget.cssId} .container-sm,
                        #{$et_BaseWidget.cssId} .container-md,
                        #{$et_BaseWidget.cssId} .container-lg,
                        #{$et_BaseWidget.cssId} .container-xl,
                        #{$et_BaseWidget.cssId} .container-fluid {
                            {if isset($et_BaseWidget.spacingTop.md) && $et_BaseWidget.spacingTop.md !== ''}padding-top: {$et_BaseWidget.spacingTop.md}px;{/if}
                            {if isset($et_BaseWidget.spacingBottom.md) && $et_BaseWidget.spacingBottom.md !== ''}padding-bottom: {$et_BaseWidget.spacingBottom.md}px;{/if}
                        }
                    }
                {/if}
                {if isset($et_BaseWidget.spacingTop.lg) && $et_BaseWidget.spacingTop.lg !== '' || isset($et_BaseWidget.spacingBottom.lg) && $et_BaseWidget.spacingBottom.lg !== ''}
                    @media(min-width:{$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {
                        #{$et_BaseWidget.cssId} .container,
                        #{$et_BaseWidget.cssId} .container-xs,
                        #{$et_BaseWidget.cssId} .container-sm,
                        #{$et_BaseWidget.cssId} .container-md,
                        #{$et_BaseWidget.cssId} .container-lg,
                        #{$et_BaseWidget.cssId} .container-xl,
                        #{$et_BaseWidget.cssId} .container-fluid {
                            {if isset($et_BaseWidget.spacingTop.lg) && $et_BaseWidget.spacingTop.lg !== ''}padding-top: {$et_BaseWidget.spacingTop.lg}px;{/if}
                            {if isset($et_BaseWidget.spacingBottom.lg) && $et_BaseWidget.spacingBottom.lg !== ''}padding-bottom: {$et_BaseWidget.spacingBottom.lg}px;{/if}
                        }
                    }
                {/if}
                {if isset($et_BaseWidget.spacingTop.xl) && $et_BaseWidget.spacingTop.xl !== '' || isset($et_BaseWidget.spacingBottom.xl) && $et_BaseWidget.spacingBottom.xl !== ''}
                    @media(min-width:{$et_global.breakpoints.xlMin}px) {
                        #{$et_BaseWidget.cssId} .container,
                        #{$et_BaseWidget.cssId} .container-xs,
                        #{$et_BaseWidget.cssId} .container-sm,
                        #{$et_BaseWidget.cssId} .container-md,
                        #{$et_BaseWidget.cssId} .container-lg,
                        #{$et_BaseWidget.cssId} .container-xl,
                        #{$et_BaseWidget.cssId} .container-fluid {
                            {if isset($et_BaseWidget.spacingTop.xl) && $et_BaseWidget.spacingTop.xl !== ''}padding-top: {$et_BaseWidget.spacingTop.xl}px;{/if}
                            {if isset($et_BaseWidget.spacingBottom.xl) && $et_BaseWidget.spacingBottom.xl !== ''}padding-bottom: {$et_BaseWidget.spacingBottom.xl}px;{/if}
                        }
                    }
                {/if}
            </style>
            {/if}
        {/block}
        {block name="et-widget-inline-styles"}
            {* Use this block to override styles with an inline style tag *}
        {/block}
        {block name="et-widget-container"}
        <div class="{block name="et-widget-container-class"}container{if $et_BaseWidget.size === 'fullsize' || $et_BaseWidget.size === 'fullsizeImage'}-fluid{/if}{/block}">
            {block name="et-widget-container-inner"}
                {* Use this block to override the actual content within container *}
            {/block}
        </div>
        {/block}
        {if JTL\Shop::isAdmin(true) && !empty($et_admin.pluginBaseUrl) && !empty($et_admin.pencilModeEnabled)}<a href="{$et_admin.pluginBaseUrl}#/area/{$et_admin.area}/grid/{$et_admin.gridKey}/widget/{$et_BaseWidget.type}/{$et_BaseWidget.id}" title="{$et_BaseWidget.type} - {et_language key="et360_admin_edit_widget"}" class="et-admin-link" target="_blank"><i class="fas fa-pen"></i></a>{/if}
    </div>
    {opcMountPoint id=$et_BaseWidget.opcIdAfter inContainer=false}
{/strip}
{/block}