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

{strip}
    {block name="et-widget-inline-styles"}
        {if $et_MasonryGrid.customColorsEnabled}
            <style type="text/css">
                {if $et_MasonryGrid.customColorsEnabled}
                     #{$et_BaseWidget.cssId}.bg-fullsize.bg-fullsize,
                     #{$et_BaseWidget.cssId}.bg-boxed.bg-boxed .container {
                        {if !empty($et_MasonryGrid.colorBackground)} background-color: {$et_MasonryGrid.colorBackground};{/if}
                        {if !empty($et_MasonryGrid.colorFont)} color: {$et_MasonryGrid.colorFont};{/if}
                     }
                {/if}
            </style>
        {/if}
        {if !empty($et_MasonryGrid.gridHeight.xs) ||
            !empty($et_MasonryGrid.gridHeight.sm) ||
            !empty($et_MasonryGrid.gridHeight.md) ||
            !empty($et_MasonryGrid.gridHeight.lg) ||
            !empty($et_MasonryGrid.gridHeight.xl)
        }
           <style type="text/css">
               #{$et_BaseWidget.cssId} .et-masonry-grid {
                    {if !empty($et_MasonryGrid.gridHeight.xs)}--et-masonry-grid-row-height-xs: {$et_MasonryGrid.gridHeight.xs}px;{/if}
                    {if !empty($et_MasonryGrid.gridHeight.sm)}--et-masonry-grid-row-height-sm: {$et_MasonryGrid.gridHeight.sm}px;{/if}
                    {if !empty($et_MasonryGrid.gridHeight.md)}--et-masonry-grid-row-height-md: {$et_MasonryGrid.gridHeight.md}px;{/if}
                    {if !empty($et_MasonryGrid.gridHeight.lg)}--et-masonry-grid-row-height-lg: {$et_MasonryGrid.gridHeight.lg}px;{/if}
                    {if !empty($et_MasonryGrid.gridHeight.xl)}--et-masonry-grid-row-height-xl: {$et_MasonryGrid.gridHeight.xl}px;{/if}
               }
           </style>
        {/if}
    {/block}
    {block name="et-widget-container-inner"}
        {block name="et-masonry-grid-headline"}
            {include file="widgets/base/textfield.tpl" value=$et_MasonryGrid.headline type="h2" asRow=true classes="et-widget-headline"}
        {/block}
        {block name="et-masonry-grid-text-before"}
            {if !empty($et_MasonryGrid.textBefore.value)}{include file="widgets/base/textfield.tpl" value=$et_MasonryGrid.textBefore type='div' classes="et-text-before"}{/if}
        {/block}

        {block name="et-masonry-grid-wrapper"}
            <div class="{block name="et-masonry-grid-wrapper-class"}et-masonry-grid-wrapper et-masonry-grid et-masonry-grid-layout-{$et_MasonryGrid.layout} et-hoverstyle-{$et_MasonryGrid.hoverStyle}{if $et_MasonryGrid.noPadding} no-padding{/if}{/block}">
                {foreach $et_MasonryGrid.items as $item}
                    {block name="et-masonry-grid-item"}
                        <div class="{block name="et-masonry-grid-item-class"}et-masonry-grid-item{/block}" id="et-masonry-grid-item-{$item.id}">
                            {block name="et-masonry-grid-item-inline-styles"}
                                {if $item.customColorsEnabled}
                                    <style>
                                        {if !empty($item.colorBackground)}
                                            #{$et_BaseWidget.cssId} #et-masonry-grid-item-{$item.id} {
                                                {if !empty($item.colorBackground)}background-color: {$item.colorBackground};{/if}
                                            }
                                        {/if}
                                        {if !empty($item.colorFont) || !empty($item.colorTextShadow)}
                                            #{$et_BaseWidget.cssId} #et-masonry-grid-item-{$item.id} .et-text-shadow,
                                            #{$et_BaseWidget.cssId} #et-masonry-grid-item-{$item.id} .et-text-backdrop {
                                                {if !empty($item.colorFont)}color: {$item.colorFont};{/if}
                                                {if !empty($item.colorTextShadow)}text-shadow: 0 0 3px {$item.colorTextShadow};{/if}
                                            }
                                        {/if}
                                        {if !empty($item.colorTextBackdrop)}
                                            #{$et_BaseWidget.cssId} #et-masonry-grid-item-{$item.id} .et-masonry-grid-item-text-content {
                                                background-color: {$item.colorTextBackdrop};
                                            }
                                        {/if}
                                    </style>
                                {/if}
                            {/block}
                            {if $item.backgroundType === 'image'}
                                {if $item.imageMode === 'breakpointImage'}
                                    {include file='widgets/base/breakpoint_image.tpl' image=$item.breakpointImage lazy=$et_BaseWidget.lazyLoadImages webp=true class="et-masonry-grid-item-image"}
                                {elseif !empty($item.image.src)}
                                    {image fluid=true lazy=$et_BaseWidget.lazyLoadImages webp=!empty($item.image.srcWebP)
                                        src=$item.image.src
                                        alt=$item.image.alt|escape
                                        class="et-masonry-grid-item-image"
                                    }
                                {/if}
                            {elseif $item.backgroundType === 'video'}
                                <div class="et-masonry-grid-item-video">
                                    {include file="widgets/base/video.tpl" video=$item.video hideConsentLinkText=true useVideoTagForManual=true}
                                </div>
                            {/if}
                            {if $item.contentType === 'custom'}
                                <div class="et-masonry-grid-item-custom-content-wrapper">
                                    {$item.content}
                                </div>
                            {elseif !empty($item.textContent1.value)}
                                <div class="et-masonry-grid-item-text-wrapper et-align-horizontal-{$item.alignmentHorizontal} et-align-vertical-{$item.alignmentVertical}">
                                    <div class="et-masonry-grid-item-text-content{if $item.showTextShadow} et-text-shadow{/if}{if $item.showTextBackdrop} et-text-backdrop{/if}">
                                        {include file="widgets/base/textfield.tpl" value=$item.textContent1 type='div' classes="h2"}
                                    </div>
                                </div>
                            {/if}
                            {if !empty($item.link.href)}
                                <a href="{$item.link.href}" title="{$item.link.title}" class="et-masonry-grid-item-link link-discreet"{if $item.link.external} rel="noreferrer noopener" target="_blank"{/if}></a>
                            {/if}
                        </div>
                    {/block}
                {/foreach}
            </div>
        {/block}

        {block name="et-masonry-grid-text-after"}
            {if !empty($et_MasonryGrid.textAfter.value)}{include file="widgets/base/textfield.tpl" value=$et_MasonryGrid.textAfter type='div' classes="et-text-after"}{/if}
        {/block}

        {block name="et-masonry-grid-related-link"}
            {if !empty($et_MasonryGrid.link)}
                {include file="widgets/snippets/slider_related_link.tpl" context="link_groups" link=$et_MasonryGrid.link label=$et_MasonryGrid.linkLabel displayMode=$et_MasonryGrid.linkDisplayMode alignmentHorizontal=$et_MasonryGrid.linkAlignmentHorizontal}
            {/if}
        {/block}
    {/block}
{/strip}