{namespace vh=Newland\NeosViewHelpers\ViewHelpers}
{namespace common=Newland\Toubiz\Common\Neos\ViewHelpers}

<common:slot.render slot="aboveGalleryItem" context="{ item: item }" />
<f:if condition="{preview}">
    <f:then>
        <a
            data-toubiz-gallery-item
            href="{item.uri}"
            data-sub-html="{vh:render(section: 'SubHtml', arguments: '{item: item}') -> f:format.htmlentities()}"
            class="tb-gallery-preview__link {f:if(condition: item.isVideo, then: 'tb-gallery-preview__link--video')}"
            itemprop="image"
            itemscope
            itemtype="http://schema.org/ImageObject">

            <f:if condition="{item.isVideo}">
                <span class="tb-gallery-preview__video-overlay">
                    <svg class="tb-gallery-preview__video-icon c-icon" aria-hidden="true">
                        <use xlink:href="#tb-gallery-icon-play" />
                    </svg>
                </span>
            </f:if>

            <img
                data-src="{f:if(condition: item.isVideo, then: item.previewUri, else: item.uri)}"
                alt="{item.title}"
                class="tb-gallery-preview__image lazyload"
                itemprop="image url" />

            <noscript>
                <img
                    src="{f:if(condition: item.isVideo, then: item.previewUri, else: item.uri)}"
                    alt="{item.title}"
                    class="tb-gallery-preview__image"
                    itemprop="image url" />

            </noscript>

            <f:if condition="{showCaption}">
                <f:if condition="{item.title} || {item.copyright}">
                    <p class="tb-gallery-preview__caption">
                        <f:if condition="{item.title}">
                            {item.title}
                            <br />
                        </f:if>
                        <f:if condition="{item.copyright}">
                            <vh:render section="Copyright" arguments="{copyright: item.copyright}" />
                        </f:if>
                    </p>
                </f:if>
            </f:if>
        </a>
    </f:then>
    <f:else>
        <span
            itemprop="image"
            itemscope
            itemtype="http://schema.org/ImageObject">

            <a
                data-toubiz-gallery-item
                href="{item.uri}"
                data-sub-html="{vh:render(section: 'SubHtml', arguments: '{item: item}') -> f:format.htmlentities()}"
                itemprop="image url"></a>

        </span>
    </f:else>
</f:if>
<common:slot.render slot="belowGalleryItem" context="{ item: item }" />

<f:section name="SubHtml">
    <common:slot.render slot="aboveGalleryItemSubHtml" context="{ item: item }" />
    <f:if condition="{item.title} || {item.copyright}">
        <p>
            <f:if condition="{item.title}">
                {item.title}
            </f:if>
            <f:if condition="{item.copyright}">
                <vh:render section="Copyright" arguments="{copyright: item.copyright}" />
            </f:if>
        </p>
    </f:if>
    <common:slot.render slot="belowGalleryItemSubHtml" context="{ item: item }" />
</f:section>

<f:section name="Copyright">
    <span class="text-xs">
        © <span itemprop="copyrightHolder">{copyright}</span>
    </span>
</f:section>