@extends('layouts.app')

@section('titre', 'Événements')

@section('contenu')

<section class="hero">
  <div class="container">
    <p class="hero-eyebrow">Agenda du club</p>
    <h1>Les temps forts de la saison</h1>
    <p class="lede">Au-delà des matchs, L'Union Saint-Jean FC anime le village toute l'année à travers ses événements traditionnels.</p>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="section-tete">
      <p class="section-eyebrow">À venir</p>
      <h2>Rendez-vous de la saison</h2>
      <p class="chapo">Chaque événement est organisé par les bénévoles du club et contribue au financement des équipes jeunes.</p>
    </div>

    @forelse ($evenements as $evenement)
      <div class="billet">
        <div class="billet-date">
          <span class="jour">{{ $evenement->date_evenement->format('d') }}</span>
          <span class="mois">{{ ucfirst($evenement->date_evenement->translatedFormat('M.')) }}</span>
        </div>
        <div class="billet-corps">
          <span class="billet-type">{{ $evenement->type }}</span>
          <h3>{{ $evenement->titre }}</h3>
          @if ($evenement->description)
            <p>{{ $evenement->description }}</p>
          @endif
          <p class="billet-lieu">{{ $evenement->lieu }}</p>
        </div>
      </div>
    @empty
      <p class="chapo">Aucun événement programmé pour le moment.</p>
    @endforelse
  </div>
</section>

@endsection