# Liste des prochains événements

On souhaite que la page d'accueil liste les 10 prochains événements. On commence par créer une méthode dans EventRepository:

/**
 * Retourne les prochains événements
 * @return Event[]
 */
public function findUpcoming(int $amount = 10): array
{
    return $this->createQueryBuilder('e')
        ->where('e.startAt > CURRENT_TIMESTAMP()')
        ->orderBy('e.startAt', 'ASC')
        ->setMaxResults($amount)
        ->getQuery()
        ->getResult()
    ;
}

Dans le controlleur HomeController, on change la méthode index():

#[Route('/', name: 'homepage')]
public function index(EventRepository $eventRepository): Response
{
    return $this->render('home/index.html.twig', [
        'events' => $eventRepository->findUpcoming(),
    ]);
}

# Inclusion de template Twig

Puisque nous avons déjà réalisé une liste d'événements dans la page agenda, nous allons réutiliser le même bloc HTML. Commencer par créer le fichier qui contiendra la carte de présentation d'événement: /templates/_includes/event_card.html.twig.

<div class="box columns my-6 p-0">
    <div class="column is-one-third p-0">
        <figure class="image is-3by2">
            <img src="https://loremflickr.com/920/640/event,music,poster?lock={{ event.id }}" alt="{{ event.title }}">
        </figure>
    </div>
    <div class="column">
        <div class="content">
            <h2 class="mb-2"><a href="#">{{ event.title }}</a></h2>
            <p class="is-size-6">
                <i class="fa-regular fa-calendar"></i> {{ event.startAt|date('d/m/Y') }}<br>
                <i class="fa-solid fa-clock"></i> {{ event.startAt|date('H\\hi') }} - {{ event.endAt|date('H\\hi') }}
            </p>

            <p>{{ event.description }}</p>
        </div>
    </div>
</div>

Enfin, mettons à jour /templates/event/agenda.html.twig pour inclure ce template en utilisant include (comme en PHP):

{% for event in events %}
    {% include '_includes/event_card.html.twig' with {event} %}
{% else %}
    ...
{% endfor %}

with permet de spécifier les variables à passer au template inclus, ça permet notamment de renommer des variables: with {nom_de_variable_souhaite: variable_actuelle}

Il nous reste plus qu'à mettre à jour le template de la page d'accueil: /templates/home/index.html.twig.

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

{% block title %}Accueil{% endblock %}

{% block content %}
    <div class="section">
        <h1 class="title">Prochains événements</h1>

        {% for event in events %}
            {% include '_includes/event_card.html.twig' with {event} %}
        {% endfor %}
    </div>
{% endblock %}