From 12846c0f3a81d29f9882a9b3ce2388ac2f69e2ff Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Mon, 9 Mar 2026 17:30:46 +0100
Subject: [PATCH] =?UTF-8?q?Filtrer=20les=20dates=20pass=C3=A9es=20et=20aff?=
 =?UTF-8?q?icher=20les=20prochaines=20dates=20avant=20la=20galerie=20sur?=
 =?UTF-8?q?=20la=20page=20spectacle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/spectacles/[id].astro | 43 ++++++++++++++++++---------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/pages/spectacles/[id].astro b/src/pages/spectacles/[id].astro
index 59eec1d..d3cd0a0 100644
--- a/src/pages/spectacles/[id].astro
+++ b/src/pages/spectacles/[id].astro
@@ -43,6 +43,9 @@ if (liveStory) {
 if (!spectacle) {
   return Astro.redirect('/spectacles/');
 }
+
+const now = new Date();
+upcomingDates = upcomingDates.filter(event => new Date(event.date) >= now);
 ---
 
 <Layout title={`${spectacle.title} — Compagnie AspiRêves`}>
@@ -118,28 +121,9 @@ if (!spectacle) {
         </div>
       </div>
 
-      <!-- Gallery -->
-      {spectacle.gallery.length > 0 && (
-        <section class="fade-up mb-16 md:mb-24">
-          <h2 class="font-display text-3xl md:text-5xl text-night mb-8 md:mb-12 text-center">Galerie</h2>
-          <div class="columns-1 sm:columns-2 gap-6 md:gap-8">
-            {spectacle.gallery.map((img, index) => (
-              <div class="mb-6 md:mb-8 break-inside-avoid overflow-hidden rounded-2xl md:rounded-3xl shadow-xl shadow-night/5 border-4 border-white">
-                <img
-                  src={img}
-                  alt={`${spectacle.title} - photo ${index + 1}`}
-                  class="w-full h-auto"
-                  referrerpolicy="no-referrer"
-                />
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
-
       <!-- Upcoming dates -->
       {upcomingDates.length > 0 && (
-        <section class="fade-up">
+        <section class="fade-up mb-16 md:mb-24">
           <h2 class="font-display text-3xl md:text-5xl text-night mb-8 md:mb-12 text-center">Prochaines dates</h2>
           <div class="space-y-4 max-w-2xl mx-auto">
             {upcomingDates.map(event => {
@@ -180,6 +164,25 @@ if (!spectacle) {
           </div>
         </section>
       )}
+
+      <!-- Gallery -->
+      {spectacle.gallery.length > 0 && (
+        <section class="fade-up">
+          <h2 class="font-display text-3xl md:text-5xl text-night mb-8 md:mb-12 text-center">Galerie</h2>
+          <div class="columns-1 sm:columns-2 gap-6 md:gap-8">
+            {spectacle.gallery.map((img, index) => (
+              <div class="mb-6 md:mb-8 break-inside-avoid overflow-hidden rounded-2xl md:rounded-3xl shadow-xl shadow-night/5 border-4 border-white">
+                <img
+                  src={img}
+                  alt={`${spectacle.title} - photo ${index + 1}`}
+                  class="w-full h-auto"
+                  referrerpolicy="no-referrer"
+                />
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
     </div>
   </div>
 </Layout>