{% extends 'base.html.twig' %}

{% block title %}Accueil Météo{% endblock %}

{% block nav_default %}active{% endblock %}

{% block body %}
<!-- Content (les pages) -->
<div class="col-9">

    <h1 class="mb-5">Bienvenue sur la météo des villes !</h1>
    {% for key,city in allCities %}
        {# {% dump(city) %}
            array:5 [▼
                "city" => "Annecy"
                "weather" => "snow"
                "date" => "29-01-2020"
                "min" => -4
                "max" => 2
                ]
        #}
        <div class="item item--bg-{{ city.weather }}">
            <div class="item--city"><a href="{{ path('app_city', {'index': key})}}">{{ city.city }}</a></div>
            {# 
            https://twig.symfony.com/doc/3.x/filters/date.html
            https://www.php.net/manual/fr/datetime.format.php 
            #}
            <div class="item--forecast">{{ city.date|date("d/m") }} : {{ city.min }}°C / {{ city.max }}°C</div>
        </div>
    {% endfor %}
    
    
    {#
    <div class="item item--bg-rain">
        <div class="item--city"><a href="city.html">Biarritz</a></div>
        <div class="item--forecast">29-01 : -5°C / 0°C</div>
    </div>
    <div class="item item--bg-sun-cloud">
        <div class="item--city"><a href="city.html">Bordeaux</a></div>
        <div class="item--forecast">29-01 : 0°C / 10°C</div>
    </div>
    <div class="item item--bg-storm">
        <div class="item--city"><a href="city.html">Bruxelles</a></div>
        <div class="item--forecast">29-01 : -3°C / 5°C</div>
    </div>
    <div class="item item--bg-sun-cloud">
        <div class="item--city"><a href="city.html">Chambéry</a></div>
        <div class="item--forecast">29-01 : -2°C / 6°C</div>
    </div>
    <div class="item item--bg-snow">
        <div class="item--city"><a href="city.html">Grenoble</a></div>
        <div class="item--forecast">29-01 : -3°C / 3°C</div>
    </div>
    <div class="item item--bg-clouds">
        <div class="item--city"><a href="city.html">Lille</a></div>
        <div class="item--forecast">29-01 : 1°C / 7°C</div>
    </div>
    <div class="item item--bg-snow">
        <div class="item--city"><a href="city.html">Lyon</a></div>
        <div class="item--forecast">29-01 : 3°C / 12°C</div>
    </div>
    <div class="item item--bg-shower">
        <div class="item--city"><a href="city.html">Marseille</a></div>
        <div class="item--forecast">29-01 : -5°C / 5°C</div>
    </div>
    <div class="item item--bg-snow">
        <div class="item--city"><a href="city.html">Metz</a></div>
        <div class="item--forecast">29-01 : 2°C / 7°C</div>
    </div>
    <div class="item item--bg-shower">
        <div class="item--city"><a href="city.html">Montpellier</a></div>
        <div class="item--forecast">29-01 : 3°C / 11°C</div>
    </div>
    <div class="item item--bg-sun-cloud">
        <div class="item--city"><a href="city.html">Nantes</a></div>
        <div class="item--forecast">29-01 : 0°C / 6°C</div>
    </div>
    <div class="item item--bg-snow">
        <div class="item--city"><a href="city.html">Nice</a></div>
        <div class="item--forecast">29-01 : -3°C / 3°C</div>
    </div>
    <div class="item item--bg-shower">
        <div class="item--city"><a href="city.html">Paris</a></div>
        <div class="item--forecast">29-01 : 2°C / 11°C</div>
    </div>
    <div class="item item--bg-sun">
        <div class="item--city"><a href="city.html">Rouen</a></div>
        <div class="item--forecast">29-01 : 0°C / 8°C</div>
    </div>
    <div class="item item--bg-shower">
        <div class="item--city"><a href="city.html">Toulouse</a></div>
        <div class="item--forecast">29-01 : 1°C / 9°C</div>
    </div>
    #}
</div>
{% endblock %}