{namespace neos=Neos\Neos\ViewHelpers}
{namespace events=Newland\Toubiz\Events\Neos\PublicViewHelpers}
{namespace media=Neos\Media\ViewHelpers}
{namespace aut=Newland\CityTheme\ViewHelpers}
{namespace weather=Newland\Toubiz\Weather\Neos\ViewHelpers}

<div class="c-live-overlay c-overlay">
    <div class="c-live-overlay__content">
        <div class="c-live-overlay__date">
            <strong>
                <f:format.date date="now" cldrFormat="EEEE, " forceLocale="{node.context.dimensions.language.0}" />
            </strong>

            <f:format.date date="now" cldrFormat="dd. MMMM y" forceLocale="{node.context.dimensions.language.0}" />
        </div>

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

                Events
                </a>

                <div class="c-live-overlay__item-content" id="submenu-events">
                    <events:widget.simplisticTeaserList node="{node}" limit="3" />
                </div>
            </div>

            <f:if condition="{liveWeatherForecastCity}">
                <div class="c-live-overlay__item">
                    <a href="#"
                    class="c-live-overlay__item-title"
                    data-target-enhancement
                    data-target-enhancement-targets.0="#submenu-forecast"
                    data-target-enhancement-exclusive-group="subnavigation"
                    data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                    aria-expanded="false">

                    Wetter
                    </a>
                    <div class="c-live-overlay__item-content" id="submenu-forecast">
                        <weather:widget.forecast node="{node}" days="3" city="{liveWeatherForecastCity}" />
                    </div>
                </div>
            </f:if>

            <f:if condition="{liveWebcams}">
                <div class="c-live-overlay__item">
                    <a href="#submenu-webcams"
                    class="c-live-overlay__item-title"
                    data-target-enhancement
                    data-target-enhancement-targets.0="#submenu-webcams"
                    data-target-enhancement-exclusive-group="subnavigation"
                    data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                    aria-expanded="false">

                        Webcams
                    </a>

                    <div class="c-live-overlay__item-content" id="submenu-webcams">
                        <f:for each="{liveWebcams}" as="webcam">
                            <h4>Webcam</h4>
                            <div class="c-live-overlay-webcam">
                                <f:if condition="{webcam.properties.url}">
                                    <f:then>
                                        <noscript>
                                            <img class="c-live-overlay-webcam__image"
                                                src="{webcam.properties.url}"
                                                alt="Webcam image" />
                                        </noscript>
                                        <img class="c-live-overlay-webcam__image lazyload"
                                            data-src="{webcam.properties.url}"
                                            alt="Webcam image" />

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

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

                                    </f:else>
                                </f:if>
                            </div>
                        </f:for>
                        <f:if condition="{WebcamsLink}">
                            <a href="{f:if(condition: '{neos:rendering.inBackend()}', then: '', else: WebcamsLink)}"
                            class="block">

                                alle Webcams
                            </a>
                        </f:if>
                    </div>
                </div>
            </f:if>
        </div>

        <button
            class="c-button c-button--soft-rounded c-button-close"
            aria-label="Overlay schließen"
            data-overlay-close
            data-target-enhancement
            data-target-enhancement-exclusive-group="overlay-group"
            data-target-enhancement-targets.0=".c-live-overlay"
            data-target-enhancement-classes.0="is-target"
            data-target-enhancement-plugins.0.name="toggle-aria-expanded"
            aria-expanded="false">

            schließen

            <svg class="c-icon">
                <use xlink:href="#icon-close"></use>
            </svg>
        </button>
    </div>
</div>