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

<f:layout name="Default"/>

<f:section name="Content">
    <f:if condition="{forecast}">
        <h2 class="mt-0 mb-6">
            <f:translate id="cityDetails.weather.headline"
                         arguments="{0: article.name}"
                         package="Newland.Toubiz.Poi.Neos"
                         source="Views/Cities"/>
        </h2>
        <ul class="tb-weather-list tb-weather-list--horizontal">
            <f:for each="{forecast}" as="dayWeather" iteration="dayIterator">
                <f:if condition="{dayIterator.cycle} < 4">

                    <li class="tb-weather-list__item">
                        <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.Poi.Neos"
                                                     source="Views/Weather"/>
                                    </f:case>

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

                                    <f:case value="2">
                                        <f:translate id="word.dayAfterTomorrow"
                                                     package="Newland.Toubiz.Poi.Neos"
                                                     source="Views/Weather"/>
                                    </f:case>

                                    <f:defaultCase></f:defaultCase>
                                </f:switch>
                            </strong>
                            <span class="tb-weather-date__additional">
            <f:format.date date="{dayWeather.date}"
                           cldrFormat="dd.MM."
                           forceLocale="{node.context.dimensions.language.0}"/>
        </span>
                        </div>

                        <div class="tb-weather tb-weather--lg">
                            <svg class="tb-weather-icon tb-weather__icon"
                                 aria-hidden="true">

                                <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.Poi.Neos"
                                                     source="Views/Weather"/>
                                    </small>
                                </strong>
                            </div>
                        </div>
                    </li>

                </f:if>
            </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>
    </f:if>
</f:section>