{namespace neos=Neos\Neos\ViewHelpers}
{namespace media=Neos\Media\ViewHelpers}
<f:if condition="{node.parent.parent.nodetype} == 'Newland.CityTheme:Container'">
    <section class="o-container o-container--sm">
</f:if>
<f:if condition="{image}">
    <f:then>
        <f:if condition="{link}">
            <f:then>
                <a href="{link}">
                    <f:render section="imageRendering" arguments="{_all}" />
                </a>
            </f:then>
            <f:else>
                <f:if condition="{enlargeImageText} && {neos:rendering.inBackend()} == false">
                    <f:then>
                    <div class="c-image-text__image-wrapper">
                        <button
                            class="c-image__enlarge-wrapper"
                            data-target-enhancement
                            data-target-enhancement-exclusive-group="image-modal-group"
                            data-target-enhancement-targets.0="#image-modal-{node.identifier}, html"
                            data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                            aria-expanded="false">
                            <f:render section="imageRendering" arguments="{_all}" />
                        </button>
                    </div>
                    </f:then>
                    <f:else>
                        <f:render section="imageRendering" arguments="{_all}" />
                    </f:else>
                </f:if>
            </f:else>
        </f:if>
    </f:then>
    <f:else>
        <f:if condition="{neos:rendering.inEditMode()}">
            <img src="{f:uri.resource(package: 'Neos.Neos', path: 'Images/dummy-image.svg')}"
                 alt="Dummy image"
                 class="neos-handle" />

        </f:if>
    </f:else>
</f:if>

<f:section name="imageRendering">
<figure class="c-image-text {f:if(condition:'{isInverted} == true', then:'c-image-text--inverted')} {marginTop} ">
     <div class="c-image-text__image-wrapper">
    <noscript>
        <media:image image="{image}"
                     alt="{alternativeText}"
                     width="{width}"
                     maximumWidth="{maximumWidth}"
                     height="{height}"
                     maximumHeight="{maximumHeight}"
                     allowUpScaling="{allowUpScaling}"
                     allowCropping="{allowCropping}"
                     class="c-image__image" />

    </noscript>

    <img data-src="{media:uri.image(image: image, allowCropping: allowCropping, allowUpScaling: allowUpScaling, height: height, maximumHeight: 248, maximumWidth: 248)}"
         class="c-image__image lazyload"
         alt="{alternativeText}" />

    <f:render partial="Copyright" arguments="{_all}"></f:render>
    </div>
    <figcaption>
        <neos:contentElement.editable property="title" class="c-image-text__title" tag="h3" />
        <neos:contentElement.editable property="text" tag="p" />

        <f:if condition="{link}">
            <a class="c-button c-button--soft-rounded {buttonColor}" href="{link}"
            {f:if(condition: openLinkInNewWindow, then: 'target="_blank" rel="noopener noreferrer"')}>
                {linkTitle}
            </a>
        </f:if>
    </figcaption>
</figure>
</f:section>

<f:comment>
    Image modal to enlarge images
</f:comment>

<f:if condition="{neos:rendering.inBackend()}">
    <f:else>
        <div data-toubiz-modal
             id="image-modal-{node.identifier}"
             class="tb-modal"
             aria-hidden="true">

            <div class="tb-modal__overlay flex items-center justify-center fixed top-0 left-0 right-0 bottom-0">
                <button class="c-image-modal__close tb-modal__close cursor-pointer border-0 absolute top-0 right-0 z-10"
                        data-micromodal-close
                        data-target-enhancement
                        data-target-enhancement-exclusive-group="image-modal-group"
                        data-target-enhancement-targets.0="#image-modal-{node.identifier}, html"
                        data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                        aria-expanded="false">

                    <svg class="c-icon pointer-events-none"
                         aria-labelledby="close-modal-title-{node.identifier}"
                         role="img">

                        <title id="close-modal-title-{node.identifier}">{f:translate(id: 'leave.modal', package: 'Newland.CityTheme', source: 'NodeTypes/Webcam')}</title>
                        <use xlink:href="#icon-close"/>
                    </svg>
                </button>

                <div class="c-image-modal-container absolute pin-t pin-l w-full h-full"
                     role="dialog"
                     aria-modal="true"
                     aria-label="{title}">

                    <div class="w-full h-full bg-white relative flex items-center justify-center">
                        <f:if condition="{embedCode}">
                            <f:then>
                                {embedCode -> f:format.raw()}
                            </f:then>
                            <f:else if="{url}">
                                <noscript>
                                    <img src="{url}" alt="Image" />
                                </noscript>
                                <img data-src="{url}" alt="Image" class="lazyload" />
                            </f:else>
                            <f:else>
                                <noscript>
                                    <img sizes="(max-width: 1920px) 100vw, 1920px"
                                         srcset="{neos.media:uri.image(image: image, maximumWidth: 800)}  800w,
                                                {neos.media:uri.image(image: image, maximumWidth: 1600)} 1600w"
                                         src="{neos.media:uri.image(image: image)}"
                                         alt="{alternativeText}" />

                                </noscript>
                                <img data-sizes="(max-width: 1920px) 100vw, 1920px"
                                     data-srcset="{neos.media:uri.image(image: image, maximumWidth: 800)}  800w,
                                            {neos.media:uri.image(image: image, maximumWidth: 1600)} 1600w"
                                     data-src="{neos.media:uri.image(image: image)}"
                                     alt="{alternativeText}"
                                     class="lazyload" />
                            </f:else>
                        </f:if>
                    </div>
                </div>
            </div>
        </div>
    </f:else>
</f:if>

<f:if condition="{node.parent.parent.nodetype} == 'Newland.CityTheme:Container'">
    </section>
</f:if>