{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<f:if condition="{mediaItems -> f:count()} >= 3">
    <div class="{f:if(condition: insertGalleryAfterLinks, then: 'mb-16', else: 'mb-10')}">
        <figure
            role="group"
            class="tb-gallery-preview"
            data-toubiz-gallery>

            <div class="tb-gallery-preview__main">
                <vh:render
                    partial="PointOfInterests/Show/GalleryItem"
                    arguments="{item: mediaItems.0, caption: TRUE}" />

            </div>
            <div class="tb-gallery-preview__aside">
                <vh:render
                    partial="PointOfInterests/Show/GalleryItem"
                    arguments="{item: mediaItems.1, caption: FALSE}" />

                <vh:render
                    partial="PointOfInterests/Show/GalleryItem"
                    arguments="{item: mediaItems.2, caption: FALSE}" />

            </div>
            <f:if condition="{mediaItems -> f:count()} > 3">
                <div data-toubiz-gallery-item-container>
                    <f:for each="{vh:collection.slice(collection: mediaItems, offset: 3)}" as="item">
                        <span itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
                            <a
                                data-toubiz-gallery-item
                                href="{item.sourceUri}"
                                data-sub-html="{vh:render(section: 'SubHtml', arguments: '{item: item}') -> f:format.htmlentities()}"
                                itemprop="image url"></a>

                        </span>
                    </f:for>
                </div>
            </f:if>
            <button
                data-toubiz-gallery-open
                class="tb-gallery-preview__button">

                <span class="tb-gallery-preview__flex-wrapper">
                    <svg class="c-icon" aria-hidden="true">
                        <use xlink:href="#tb-poi-icon-expand-gallery" />
                    </svg>
                    <span>{mediaItems -> f:count()} {f:translate(id: 'gallery.images', package: 'Newland.Toubiz.Poi.Neos', source: 'Views/Show')}</span>
                </span>
            </button>
        </figure>
    </div>
</f:if>

<f:section name="SubHtml">
    <p>
        {item.title}
        <vh:render section="Copyright" arguments="{copyright: item.copyright}" />
    </p>
</f:section>

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