{namespace tb=Newland\Toubiz\Weather\Neos\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<f:layout name="Default" />

<f:section name="Content">
    <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}°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}°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-aria-target-enhancement
                                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>
    </ul>
</f:section>