{namespace neos=Neos\Neos\ViewHelpers}

<neos:contentElement.wrap node="{node}">
    <div
        class="c-live-quickaccess c-live-quickaccess--inactive {f:if(condition: heroLiveSectionSummerMode, then: 'c-live-quickaccess--summer')}"
        data-live-quickaccess
        data-live-ski-area-toubiz-id="{heroLiveSectionSkiAreaToubizId}"
        data-live-weather-lat="{heroLiveSectionWeatherLat}"
        data-live-weather-lon="{heroLiveSectionWeatherLon}"
        data-live-opening-times-article-id="{heroLiveSectionOpeningTimesArticleId}"
        data-api-v2-article-key="{toubizApiV2ArticleKey}"
        data-api-v1-article-key="{toubizApiV1ArticleKey}"
    >
        <div class="c-live-quickaccess__inner">
            <f:if condition="{heroLiveSectionWebcamsLink}">
                <a
                    class="c-live-quickaccess-item"
                    href="{heroLiveSectionWebcamsLink}"
                    title="{f:translate(id: 'word.heroLiveWebcams', package: 'Newland.CityTheme', source: 'Main')}"
                    target="{f:if(condition: heroLiveSectionWebcamsLinkNewTab, then: '_blank')}"
                >
                    <svg
                        class="c-live-quickaccess-item__icon"
                        role="img"
                        aria-labelledby="liveQuickaccessWebcamIconTitle"
                        focusable="false"
                    >
                        <title id="liveQuickaccessWebcamIconTitle">{f:translate(id: 'word.heroLiveWebcams', package: 'Newland.CityTheme', source: 'Main')}</title>
                        <use xlink:href="#icon-webcam-live"></use>
                    </svg>
                    <div
                        class="c-live-quickaccess-item__dot"
                        aria-hidden
                    >
                    </div>
                </a>
            </f:if>
            <f:if condition="(!{heroLiveSectionSummerMode} && {heroLiveSectionSkiAreaToubizId}) || {heroLiveSectionSummerMode}">
                <f:if condition="{heroLiveSectionWeatherLat} && {heroLiveSectionWeatherLon}">
                    <a
                        data-live-section-content
                        data-live-weather-wrapper
                        class="c-live-quickaccess-item hidden"
                        href="{heroLiveSectionSnowreportLink}"
                        title="{f:translate(id: 'word.heroLiveWeather', package: 'Newland.CityTheme', source: 'Main')}"
                        target="{f:if(condition: heroLiveSectionSnowreportLinkNewTab, then: '_blank')}"
                    >
                        <svg
                            class="c-live-quickaccess-item__icon"
                            role="img"
                            aria-labelledby="liveQuickaccessWeatherIconTitle"
                            focusable="false"
                        >
                            <title id="liveQuickaccessWeatherIconTitle">{f:translate(id: 'word.heroLiveWeather', package: 'Newland.CityTheme', source: 'Main')}</title>
                            <use
                                data-live-weather-icon

                            ></use>
                        </svg>
                        <span
                            class="c-live-quickaccess-item__title"
                            data-live-weather-degrees
                        >
                        </span>
                    </a>
                </f:if>
                <f:if condition="{heroLiveSectionSummerMode}">
                    <f:then>
                        <div
                            class="c-live-quickaccess-item hidden"
                            data-live-section-content
                            data-live-opening-times-article-wrapper
                        >
                            <svg
                                class="c-live-quickaccess-item__icon"
                                role="img"
                                aria-labelledby="liveQuickaccessGondolaIconTitle"
                                focusable="false"
                            >
                                <title id="liveQuickaccessGondolaIconTitle">{f:translate(id: 'word.heroMountainRailwayInfo', package: 'Newland.CityTheme', source: 'Main')}</title>
                                <use xlink:href="#icon-gondola"></use>
                            </svg>
                            <span
                                class="c-live-quickaccess-item__title"
                                data-live-opening-times-article-opening-times
                            >
                            </span>
                        </div>
                    </f:then>
                    <f:else>
                        <a
                            data-live-section-content
                            class="c-live-quickaccess-item hidden"
                            href="{heroLiveSectionSnowreportLink}"
                            title="{f:translate(id: 'word.heroLiftsOpen', package: 'Newland.CityTheme', source: 'Main')}"
                            target="{f:if(condition: heroLiveSectionSnowreportLinkNewTab, then: '_blank')}"
                        >
                            <svg
                                class="c-live-quickaccess-item__icon"
                                role="img"
                                aria-labelledby="liveQuickaccessLiftsOpenIconTitle"
                                focusable="false"
                            >
                                <title id="liveQuickaccessLiftsOpenIconTitle">{f:translate(id: 'word.heroLiftsOpen', package: 'Newland.CityTheme', source: 'Main')}</title>
                                <use xlink:href="#icon-ski-lift"></use>
                            </svg>
                            <span
                                class="c-live-quickaccess-item__title"
                                data-live-lifts-open
                            >
                            </span>
                        </a>
                        <a
                            data-live-section-content
                            class="c-live-quickaccess-item hidden"
                            href="{heroLiveSectionSnowreportLink}"
                            title="{f:translate(id: 'word.snowHeight', package: 'Newland.CityTheme', source: 'Main')}"
                            target="{f:if(condition: heroLiveSectionSnowreportLinkNewTab, then: '_blank')}"
                        >
                            <svg
                                class="c-live-quickaccess-item__icon"
                                role="img"
                                aria-labelledby="liveQuickaccessSnowHeightIconTitle"
                                focusable="false"
                            >
                                <title id="liveQuickaccessSnowHeightIconTitle">{f:translate(id: 'word.snowHeight', package: 'Newland.CityTheme', source: 'Main')}</title>
                                <use xlink:href="#icon-snowflake"></use>
                            </svg>
                            <span
                                class="c-live-quickaccess-item__title"
                                data-live-snow-depth
                            >
                            </span>
                        </a>
                    </f:else>
                </f:if>

                <!-- svg loader -->
                <div
                    data-live-section-loader
                    class="c-live-quickaccess__dynamic-content-loader"
                >
                    <f:render section="quickaccessLoader" />
                </div>
            </f:if>
            <f:if condition="{heroLiveSectionTicketLink}">
                <a
                    class="c-live-quickaccess-item c-live-quickaccess-item--inverted"
                    href="{heroLiveSectionTicketLink}"
                    title="{f:translate(id: 'word.toOnlineShop', package: 'Newland.CityTheme', source: 'Main')}"
                    target="{f:if(condition: heroLiveSectionTicketLinkNewTab, then: '_blank')}"
                >
                    <svg
                        class="c-live-quickaccess-item__icon"
                        role="img"
                        aria-labelledby="liveQuickaccessTicketIconTitle"
                        focusable="false"
                    >
                        <title id="liveQuickaccessTicketIconTitle">{f:translate(id: 'word.heroLiveTickets', package: 'Newland.CityTheme', source: 'Main')}</title>
                        <use xlink:href="#icon-tickets-illustrated"></use>
                    </svg>
                    <span class="c-live-quickaccess-item__title">
                        {f:translate(id: 'word.heroLiveTickets', package: 'Newland.CityTheme', source: 'Main')}
                    </span>
                </a>
            </f:if>
        </div>
    </div>
</neos:contentElement.wrap>

<f:section name="quickaccessLoader">
    <svg
        class="text-primary-500"
        width="40"
        height="40"
        viewBox="0 0 38 38"
        xmlns="http://www.w3.org/2000/svg"
    >
        <defs>
            <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="tail-spin-loader-live-quickaccess">
                <stop stop-color="currentColor" stop-opacity="0" offset="0%"/>
                <stop stop-color="currentColor" stop-opacity=".631" offset="63.146%"/>
                <stop stop-color="currentColor" offset="100%"/>
            </linearGradient>
        </defs>
        <g fill="none" fill-rule="evenodd">
            <g transform="translate(1 1)">
                <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#tail-spin-loader-live-quickaccess)" stroke-width="2">
                    <animateTransform
                        attributeName="transform"
                        type="rotate"
                        from="0 18 18"
                        to="360 18 18"
                        dur="0.9s"
                        repeatCount="indefinite" />
                </path>
                <circle fill="currentColor" cx="36" cy="18" r="1">
                    <animateTransform
                        attributeName="transform"
                        type="rotate"
                        from="0 18 18"
                        to="360 18 18"
                        dur="0.9s"
                        repeatCount="indefinite" />
                </circle>
            </g>
        </g>
    </svg>
</f:section>
