{namespace neos=Neos\Neos\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\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" /></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" /></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"/></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 fill="none" d="M0 0h24v24H0z"/></symbol>
            <symbol id="tb-poi-icon-expand-gallery" 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>
        </svg>

        <section class="o-container {marginTop}">
            <figure role="group"
                    class="tb-gallery-preview"
                    data-toubiz-gallery
                    data-toubiz-gallery-id="{node.identifier}">

                <f:if condition="{assets.0}">
                    <div class="tb-gallery-preview__main">
                        <a href="{neos.media:uri.thumbnail(asset: assets.0, maximumWidth: 1600)}"
                           data-toubiz-gallery-item
                           data-sub-html="<p class='c-gallery__caption'>{assets.0.caption} <span>{f:if(condition: assets.0.copyrightnotice, then: '&copy; ')} {assets.0.copyrightnotice}</span></p>"
                           class="tb-gallery-preview__link">

                            <neos.media:image image="{assets.0}"
                                              width="1600c"
                                              height="900c"
                                              allowCropping="true"
                                              alt="{assets.0.caption}"
                                              class="tb-gallery-preview__image lazyload" />

                            <div class="tb-gallery-preview__caption">
                                <p class="text-sm">
                                    {assets.0.caption}<br/>
                                    <span class="text-xs">{f:if(condition: assets.0.copyrightnotice, then: '&copy; ')} {assets.0.copyrightnotice}</span>
                                </p>
                            </div>
                        </a>
                    </div>
                </f:if>

                <f:if condition="{assets.1}">
                    <div class="tb-gallery-preview__aside">
                        <a href="{neos.media:uri.thumbnail(asset: assets.1, maximumWidth: 1600)}"
                           data-toubiz-gallery-item
                           data-sub-html="<p class='c-gallery__caption'>{assets.1.caption} <span>{f:if(condition: assets.1.copyrightnotice, then: '&copy; ')} {assets.1.copyrightnotice}</span></p>"
                           class="tb-gallery-preview__link">

                            <neos.media:image image="{assets.1}"
                                              width="400c"
                                              height="400c"
                                              allowCropping="true"
                                              alt="{assets.1.caption}"
                                              class="tb-gallery-preview__image lazyload" />

                        </a>

                        <f:if condition="{assets.2}">
                            <a href="{neos.media:uri.thumbnail(asset: assets.2, maximumWidth: 1600)}"
                               data-toubiz-gallery-item
                               data-sub-html="<p class='c-gallery__caption'>{assets.2.caption} <span>{f:if(condition: assets.2.copyrightnotice, then: '&copy; ')} {assets.2.copyrightnotice}</span></p>"
                               class="tb-gallery-preview__link">

                                <neos.media:image image="{assets.2}"
                                                  width="400c"
                                                  height="400c"
                                                  allowCropping="true"
                                                  alt="{assets.2.caption}"
                                                  class="tb-gallery-preview__image lazyload" />

                            </a>
                        </f:if>
                    </div>
                </f:if>

                <f:for each="{vh:collection.slice(collection: assets, offset: 3)}" as="asset" iteration="iterator">
                    <span itemprop="image" itemscope itemtype="http://schema.org/ImageObject" class="hidden">
                        <a href="{neos.media:uri.thumbnail(asset: asset, maximumWidth: 1600)}"
                           data-toubiz-gallery-item
                           data-sub-html="<p class='c-gallery__caption'>{asset.caption} <span>{f:if(condition: asset.copyrightnotice, then: '&copy; ')} {asset.copyrightnotice}</span></p>">

                        </a>
                    </span>
                </f:for>

                <button data-toubiz-gallery-open class="tb-gallery-preview__button">
                    <span class="tb-gallery-preview__flex-wrapper">
                        <svg class="c-icon"
                             aria-hidden="true"
                             focusable="false">

                            <use xlink:href="#tb-poi-icon-expand-gallery" />
                        </svg>
                        <span>
                            {assets -> f:count()}
                            Bilder
                        </span>
                    </span>
                </button>
            </figure>
        </section>
    </f:then>
    <f:else>
        <f:if condition="{neos:rendering.inEditMode()}">
            <ul{attributes -> f:format.raw()}>
                <li>
                    Leere Galerie
                </li>
            </ul>
        </f:if>
    </f:else>
</f:if>