{namespace neos=Neos\Neos\ViewHelpers}

<neos:contentElement.wrap node="{node}">
    <div
        class="c-hero-live-section"
        data-hero-live-section
    >
        <div class="c-hero-live-section__inner">
            <f:if condition="{heroLiveSectionWebcamsLink}">
                <f:then>
                    <div class="c-hero-live-section-tab c-hero-live-section-tab--webcams">
                        <p class="c-hero-live-section-tab__headline">
                            {f:translate(id: 'word.heroLiveWebcams', package: 'Newland.CityTheme', source: 'Main')}
                        </p>
                        <div class="c-hero-live-section__content">
                            <div class="c-hero-live-section-item">
                                <div class="flex items-center">
                                    <svg
                                        class="c-hero-live-section-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-hero-live-section-item__dot"
                                        aria-hidden
                                    >
                                    </div>
                                </div>
                                <p class="c-hero-live-section-item__title">
                                    Live
                                </p>
                            </div>

                            <a
                                class="c-hero-live-section-item__link"
                                href="{heroLiveSectionWebcamsLink}"
                                title="Webcams Link"
                                target="{f:if(condition: heroLiveSectionWebcamsLinkNewTab, then: '_blank')}"
                            >
                                {f:translate(id: 'word.details', package: 'Newland.CityTheme', source: 'Main')}
                            </a>
                        </div>
                    </div>
                </f:then>
            </f:if>
            <f:if condition="{heroLiveSectionSkiAreaToubizId}">
                <f:then>
                    <div
                        class="c-hero-live-section-tab c-hero-live-section-tab--snowreport"
                        data-live-ski-area-toubiz-id="{heroLiveSectionSkiAreaToubizId}"
                        data-live-weather-lat="{heroLiveSectionWeatherLat}"
                        data-live-weather-lon="{heroLiveSectionWeatherLon}"
                        data-api-v2-article-key="{toubizApiV2ArticleKey}"
                    >
                        <p class="c-hero-live-section-tab__headline">
                            {f:translate(id: 'word.heroLiveSnowreport', package: 'Newland.CityTheme', source: 'Main')}
                        </p>
                        <div class="c-hero-live-section__content">
                            <div
                                data-live-section-content
                                class="c-hero-live-section__content-flex hidden"
                            >
                                <f:if condition="{heroLiveSectionWeatherLat} && {heroLiveSectionWeatherLon}">
                                    <div
                                        class="c-hero-live-section-item"
                                    >
                                        <svg
                                            class="c-hero-live-section-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>
                                        <p
                                            class="c-hero-live-section-item__title"
                                            data-live-weather-degrees
                                        >

                                        </p>
                                    </div>
                                </f:if>
                                <div class="c-hero-live-section-item">
                                    <svg
                                        class="c-hero-live-section-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>
                                    <p
                                        class="c-hero-live-section-item__title"
                                        data-live-lifts-open
                                    >

                                    </p>
                                </div>
                                <div class="c-hero-live-section-item">
                                    <svg
                                        class="c-hero-live-section-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>
                                    <p
                                        class="c-hero-live-section-item__title"
                                        data-live-snow-depth
                                    >

                                    </p>
                                </div>
                            </div>

                            <!-- svg loader -->
                            <svg
                                data-live-section-loader
                                width="60"
                                height="60"
                                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">
                                        <stop stop-color="#fff" stop-opacity="0" offset="0%"/>
                                        <stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>
                                        <stop stop-color="#fff" 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)" stroke-width="2">
                                            <animateTransform
                                                attributeName="transform"
                                                type="rotate"
                                                from="0 18 18"
                                                to="360 18 18"
                                                dur="0.9s"
                                                repeatCount="indefinite" />
                                        </path>
                                        <circle fill="#fff" 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:if condition="{heroLiveSectionSnowreportLink}">
                                <a
                                    class="c-hero-live-section-item__link"
                                    href="{heroLiveSectionSnowreportLink}"
                                    title="Schneebericht Link"
                                    target="{f:if(condition: heroLiveSectionSnowreportLinkNewTab, then: '_blank')}"
                                >
                                    {f:translate(id: 'word.details', package: 'Newland.CityTheme', source: 'Main')}
                                </a>
                            </f:if>
                        </div>
                    </div>
                </f:then>
            </f:if>
            <f:if condition="{heroLiveSectionTicketLink}">
                <f:then>
                    <div class="c-hero-live-section-tab c-hero-live-section-tab--tickets">
                        <p class="c-hero-live-section-tab__headline">
                            {f:translate(id: 'word.heroLiveTickets', package: 'Newland.CityTheme', source: 'Main')}
                        </p>
                        <div class="c-hero-live-section__content">
                            <div class="c-hero-live-section-item">
                                <svg
                                    class="c-hero-live-section-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>
                            </div>
                            <a
                                class="mt-6 c-button c-button--color-primary {buttonType}"
                                href="{heroLiveSectionTicketLink}"
                                title="Ticket-Shop Link"
                                target="{f:if(condition: heroLiveSectionTicketLinkNewTab, then: '_blank')}"
                            >
                                {f:translate(id: 'word.toOnlineShop', package: 'Newland.CityTheme', source: 'Main')}
                            </a>
                        </div>
                    </div>
                </f:then>
            </f:if>
        </div>
    </div>
</neos:contentElement.wrap>