From 104fb09ea2f6ccf497944bc652d7935c41c86383 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Mon, 2 Sep 2024 18:02:46 +0200
Subject: [PATCH] program page - start filter system

---
 assets/css/src/generic.css |  4 ++++
 site/templates/program.php | 37 +++++++++++++++++++++++++++++--------
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/assets/css/src/generic.css b/assets/css/src/generic.css
index 4566260..1d607b7 100644
--- a/assets/css/src/generic.css
+++ b/assets/css/src/generic.css
@@ -149,3 +149,7 @@
 .session__info > p:not(:last-child) {
   margin-bottom: 1rem;
 }
+
+.strong {
+  font-weight: bolder;
+}
diff --git a/site/templates/program.php b/site/templates/program.php
index f85e24a..ccaf11b 100644
--- a/site/templates/program.php
+++ b/site/templates/program.php
@@ -17,7 +17,8 @@
 >
   <div class="program-data"
     x-data="{
-      tab: setInitialTab()
+      tab: setInitialTab(),
+      filter: null
     }"
   >
   
@@ -25,26 +26,46 @@
       <button 
         x-data="{title: 'Calendrier'}"
         x-text="title"
+        :class="tab === title ? 'strong' : ''"
         @click="tab = title"
       ></button>
       <button
-        x-data="{title: 'Spectacles'}"
+        x-data="{
+          title: 'Spectacles',
+          get filterTitle() {
+            return 'Calendrier — ' + this.title
+          }
+        }"
         x-text="title"
-        @click="tab = title"
+        :class="tab === filterTitle ? 'strong' : ''"
+        @click="tab = filterTitle; filter = title"
       ></button>
       <button
-        x-data="{title: 'Autres événements'}"
+        x-data="{
+          title: 'Autres événements',
+          get filterTitle() {
+            return 'Calendrier — ' + this.title
+          }
+        }"
         x-text="title"
-        @click="tab = title"
+        :class="tab === filterTitle ? 'strong' : ''"
+        @click="tab = filterTitle; filter = title"
       ></button>
       <button
-        x-data="{title: 'Ici & Là'}"
+        x-data="{
+          title: 'Ici & Là',
+          get filterTitle() {
+            return 'Calendrier — ' + this.title
+          }
+        }"
         x-text="title"
-        @click="tab = title"
+        :class="tab === filterTitle ? 'strong' : ''"
+        @click="tab = filterTitle; filter = title"
       ></button>
       <button
         x-data="{title: 'Saisons précédentes'}"
         x-text="title"
+        :class="tab === title ? 'strong' : ''"
         @click="tab = title"
       ></button>
     </section>
@@ -67,7 +88,7 @@
     </template>
 
     <!-- Calendrier -->
-    <template x-if="tab === 'Calendrier'">
+    <template x-if="tab.includes('Calendrier')">
       <div class="program-content__events">
         <section class="collapsable-sections">
           <?php foreach($currentSeasonSessions as $month => $sessions): ?>