{% extends "base.html" %}
{% block titolo %}{{ nome }}{% endblock %}

{% block contenuto %}

{# I pulsanti delle città: uno per ogni città del dizionario CITTA #}
<div class="pulsanti">
  {% for c in elenco_citta %}
    <a class="bottone {% if c != nome %}secondario{% endif %}" href="{{ url_for('citta', nome=c) }}">{{ c }}</a>
  {% endfor %}
</div>

{# Se l'API non ha risposto, avvisiamo che i dati non sono veri #}
{% if esempio %}
  <p class="flash flash-errore">⚠️ Nessuna connessione con l'API: questi sono <strong>dati di esempio</strong>, non il meteo vero.</p>
{% endif %}

{# Il meteo di adesso #}
<section class="scheda">
  <h1>{{ nome }}</h1>
  <p class="grande">{{ temperatura }} °C</p>
  <p>{{ tempo }}</p>
  <p class="meta">💨 Vento {{ vento }} km/h · aggiornato alle {{ ora }}</p>
</section>

{# I prossimi giorni: una scheda per giorno #}
<h2>Prossimi giorni</h2>
<div class="griglia">
  {% for g in giorni %}
    <div class="scheda">
      <h3>{{ g.data }}</h3>
      <p>{{ g.tempo }}</p>
      <p>🔺 {{ g.massima }} °C &nbsp; 🔻 {{ g.minima }} °C</p>
    </div>
  {% endfor %}
</div>

{% endblock %}