start programme - calendrier

site/templates/program.php

@@ -1,9 +1,6 @@
 <?php snippet('header') ?>
-<pre>
-  <?= var_dump($currentSeasonSessions) ?>
-</pre>
 <div 
-  class="program-wrapper"
+  class="program-methods"
   x-data="{
     setInitialTab() {
       const queryString = window.location.search;
@@ -14,30 +11,73 @@
     }
   }"
 >
-  <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" 
+  <div class="program-data"
     x-data="{
       tab: setInitialTab()
     }"
   >
+  
+    <section class="filters">
+      <button 
+        x-data="{title: 'Calendrier'}"
+        x-text="title"
+        @click="tab = title"
+      ></button>
+      <button
+        x-data="{title: 'Spectacles'}"
+        x-text="title"
+        @click="tab = title"
+      ></button>
+      <button
+        x-data="{title: 'Autres événements'}"
+        x-text="title"
+        @click="tab = title"
+      ></button>
+      <button
+        x-data="{title: 'Ici & Là'}"
+        x-text="title"
+        @click="tab = title"
+      ></button>
+      <button
+        x-data="{title: 'Saisons précédentes'}"
+        x-text="title"
+        @click="tab = title"
+      ></button>
+    </section>
     <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])  ?>
+    
+    <!-- Programme -->
+    <template x-if="tab === 'Programme'">
+      <div class="program-content__events">
+        <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>
+    </template>
+
+    <!-- Calendrier -->
+    <template x-if="tab === 'Calendrier'">
+      <div class="program-content__events">
+        <section class="collapsable-sections">
+          <?php foreach($currentSeasonSessions as $month => $sessions): ?>
+            <?php if (count($sessions) > 0): ?>
+              <?php snippet('collapsable-section', ['title' => $month], slots: true) ?>
+                <?php slot('content') ?>
+                <?php endslot() ?>
+              <?php endsnippet() ?>
+            <?php endif ?>
+          <?php endforeach ?>
+        </section>
+      </div>
+    </template>
+  
   </div>
 </div>
 <?php snippet('footer') ?>