{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:comment>
    This content element was implemented as a slider initially and has been turned into a lightbox gallery.
    ToDo: Adjust naming accordingly
</f:comment>
<div class="slider">
    <div class="slider__zoom-icon">
        <i class="fa fa-search-plus"></i> {images -> f:count()}
    </div>
    <div class="slider__items">
        <f:alias map="{image: images.0}">
            <a href="javascript:;" data-glightbox="gallery-{id}">
                <f:image image="{image}" width="770" height="430c+100" class="slider__image"
                         alt="{image.alternative}" title="{image.title}"/>
            </a>
        </f:alias>
    </div>
    <f:if condition="{thumbnails}">
        <f:if condition="{images -> f:count()} > 1">
            <div class="slider__thumbs hidden-sm hidden-xs">
                <f:for each="{images}" as="image" iteration="iteration">
                    <f:if condition="{iteration.cycle} <= 5">
                        <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
                           data-glightbox data-gallery="gallery-{id}" data-caption="{image.originalResource.description}" class="slider__thumb">
                            <f:image image="{image}" width="150" height="85c+100" class="img-responsive"
                                     alt="{image.originalResource.alternative}" title="{image.originalResource.title}"/>
                        </a>
                    </f:if>
                </f:for>
            </div>
        </f:if>
    </f:if>
    <div class="slider__zoom" style="display: none">
        <f:if condition="{thumbnails}">
            <f:then>
                <f:if condition="{images -> f:count()} == 1">
                    <f:then>
                        <f:alias map="{image: images.0}">
                            <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
                               data-glightbox data-gallery="gallery-{id}" data-caption="{image.originalResource.description}"
                               title="{image.title}">1</a>
                        </f:alias>
                    </f:then>
                    <f:else>
                        <f:for each="{images}" as="image" iteration="iteration">
                            <f:if condition="{iteration.cycle} > 5">
                                <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
                                   data-glightbox data-gallery="gallery-{id}" data-caption="{image.originalResource.description}"
                                   title="{image.originalResource.title}">{iteration.index}</a>
                            </f:if>
                        </f:for>
                    </f:else>
                </f:if>
            </f:then>
            <f:else>
                <f:for each="{images}" as="image">
                    <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
                       data-glightbox data-gallery="gallery-{id}" data-caption="{image.originalResource.description}"
                       title="{image.originalResource.title}">{iteration.index}</a>
                </f:for>
            </f:else>
        </f:if>
    </div>
</div>