{namespace media=Neos\Media\ViewHelpers}
{namespace neos=Neos\Neos\ViewHelpers}

<f:alias
    map="{
        smallImage: '{neos.media:uri.image(image: image, maximumWidth: 375) -> f:if(condition: image)}',
        mediumImage: '{neos.media:uri.image(image: image, maximumWidth: 480) -> f:if(condition: image)}',
        largeImage: '{neos.media:uri.image(image: image, maximumWidth: 800) -> f:if(condition: image)}',
        fullImage: '{neos.media:uri.image(image: image) -> f:if(condition: image)}'
    }">

    <f:if condition="{neos:rendering.inBackend()}">
        <f:then>
            <div class="o-grid__item m-0 p-0 relative">
                <img src="{fullImage}" />

                <div class="absolute top-0 left-0 flex justify-center items-center text-white w-full h-full text-5xl z-10">
                    <svg class="c-icon" aria-hidden="true">
                        <use xlink:href="#tb-swiper-icon-play" />
                    </svg>
                </div>
            </div>
        </f:then>
        <f:else>
            <a
                data-toubiz-gallery-item
                href="{videoUrl}"
                data-sub-html="{caption}"
                class="tb-swiper__slide">

                <img
                    data-src="{mediumImage}"
                    class="tb-swiper__slide-img tb-swiper__slide-img-height lazyload"
                    alt="{alternativeText}" />

                <noscript>
                    <img src="{fullImage}" alt="{alternativeText}" />
                </noscript>

                <div class="absolute top-0 left-0 flex justify-center items-center text-white w-full h-full text-5xl">
                    <svg class="c-icon" aria-hidden="true">
                        <use xlink:href="#play" />
                    </svg>
                </div>
            </a>
        </f:else>
    </f:if>
</f:alias>