{namespace neos=Neos\Neos\ViewHelpers}

<div class="c-live-item">
    <a class="c-live-item__title" href="#"
    data-target-enhancement
    data-target-enhancement-targets.0="#submenu-4234423444"
    data-target-enhancement-plugins.0.name="toggle-aria-expanded"
    data-target-enhancement-exclusive-group="subnavigation"
    aria-expanded="false">

        <h3>
            {f:translate(id: 'live.webcam', source: 'Views/LiveWidgets', package: 'Newland.CityTheme')}
        </h3>
        <svg class="c-icon c-icon--live-tab"
            aria-hidden="true"
            focusable="false">

            <use xlink:href="#icon-angle-down"/>
        </svg>
    </a>
    <div class="c-live-item__content" id="submenu-4234423444">
        <f:for each="{liveWebcams}" as="webcam">
            <div class="c-live-webcam">
                <f:if condition="{webcam.properties.url}">
                    <f:then>
                        <noscript>
                            <img class="c-live-webcam__image"
                                src="{webcam.properties.url}"
                                alt="{f:translate(id: 'live.webcam', source: 'Views/LiveWidgets', package: 'Newland.BaseTheme')}" />
                        </noscript>
                        <img class="c-live-webcam__image lazyload"
                             data-webcam-nocache
                             data-src="{webcam.properties.url}"
                             alt="{f:translate(id: 'live.webcam', source: 'Views/LiveWidgets', package: 'Newland.BaseTheme')}" />

                    </f:then>
                    <f:else>
                        <noscript>
                            <img class="c-live-webcam__image"
                                src="{neos.media:uri.image(image: webcam.properties.image, maximumWidth: 400)}"
                                alt="{webcam.properties.image.title}">

                        </noscript>
                        <img class="c-live-webcam__image lazyload"
                            data-webcam-nocache
                            data-src="{neos.media:uri.image(image: webcam.properties.image, maximumWidth: 400)}"
                            alt="{webcam.properties.image.title}">

                    </f:else>
                </f:if>
                <f:if condition="{webcam.properties.title}">
                    <p class="c-live-webcam__title">
                        {webcam.properties.title}
                    </p>
                </f:if>
            </div>
        </f:for>
        <f:if condition="{liveWebcamsLink}">
            <a href="{f:if(condition: '{neos:rendering.inBackend()}', then: '', else: liveWebcamsLink)}"
            class="c-live-webcam__page-link">

                {f:translate(id: 'live.showAllWebcams', source: 'Views/LiveWidgets', package: 'Newland.CityTheme')}
            </a>
        </f:if>
    </div>
</div>
