{namespace neos=Neos\Neos\ViewHelpers}
{namespace media=Neos\Media\ViewHelpers}

<div class="o-grid__item o-grid__item--1/3">
    <div class="webcam-teaser webcam-teaser--webcam">
        <f:if condition="{neos:rendering.inBackend()}">
            <f:then>
                <div class="webcam-teaser__image-wrapper">
                    <f:render section="webcam-image" arguments="{_all}"></f:render>
                </div>
            </f:then>
            <f:else>
                <f:if condition="{externalTarget}">
                    <f:then>
                        <a
                            class="webcam-teaser__image-wrapper"
                            href="{externalTarget}"
                            target="_blank"
                            title="{linkTitle}
                            rel="noopener noreferrer"
                        >

                            <f:render section="webcam-image" arguments="{_all}"></f:render>
                        </a>
                    </f:then>
                    <f:else>
                        <button
                            class="webcam-teaser__image-wrapper"
                            data-target-enhancement
                            data-target-enhancement-exclusive-group="webcam-modal-group"
                            data-target-enhancement-targets.0="#webcam-modal-{node.identifier}, html"
                            data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                            aria-expanded="false"
                            aria-label="{linkTitle}"
                        >

                            <f:render section="webcam-image" arguments="{_all}"></f:render>
                        </button>
                    </f:else>
                </f:if>
            </f:else>
        </f:if>

        <f:section name="webcam-image">
            <f:if condition="{url}">
                <f:then>
                    <noscript>
                        <img src="{url}"
                             alt="Webcam"
                             class="webcam-teaser__image"
                             loading="lazy">

                    </noscript>
                    <img data-src="{url}"
                         alt="Webcam"
                         class="webcam-teaser__image lazyload">
                </f:then>
                <f:else>
                    <noscript>
                        <img src="{neos.media:uri.image(image: image, maximumWidth: 480)}"
                             alt="{alternativeText}"
                             class="webcam-teaser__image"
                             loading="lazy">

                    </noscript>
                    <img data-src="{neos.media:uri.image(image: image, maximumWidth: 480)}"
                         alt="{alternativeText}"
                         class="webcam-teaser__image lazyload">

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

        <div class="webcam-teaser__text">
            <f:if condition="{neos:rendering.inBackend()}">
                <f:then>
                    {neos:contentElement.editable(property: 'title', class: 'webcam-teaser__title', tag: 'h3')}
                    {neos:contentElement.editable(property: 'text', class: 'webcam-teaser__description', tag: 'p')}
                    <div class="webcam-teaser__link">
                        <f:render section="webcam-enlarge-link" arguments="{_all}"></f:render>
                    </div>
                </f:then>
                <f:else>
                    {neos:contentElement.editable(property: 'title', class: 'webcam-teaser__title', tag: 'h3')}
                    {neos:contentElement.editable(property: 'text', class: 'webcam-teaser__description', tag: 'p')}
                    <f:if condition="{externalTarget}">
                        <f:then>
                            <a
                                class="webcam-teaser__link"
                                href="{externalTarget}"
                                title="{linkTitle}"
                                target="_blank"
                                rel="noopener noreferrer"
                            >

                                <f:render section="webcam-enlarge-link" arguments="{_all}"></f:render>
                            </a>
                        </f:then>
                        <f:else>
                            <button
                                class="webcam-teaser__link"
                                data-target-enhancement
                                data-target-enhancement-exclusive-group="webcam-modal-group"
                                data-target-enhancement-targets.0="#webcam-modal-{node.identifier}, html"
                                data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                                aria-expanded="false"
                                aria-label="{linkTitle}"
                            >

                                <f:render section="webcam-enlarge-link" arguments="{_all}"></f:render>
                            </button>
                        </f:else>
                    </f:if>
                </f:else>
            </f:if>
        </div>

        <f:section name="webcam-enlarge-link">
            <svg class="c-icon"
                 aria-hidden="true"
                 focusable="false">

                <use xlink:href="#icon-camera"/>
            </svg>

            <f:if condition="{embedCode}">
                <f:then>
                    {f:translate(id: 'resize.livecam', package: 'Newland.CityTheme', source: 'NodeTypes/Webcam')}
                </f:then>
                <f:else>
                    {f:translate(id: 'resize.image', package: 'Newland.CityTheme', source: 'NodeTypes/Webcam')}
                </f:else>
            </f:if>
        </f:section>

        <f:comment>
            Webcam Modal
        </f:comment>
        <f:if condition="{neos:rendering.inBackend()}">
            <f:else>
                <div data-toubiz-modal
                     id="webcam-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-webcam-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="webcam-modal-group"
                            data-target-enhancement-targets.0="#webcam-modal-{node.identifier}, html"
                            data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                            aria-expanded="false"
                            aria-label="{f:translate(id: 'word.closeOverlay', package: 'Newland.CityTheme', source: 'Main')}"
                        >

                            <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-webcam-modal-container tb-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="Webcam">
                                        </noscript>

                                        <img data-src="{url}" alt="Webcam" 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>
    </div>
</div>