feat: add secondary agegroup selector for subgroup filtering

- Added subgroup dropdown selector to filter events by team within agegroup
- Implemented logic to populate subgroup options based on selected agegroup
- Updated event filtering to support both agegroup and subgroup criteria
- Added event listeners for real-time filtering when selectors change

index.html

@@ -41,6 +41,10 @@
                 <select id="agegroup" class="form-select">
                     <option value="">Tous</option>
                 </select>
+                <label for="subgroup" class="form-label">Sous-groupe</label>
+                <select id="subgroup" class="form-select">
+                    <option value="">Tous</option>
+                </select>
                 <button id="fetchEvents" class="btn btn-primary" style="margin-top: 1.2rem;">Charger</button>
             </div>
         </div>
@@ -77,6 +81,7 @@
             const eventFilters = document.getElementById("eventFilters");
             const accountSelect = document.getElementById("account");
             const agegroupSelect = document.getElementById("agegroup");
+            const subgroupSelect = document.getElementById("subgroup");
             const eventList = document.getElementById("eventList");
             const fetchButton = document.getElementById("fetchEvents");
             const eventDetailsContent = document.getElementById("eventDetailsContent");
@@ -335,6 +340,12 @@
             });
 
             agegroupSelect.addEventListener("change", () => {
+                // Update subgroup options based on selected agegroup
+                updateSubgroupOptions(agegroupSelect.value, lastFetchedEvents);
+                displayEvents(lastFetchedEvents);
+            });
+
+            subgroupSelect.addEventListener("change", () => {
                 displayEvents(lastFetchedEvents);
             });
 
@@ -413,12 +424,61 @@
                     option.textContent = group;
                     agegroupSelect.appendChild(option);
                 });
+
+                // Reset subgroup selector
+                subgroupSelect.innerHTML = '<option value="">Tous</option>';
+            }
+
+            function updateSubgroupOptions(selectedAgegroup, events) {
+                // Reset subgroup options
+                subgroupSelect.innerHTML = '<option value="">Tous</option>';
+
+                if (selectedAgegroup === "") {
+                    // If no agegroup is selected, disable subgroup selector
+                    subgroupSelect.disabled = true;
+                    return;
+                }
+
+                // Enable subgroup selector
+                subgroupSelect.disabled = false;
+
+                // Extract subgroups from events matching the selected agegroup
+                let subgroups = new Set();
+                events
+                    .filter(event => event.agegroup === selectedAgegroup)
+                    .forEach(event => {
+                        // Extract subgroup from event.name or event.title
+                        // This assumes the subgroup is part of the name field
+                        if (event.name && event.name !== selectedAgegroup) {
+                            subgroups.add(event.name);
+                        }
+                    });
+
+                // Add subgroups to the selector
+                Array.from(subgroups).sort().forEach(subgroup => {
+                    const option = document.createElement("option");
+                    option.value = subgroup;
+                    option.textContent = subgroup;
+                    subgroupSelect.appendChild(option);
+                });
             }
 
             function displayEvents(events) {
                 eventList.innerHTML = "";
                 let selectedAgegroup = agegroupSelect.value;
-                let filteredEvents = events.filter(event => event.event === "Jeu" && (selectedAgegroup === "" || event.agegroup === selectedAgegroup));
+                let selectedSubgroup = subgroupSelect.value;
+                let filteredEvents = events.filter(event => {
+                    // Filter by event type
+                    if (event.event !== "Jeu") return false;
+
+                    // Filter by agegroup
+                    if (selectedAgegroup !== "" && event.agegroup !== selectedAgegroup) return false;
+
+                    // Filter by subgroup
+                    if (selectedSubgroup !== "" && event.name !== selectedSubgroup) return false;
+
+                    return true;
+                });
 
                 if (filteredEvents.length === 0) {
                     eventList.innerHTML = "<p class='text-muted'>Aucun événement 'Jeu' trouvé.</p>";