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

{# City : 
    array:5 [▼
    "city" => "Nantes"
    "weather" => "sun-cloud"
    "date" => "29-01-2020"
    "min" => 0
    "max" => 6
    ]
#}

{% block title %}
    {{ city.city }}
{% endblock %}

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

    <div class="d-flex justify-content-between align-items-center">
        <h1>Prévision pour <i>{{ city.city }}</i></h1>
        <a href="{{ path('app_widget', {'index': indexCity })}}" class="btn btn-outline-success">Choisir cette ville</a>
    </div>

    <div class="city-forecast mb-3">
        <img src="{{ asset('images/city1.jpg') }}" alt="{{ city.city }}" class="img-fluid city-forecast__image">
        <div class="city-forecast__details">
            <img src="{{ asset('images/' ~ city.weather ~ '.png') }}">
            {# autre façon de faire, avec les " et #{ variable } 
                <img src="{{ asset("images/#{ city.weather }.png") }}">
            #}
            <span>Le {{ city.date }}</span>
            <span class="city-forecast__details--degrees">{{ city.min }} &deg;C / {{ city.max }} &deg;C</span>
            <span></span>
        </div>
    </div>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda repellendus nisi illum
        necessitatibus
        officiis, quaerat aspernatur at animi sapiente expedita praesentium dignissimos. Unde iusto eveniet
        cum.
        Dolorum molestias accusamus vero.</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit et eligendi cum officia. Neque
        dignissimos veniam libero itaque molestias doloribus delectus, corporis, quia dolores quasi suscipit
        maiores sunt? Qui, omnis?</p>

</div>
{% endblock %}