{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<f:if condition="{article.media -> f:count()} >= 3">
    <div class="mb-10">
        <figure 
            role="group"
            class="tb-gallery-preview"
            data-toubiz-gallery>
            
            <div class="tb-gallery-preview__main">
                <f:render 
                    partial="PointOfInterests/Show/GalleryItem"
                    arguments="{item: article.mediaSorted.0, caption: TRUE}" />

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

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

            </div>
            <f:if condition="{article.media -> f:count()} > 3">
                <div data-toubiz-gallery-item-container>
                    <f:for each="{vh:collection.slice(collection: article.media, offset: 3)}" as="item">
                        <a data-toubiz-gallery-item href="{item.sourceUri}"></a>
                    </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>{article.media -> f:count()} {f:translate(id: 'gallery.images', package: 'Newland.Toubiz.Poi.Neos', source: 'Views/Show')}</span>
                </span>
            </button>
        </figure>
    </div>
</f:if>
