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

<f:layout name="Default" />

<f:section name="Content">
    <section class="tb-weather-forecast-wrapper">
        <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">
                            <div class="tb-weather-featured">
                                <strong class="tb-weather-list-item__title">
                                    <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>

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

                                    </span>
                                </strong>

                                <div class="tb-weather-icon-temperature-highest-lowest">
                                    {tb:icon.weather(id: dayWeather.symbol, source: 'meteotest', class: 'tb-weather-icon tb-weather-icon-temperature-highest-lowest__icon') -> f:format.raw()}

                                    <div class="tb-weather-icon-temperature-highest-lowest__text">
                                        <strong class="tb-weather-icon-temperature-highest-lowest__temperature">
                                            {dayWeather.maximumTemperature -> vh:math.round()}°C

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

                                            </small>
                                        </strong>

                                        <strong class="tb-weather-icon-temperature-highest-lowest__temperature tb-weather-icon-temperature-highest-lowest__temperature--lowest">
                                            {dayWeather.minimumTemperature -> vh:math.round()}°C
                                        </strong>
                                    </div>
                                </div>

                                <ul class="tb-weather-additional-meta-list">
                                    <li class="tb-weather-additional-meta-list-item">
                                        <div class="tb-weather-additional-meta-item">
                                            <svg class="tb-weather-icon tb-weather-icon__additional-meta-icon" aria-hidden="true">
                                                <use xlink:href="#icon-weather-sunny"></use>
                                            </svg>

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

                                                <f:translate id="property.attribute.sunshineDuration"
                                                            package="Newland.Toubiz.Weather.Neos"
                                                            source="Models/Weather" />

                                            </span>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <button class="tb-weather-forecast-togglebutton"
                                    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-target="#tb-weather-hourly-preview--{dayIterator.cycle}"
                                    data-target-enhancement-class="tb-weather-forecast__body--visible">

                                <svg class="tb-ui-icon tb-ui-icon--arrow-down" aria-hidden="true">
                                    <use xlink:href="#icon-ui-arrow-down"></use>
                                </svg>
                                <svg class="tb-ui-icon tb-ui-icon--arrow-up" 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>
                            </button>
                        </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.mainTimes}" as="hourWeather" key="day">
                                <li class="tb-weather-hourly-preview__item">
                                    <time>
                                        <f:format.date date="{day}"
                                                        cldrFormat="H"
                                                        forceLocale="{node.context.dimensions.language.0}" />

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

                                    </time>

                                    {tb:icon.weather(id: hourWeather.symbol, source: 'meteotest', class: 'tb-weather-icon') -> f:format.raw()}

                                    <strong>
                                        {hourWeather.temperature -> vh:math.round()}°C
                                    </strong>
                                </li>
                            </f:for>
                        </ul>
                    </div>
                </li>
            </f:for>
        </ul>
    </section>
</f:section>