program - order sessions by month

site/templates/program.php

@@ -1,13 +1,43 @@
 <?php snippet('header') ?>
-<section class="page-title">
-  <h1>Programme</h1>
-</section>
-<section class="yellow">
-  <h2>À venir — <?= $page->children()->first()->title() ?></h2>
-</section>
-<?php snippet('events-grid', ['events' => $nextEvents, 'columns' => 3])  ?>
-<section class="yellow">
-  <h2>Événements passés</h2>
-</section>
-  <?php snippet('events-grid', ['events' => $previousEvents, 'columns' => 3])  ?>
+<pre>
+  <?= var_dump($currentSeasonSessions) ?>
+</pre>
+<div 
+  class="program-wrapper"
+  x-data="{
+    setInitialTab() {
+      const queryString = window.location.search;
+      if (queryString.length === 0) return 'Programme';
+      const urlParams = new URLSearchParams(queryString);
+      const tab = urlParams.get('tab');
+      return tab;
+    }
+  }"
+>
+  <section class="filters">
+    <button>Calendrier</button>
+    <button>Spectacles</button>
+    <button>Autres événéments</button>
+    <button>Ici & Là</button>
+    <button>Saisons précédentes</button>
+  </section>
+
+  <div class="program-content" 
+    x-data="{
+      tab: setInitialTab()
+    }"
+  >
+    <section class="page-title">
+      <h1 x-text="tab"></h1>
+    </section>
+    <section class="yellow">
+      <h2>À venir — <?= $page->children()->first()->title() ?></h2>
+    </section>
+    <?php snippet('events-grid', ['events' => $nextEvents, 'columns' => 3])  ?>
+    <section class="yellow">
+      <h2>Événements passés</h2>
+    </section>
+    <?php snippet('events-grid', ['events' => $previousEvents, 'columns' => 3])  ?>
+  </div>
+</div>
 <?php snippet('footer') ?>