{namespace neos=Neos\Neos\ViewHelpers}

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

<figure class="c-image-text {imageSize} {f:if(condition:'{isInverted} == true', then:'c-image-text--inverted ')}{f:if(condition:'{isWrapped} == true', then:'c-image-text--wrapped ')}{marginTop}">
   <div class="c-image-text__image-wrapper">

        <f:if condition="{enlargeImageText} && {neos:rendering.inBackend()} == false">
            <f:then>
                <button
                    class="c-image-text__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>
            </f:then>
            <f:else>
                <f:render section="imageRendering" arguments="{_all}" />
            </f:else>
        </f:if>
        <f:render partial="Copyright" arguments="{_all}"></f:render>
    </div>

    <figcaption>
        <f:if condition="{neos:rendering.inBackend()} || {title}">
            <neos:contentElement.editable property="title" class="c-image-text__title {headlineColor}" tag="h3" />
        </f:if>

        <neos:contentElement.editable property="text" class="c-neos-text {f:if(condition: textColor, then: 'c-image-text__text')}"/>

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

<f:section name="imageRendering">
    <noscript>
        <img
            data-src="{neos.media:uri.image(image: image, maximumWidth: imageMaximumWidth)}"
            alt="{alternativeText}"
            {f:if(condition: nodesRoundEdges, then: "style='border-radius: 10px;'", else: '')}
        >

    </noscript>

    <img
        data-src="{neos.media:uri.image(image: image, maximumWidth: imageMaximumWidth)}"
        class="lazyload"
        alt="{alternativeText}"
        {f:if(condition: nodesRoundEdges, then: "style='border-radius: 10px;'", else: '')}
    >
</f:section>

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

<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>