<ul class="tb-weather-forecast-list">
    <f:for each="{forecast}" as="dayWeather" iteration="dayIterator">
        <li class="tb-weather-forecast-list__item">
            <div class="tb-weather-forecast">
                <div class="tb-weather-forecast__header tb-weather-forecast-header">
                    <div class="tb-weather-date">
                        <strong class="tb-weather-date__main">
                            <f:switch expression="{dayIterator.index}">
                                <f:case value="0">
                                    <f:translate
                                        id="word.today"
                                        package="Newland.Toubiz.Weather.Neos"
                                        source="Views/Shared"/>

                                </f:case>

                                <f:case value="1">
                                    <f:translate
                                        id="word.tomorrow"
                                        package="Newland.Toubiz.Weather.Neos"
                                        source="Views/Shared"/>

                                </f:case>

                                <f:defaultCase>
                                    <f:format.date 
                                        date="{dayWeather.date}"
                                        cldrFormat="EEEE"
                                        forceLocale="{node.context.dimensions.language.0}"/>

                                </f:defaultCase>
                            </f:switch>
                        </strong>

                        <span class="tb-weather-date__additional">
                                <f:format.date 
                                    date="{dayWeather.date}"
                                    cldrFormat="d. MMMM y"
                                    forceLocale="{node.context.dimensions.language.0}"/>

                            </span>
                    </div>

                    <div class="tb-weather-forecast-header__info">
                        <div class="tb-weather">
                            <svg class="tb-weather-icon tb-weather__icon">
                                <use xlink:href="#icon-weather-{dayWeather.symbol}"></use>
                            </svg>

                            <div class="tb-weather__text">
                                <strong class="tb-weather__temperature">
                                    {dayWeather.maximumTemperature -> vh:math.round()}°C

                                    <small class="tb-weather__condition">
                                        <f:translate
                                            id="weather.symbol.{dayWeather.symbol}"
                                            package="Newland.Toubiz.Weather.Neos"
                                            source="Views/Shared"/>

                                    </small>
                                </strong>

                                <strong class="tb-weather__temperature">
                                    {dayWeather.minimumTemperature -> vh:math.round()}°C
                                </strong>
                            </div>
                        </div>

                        <f:if condition="{dayWeather.sunshineDurationData}">
                            <ul class="tb-weather-list tb-weather-list--horizontal lg:ml-8 mt-4 lg:mt-0">
                                <li class="tb-weather-list__item">
                                    <div class="tb-weather-additional">
                                        <svg class="tb-weather-icon tb-weather-additional__icon" aria-hidden="true">
                                            <use xlink:href="#icon-weather-sunny"></use>
                                        </svg>

                                        <span class="tb-weather-additional__text">
                                            <strong class="tb-weather-additional__value">
                                                {vh:math.round(value: '{dayWeather.sunshineDuration / 60}', precision: 1)}h
                                            </strong>

                                            <p class="tb-weather-additional__label">
                                                <f:translate
                                                    id="property.attribute.sunshineDuration"
                                                    package="Newland.Toubiz.Weather.Neos"
                                                    source="Models/Weather"/>
                                            </p>
                                        </span>
                                    </div>
                                </li>
                            </ul>
                        </f:if>
                    </div>

                    <a 
                        class="tb-weather-forecast-header__toggle"
                        href="#tb-weather-hourly-preview--{dayIterator.cycle}"
                        aria-expanded="{f:if(condition: dayIterator.isFirst, then: 'true', else: 'false')}"
                        aria-pressed="{f:if(condition: dayIterator.isFirst, then: 'true', else: 'false')}"
                        aria-haspopup="true"
                        data-target-enhancement
                        data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                        data-target-enhancement-class="tb-weather-forecast__body--visible">

                        <svg class="tb-weather-forecast-header__icon tb-ui-icon" aria-hidden="true">
                            <use xlink:href="#icon-ui-arrow-up"></use>
                        </svg>
                        <span class="sr-only">
                            <f:translate
                                id="sentence.toggleHourlyPreview"
                                package="Newland.Toubiz.Weather.Neos"
                                source="Views/Shared"/>

                        </span>
                    </a>
                </div>

                <ul     
                    id="tb-weather-hourly-preview--{dayIterator.cycle}"
                    class="tb-weather-forecast__body tb-weather-hourly-preview {f:if(condition: dayIterator.isFirst, then: 'tb-weather-forecast__body--visible')}">

                    <f:for each="{dayWeather.mainHoursPadded}" as="hourWeather">
                        <li class="tb-weather-hourly-preview__item">
                            <f:if condition="{hourWeather.date}">
                                <time>
                                    <f:format.date 
                                        date="{hourWeather.date}"
                                        cldrFormat="H"
                                        forceLocale="{node.context.dimensions.language.0}"/>

                                    <f:translate
                                        id="word.oClock"
                                        package="Newland.Toubiz.Weather.Neos"
                                        source="Views/Shared"/>

                                </time>

                                <svg class="tb-weather-icon">
                                    <use xlink:href="#icon-weather-{hourWeather.symbol}"></use>
                                </svg>

                                <strong>
                                    {hourWeather.temperature}°C
                                </strong>
                            </f:if>
                        </li>
                    </f:for>
                </ul>
            </div>
        </li>
    </f:for>
    <f:if condition="{copyrightInfo.name}">
        <div class="tb-weather-copyright">
            <span>&copy; <a href="{copyrightInfo.url}" target="_blank">{copyrightInfo.name}</a></span>
        </div>
    </f:if>
</ul>
