@extends('layouts.app')

@section('titre', 'Activités')

@section('contenu')

<section class="hero">
  <div class="container">
    <p class="hero-eyebrow">Au-delà du terrain</p>
    <h1>Le club dans la vie du village</h1>
    <p class="lede">L'Union Saint-Jean FC ne se limite pas au football : le club porte aussi des activités utiles à ses membres et à la commune.</p>
  </div>
</section>

<section class="section">
  <div class="container">
    @forelse ($activites as $activite)
      <div class="activite">
        <div class="activite-icone">
          <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="9"></circle>
          </svg>
        </div>
        <div>
          <h3>{{ $activite->titre }}</h3>
          @if ($activite->description)
            <p>{{ $activite->description }}</p>
          @endif
          @if ($activite->horaires)
            <p class="infos">{{ $activite->horaires }}</p>
          @endif
        </div>
      </div>
    @empty
      <p class="chapo">Aucune activité renseignée pour le moment.</p>
    @endforelse
  </div>
</section>

@endsection