Add conditional reset button for event filters

contao/templates/frontend/event_filter.html.twig

@@ -31,6 +31,8 @@
         </div>
     </div>
 
+    <button type="button" id="eventfilter-reset" class="eventfilter-reset" hidden>Filter zurücksetzen</button>
+
     <p id="eventfilter-status" class="visually-hidden" aria-live="polite"></p>
 </div>
 
@@ -75,8 +77,13 @@
         outline: 2px solid currentColor;
         outline-offset: 2px;
     }
+
+    #eventfilters .eventfilter-reset[hidden] {
+        display: none;
+    }
 </style>
 
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.css">
 <script src="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.min.js"></script>
 
 <script type="module">
@@ -102,6 +109,7 @@
     const tagWidget = tagSelect?.closest('.widget-select');
     const locationWidget = locationSelect?.closest('.widget-select');
     const orgWidget = orgSelect?.closest('.widget-select');
+    const resetButton = filters.querySelector('#eventfilter-reset');
     const status = filters.querySelector('#eventfilter-status');
 
     const animationMs = 220;
@@ -189,6 +197,10 @@
         tagWidget?.classList.toggle('active', hasActiveTag);
         locationWidget?.classList.toggle('active', hasActiveLocation);
         orgWidget?.classList.toggle('active', hasActiveOrg);
+
+        if (resetButton) {
+            resetButton.hidden = !(hasActiveTag || hasActiveLocation || hasActiveOrg);
+        }
     };
 
     const parseIdList = (rawValue) => (rawValue ?? '')
@@ -312,5 +324,13 @@
         );
     });
 
+    resetButton?.addEventListener('click', () => {
+        setSelectValue(tagSelect, tagSlim, 'all');
+        setSelectValue(locationSelect, locationSlim, 'all');
+        setSelectValue(orgSelect, orgSlim, 'all');
+
+        applyFilter({ type: 'all', value: 'all' });
+    });
+
     applyFilter(currentFilter);
 </script>