{namespace neos=Neos\Neos\ViewHelpers}

<f:if condition="{assets}">
    <f:then>
        <svg style="display: none;">
            <symbol id="tb-gallery-icon-next" viewBox="0 0 256 512"><path fill="currentColor" d="M24.707 38.101L4.908 57.899c-4.686 4.686-4.686 12.284 0 16.971L185.607 256 4.908 437.13c-4.686 4.686-4.686 12.284 0 16.971L24.707 473.9c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L41.678 38.101c-4.687-4.687-12.285-4.687-16.971 0z"></path></symbol>
            <symbol id="tb-gallery-icon-prev" viewBox="0 0 256 512"><path fill="currentColor" d="M231.293 473.899l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L70.393 256 251.092 74.87c4.686-4.686 4.686-12.284 0-16.971L231.293 38.1c-4.686-4.686-12.284-4.686-16.971 0L4.908 247.515c-4.686 4.686-4.686 12.284 0 16.971L214.322 473.9c4.687 4.686 12.285 4.686 16.971-.001z"></path></symbol>
            <symbol id="tb-gallery-icon-loading" viewBox="0 0 512 512"><path d="M460.115 373.846l-6.941-4.008c-5.546-3.202-7.564-10.177-4.661-15.886 32.971-64.838 31.167-142.731-5.415-205.954-36.504-63.356-103.118-103.876-175.8-107.701C260.952 39.963 256 34.676 256 28.321v-8.012c0-6.904 5.808-12.337 12.703-11.982 83.552 4.306 160.157 50.861 202.106 123.67 42.069 72.703 44.083 162.322 6.034 236.838-3.14 6.149-10.75 8.462-16.728 5.011z"></path></symbol>
            <symbol id="tb-gallery-icon-close" viewBox="0 0 24 24"><path d="M19.667 5.578L18.089 4l-6.255 6.255L5.578 4 4 5.578l6.255 6.255L4 18.089l1.578 1.578 6.255-6.255 6.255 6.255 1.578-1.578-6.255-6.255z"></path><path fill="none" d="M0 0h24v24H0z"></path></symbol>
        </svg>
        <section class="o-container {marginTop}">
            <ul class="c-gallery p-0 flex flex-wrap -m-1"
                data-toubiz-gallery
                data-toubiz-gallery-id="{node.identifier}">

                <f:for each="{assets}" as="asset">
                    <li class="c-gallery__item p-1 w-1/3 lg:w-1/4">
                        <a
                            data-toubiz-gallery-item
                            class="c-gallery__link"
                            data-sub-html="<p class='c-gallery__caption'>{asset.caption} {f:if(condition: asset.copyrightnotice, then: '&copy; ')} <span>{asset.copyrightnotice}</span></p>"
                            href="{neos.media:uri.thumbnail(asset: asset, maximumWidth: 1600)}">
                            <neos.media:image
                                image="{asset}"
                                width="400c"
                                height="400c"
                                allowCropping="true"
                                alt="{asset.caption}"
                                class="c-gallery__image" />

                            <svg class="c-icon c-gallery__zoom-icon">
                                <use xlink:href="#icon-zoom" />
                            </svg>
                        </a>
                    </li>
                </f:for>
            </ul>
        </section>
    </f:then>
    <f:else>
        <f:if condition="{neos:rendering.inEditMode()}">
            <ul{attributes -> f:format.raw()}>
                <li>
                    {f:translate(id: 'content.emptyAssetList', package: 'Neos.NodeTypes.AssetList', source: 'NodeTypes/AssetList')}
                </li>
            </ul>
        </f:if>
    </f:else>
</f:if>