count carpool areas on the accordion badge

themes/mms43/layouts/_partials/search-results.html

@@ -121,11 +121,20 @@
     </div>
 
     <!-- Covoiturage -->
-    <div class="result-accordion" x-data="{ open: false }"
+    <div class="result-accordion"
+         x-data="{ open: false, get areaCount() { return (results.carpool_areas?.departure?.number || 0) + (results.carpool_areas?.arrival?.number || 0); } }"
          x-init="$watch('open', value => value ? showCarpoolAreaMarkers() : hideCarpoolAreaMarkers())">
       <button type="button" class="accordion-header" @click="open = !open" :class="{ 'active': open }">
         <span class="accordion-title">Covoiturage</span>
         <span class="accordion-badge" x-text="results.carpools?.number || 0"></span>
+        <span class="accordion-badge accordion-badge-areas" x-show="areaCount" x-cloak
+              :title="areaCount + ' aire' + (areaCount > 1 ? 's' : '') + ' de covoiturage à proximité'">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M15 10.5a3 3 0 1 1 -6 0a3 3 0 0 1 6 0z"/>
+            <path d="M19.5 10.5c0 7.142 -7.5 11.25 -7.5 11.25s-7.5 -4.108 -7.5 -11.25a7.5 7.5 0 1 1 15 0z"/>
+          </svg>
+          <span x-text="areaCount"></span>
+        </span>
         {{ if $iconArrow }}
           <img src="{{ $iconArrow.RelPermalink }}" alt="" class="accordion-arrow" :class="{ 'open': open }" />
         {{ end }}