{namespace neos=Neos\Neos\ViewHelpers}

<neos:contentElement.wrap node="{node}">
    <div
        class="c-live-quickaccess c-live-quickaccess--inactive"
        data-live-quickaccess
        data-live-ski-area-toubiz-id="{heroLiveSectionSkiAreaToubizId}"
        data-live-weather-lat="{heroLiveSectionWeatherLat}"
        data-live-weather-lon="{heroLiveSectionWeatherLon}"
        data-api-v2-article-key="{toubizApiV2ArticleKey}"
    >
        <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="webcamIconTitle"
                        focusable="false"
                    >
                        <title id="webcamIconTitle">{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="{heroLiveSectionSkiAreaToubizId} && {heroLiveSectionSnowreportLink}">
                <f:if condition="{heroLiveSectionWeatherLat} && {heroLiveSectionWeatherLon}">
                    <a
                        data-live-section-content
                        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="weatherIconTitle"
                            focusable="false"
                        >
                            <title id="weatherIconTitle">{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>
                <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="liftsOpenIconTitle"
                        focusable="false"
                    >
                        <title id="liftsOpenIconTitle">{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="snowHeightIconTitle"
                        focusable="false"
                    >
                        <title id="snowHeightIconTitle">{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>

                <!-- 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="ticketIconTitle"
                        focusable="false"
                    >
                        <title id="ticketIconTitle">{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>