{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<svg style="display: none;">
    <symbol id="tb-gallery-icon-fullscreen" viewBox="0 0 448 512"><path d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12H32v116c0 6.6-5.4 12-12 12h-8c-6.6 0-12-5.4-12-12zM300 32h124c13.3 0 24 10.7 24 24v124c0 6.6-5.4 12-12 12h-8c-6.6 0-12-5.4-12-12V64H300c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12zm148 300v124c0 13.3-10.7 24-24 24H300c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h116V332c0-6.6 5.4-12 12-12h8c6.6 0 12 5.4 12 12zM148 480H24c-13.3 0-24-10.7-24-24V332c0-6.6 5.4-12 12-12h8c6.6 0 12 5.4 12 12v116h116c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12z" /></symbol>
    <symbol id="tb-gallery-icon-play" viewBox="0 0 24 24"><path d="M19.031 10.809a1.58 1.58 0 0 1 .756.879 1.685 1.685 0 0 1 0 1.125 1.58 1.58 0 0 1-.756.879L6.656 21a1.585 1.585 0 0 1-1.125.211 1.7 1.7 0 0 1-1-.562 1.59 1.59 0 0 1-.4-1.09V4.938a1.581 1.581 0 0 1 .422-1.143 1.725 1.725 0 0 1 1.02-.527 1.538 1.538 0 0 1 1.09.229z"/><path fill="none" d="M0 0h24v24H0z"/></symbol>
</svg>

<f:if condition="{showGallery}">
    <div class="{wrapperClass}">
        <figure
            role="group"
            class="tb-gallery-preview {f:if(condition: '{items -> f:count()} <= 2', then: 'tb-gallery-preview--single-image')}"
            data-toubiz-gallery>

            <div class="tb-gallery-preview__main">
                <f:if condition="{panoramaUri} || {flight3dUri}">
                    <div class="tb-gallery-preview__badges">
                        <f:if condition="{panoramaUri}">
                            <a
                                href="{panoramaUri}"
                                target="_blank"
                                class="tb-gallery-preview__badge">

                                <img
                                    src="{f:uri.resource(path: 'Images/Labels/360view.svg', package: 'Newland.Toubiz.Poi.Neos')}"
                                    alt="{f:translate(id: '360view', package: 'Newland.Toubiz.Poi.Neos', source: 'Views/Show')}" />

                                <span class="visually-hidden">
                                    {f:translate(id: '360view', package: 'Newland.Toubiz.Poi.Neos', source: 'Views/Show')}
                                </span>
                            </a>
                        </f:if>
                        <f:if condition="{flight3dUri}">
                            <a
                                href="{flight3dUri}"
                                target="_blank"
                                class="tb-gallery-preview__badge">

                                <img
                                    src="{f:uri.resource(path: 'Images/Labels/3d-flight.svg', package: 'Newland.Toubiz.Poi.Neos')}"
                                    alt="{f:translate(id: '3dFlight', package: 'Newland.Toubiz.Poi.Neos', source: 'Views/Show')}" />

                                <span class="visually-hidden">
                                    {f:translate(id: '3dFlight', package: 'Newland.Toubiz.Poi.Neos', source: 'Views/Show')}
                                </span>
                            </a>
                        </f:if>
                    </div>
                </f:if>

                <vh:render
                    partial="GalleryItem"
                    arguments="{
                        item: items.0,
                        preview: TRUE,
                        showCaption: TRUE
                    }" />

            </div>
            <f:if condition="{items -> f:count()} >= 3">
                <div class="tb-gallery-preview__aside">
                    <vh:render
                        partial="GalleryItem"
                        arguments="{
                            item: items.1,
                            preview: TRUE,
                            showCaption: FALSE
                        }" />

                    <vh:render
                        partial="GalleryItem"
                        arguments="{
                            item: items.2,
                            preview: TRUE,
                            showCaption: FALSE
                        }" />

                </div>
            </f:if>
            <f:if condition="{items -> f:count()} > 1">
                <div data-toubiz-gallery-item-container>
                    <f:for each="{vh:collection.slice(collection: items, offset: containerItemsOffset)}" as="item">
                        <vh:render
                            partial="GalleryItem"
                            arguments="{
                                item: item,
                                preview: FALSE,
                                showCaption: FALSE
                            }" />

                    </f:for>
                </div>
                <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-gallery-icon-fullscreen" />
                        </svg>
                        <span>
                            {items -> f:count()} {f:translate(id: 'label.images', package: 'Newland.NeosCommon', source: 'ViewHelpers/Gallery')}
                        </span>
                    </span>
                </button>
            </f:if>
        </figure>
    </div>
</f:if>