{# Questa pagina "eredita" da base.html: prende testata, menu e piè di pagina #}
{% extends "base.html" %}

{% block titolo %}Tutti i giochi{% endblock %}

{% block contenuto %}
  <h1>I videogiochi della classe</h1>
  {# Form GET: i dati finiscono nell'indirizzo (/?q=...). Comodo per le ricerche. #}
  <form method="get" action="{{ url_for('home') }}" class="riga">
    <input name="q" value="{{ q }}" placeholder="Cerca per titolo...">
    <button>Cerca</button>
    {% if q %}<a href="{{ url_for('home') }}">Annulla ricerca</a>{% endif %}
  </form>

  {% if q %}
    <p>Risultati per "<b>{{ q }}</b>": {{ giochi | length }}</p>
  {% else %}
    <p>Nel catalogo ci sono <b>{{ giochi | length }}</b> giochi.</p>
  {% endif %}

  {% if not giochi %}<p class="vuoto">Nessun gioco trovato.</p>{% endif %}

  <div class="griglia">
    {# CICLO: ripete il blocco per ogni gioco della lista #}
    {% for g in giochi %}
      <div class="scheda">
        <h3><a href="{{ url_for('scheda', id_gioco=g.id) }}">{{ g.titolo }}</a></h3>
        <p class="meta">{{ g.anno }} · {{ g.genere }}</p>

        {# CONDIZIONE: un'etichetta diversa in base al voto #}
        {% if g.voto >= 9 %}
          <span class="etichetta verde">Capolavoro · {{ g.voto }}</span>
        {% elif g.voto >= 7 %}
          <span class="etichetta">Bello · {{ g.voto }}</span>
        {% else %}
          <span class="etichetta rossa">Così così · {{ g.voto }}</span>
        {% endif %}
      </div>
    {% endfor %}
  </div>
{% endblock %}