<div class="flex flex-col gap-3 h-full md:max-h-screen-50 overflow-auto adjusted-marg-x-sm adjusted-marg-b-sm max-sm:adjusted-marg-t-sm" x-data="listStoreLocator()" x-show="stores.length > 0">
<div class="text-body-sm self-stretch justify-center"><span x-text="stores.length < 10 ? stores.length : '9'"></span> points de vente État pur</div>
<template x-for="store in getStores">
<div class="flex flex-col gap-3 bg-white w-full border border-black/16 " x-data="{ open: false }">
<div class="px-4 py-3 flex items-start justify-between gap-2">
<div class="flex-1 min-w-0">
<h3 class="text-click-sm font-bold uppercase text-black truncate" x-text="store.name"></h3>
<p class="text-click-xs text-black/80 leading-snug line-clamp-2">
<span x-text="store.address"></span><br>
<span x-text="`${store.city} (${store.distance})`"></span>
</p>
</div>
<div>
<button type="button" @click="$store.locator.goToStore(store)" aria-label="Label text" class=" btn btn-dark btn-simple btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="16" height="16" stroke-width="1.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M15.5 6L15.5 3.1C15.5001 2.69101 15.2511 2.3232 14.8713 2.17133L10.8713 0.571333C10.633 0.475999 10.3671 0.475999 10.1287 0.571333L5.87134 2.27467C5.63296 2.37 5.36705 2.37 5.12867 2.27467L1.18601 0.697333C1.03153 0.635421 0.85637 0.654428 0.718768 0.748035C0.581166 0.841642 0.499157 0.997578 0.500007 1.164L0.500007 10.746C0.499938 11.155 0.748928 11.5228 1.12867 11.6747L5.12867 13.2747C5.36705 13.37 5.63296 13.37 5.87134 13.2747L7.79201 12.506" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M5.5 2.346L5.5 13.346" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M10.5 0.5L10.5 5.5" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M12.5 10.2993C12.6381 10.2993 12.75 10.4113 12.75 10.5493" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M12.25 10.5493C12.25 10.4113 12.3619 10.2993 12.5 10.2993" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M12.5 10.8C12.3619 10.8 12.25 10.6881 12.25 10.55" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M12.75 10.5493C12.75 10.6874 12.6381 10.7993 12.5 10.7993" stroke="currentColor" stroke-width="1.5" fill="none" />
<path d="M12.5 7.54933C14.1569 7.54933 15.5 8.89248 15.5 10.5493C15.5 11.83 13.708 14.2667 12.894 15.308C12.7992 15.4293 12.6539 15.5002 12.5 15.5002C12.3461 15.5002 12.2008 15.4293 12.106 15.308C11.292 14.2673 9.5 11.83 9.5 10.5493C9.5 8.89248 10.8431 7.54933 12.5 7.54933V7.54933Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</div>
<div class="flex flex-col gap-4 text-click-xs px-4 pb-4">
<div class="bg-brand-100 flex flex-col gap-2 px-4 py-3">
<button class="flex justify-between items-center gap-2 w-full text-body-xs" @click="open = !open" :aria-expanded="open" aria-controls="accordion-hours">
<span class="flex items-center gap-1.5">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 5V10H14.25M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<template x-if="$store.locator.getOpeningStatus(store).status === 'Ouvert'">
<span>
<span class="font-bold">Ouvert</span>
<span x-text="' jusqu’à ' + $store.locator.getOpeningStatus(store).end"></span>
</span>
</template>
<template x-if="$store.locator.getOpeningStatus(store).status === 'Fermé'">
<span class="font-bold">Fermé</span>
</template>
</span>
<svg class=" shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" :class="{'rotate-180': open}">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />
</svg> </button>
<div x-show="open" x-collapse id="accordion-hours" class="divide-y divide-black/08">
<template x-for="day in $store.locator.days" :key="day.key">
<div class="flex justify-between py-1">
<span class="font-bold text-black" x-text="day.label"></span>
<span class="text-right whitespace-nowrap text-neutral-800" x-html="(store[day.key] || 'Fermé').split(',').filter(Boolean).join('<br>')"></span>
</div>
</template>
</div>
</div>
</div>
</div>
</template>
</div>
<script>
function listStoreLocator() {
return {
get stores() {
const bounds = this.$store.locator.mapInstance?.getBounds();
const stores = this.$store.locator.filteredDistanceStores || [];
if (!bounds) return [];
return stores.filter(store => {
const lat = parseFloat(store.lat);
const lng = parseFloat(store.lng);
if (isNaN(lat) || isNaN(lng)) return false;
return bounds.contains(new google.maps.LatLng(lat, lng));
});
},
get getStores() {
// Return a maximum of 9 shops
return this.stores.slice(0, 9);
}
}
}
</script>
<div class="flex flex-col gap-3 h-full md:max-h-screen-50 overflow-auto adjusted-marg-x-sm adjusted-marg-b-sm max-sm:adjusted-marg-t-sm"
x-data="listStoreLocator()"
x-show="stores.length > 0"
>
<div class="text-body-sm self-stretch justify-center"><span x-text="stores.length < 10 ? stores.length : '9'"></span> points de vente État pur</div>
<template x-for="store in getStores">
{% render "@store-locator-card" %}
</template>
</div>
<script>
function listStoreLocator() {
return {
get stores() {
const bounds = this.$store.locator.mapInstance?.getBounds();
const stores = this.$store.locator.filteredDistanceStores || [];
if (!bounds) return [];
return stores.filter(store => {
const lat = parseFloat(store.lat);
const lng = parseFloat(store.lng);
if (isNaN(lat) || isNaN(lng)) return false;
return bounds.contains(new google.maps.LatLng(lat, lng));
});
},
get getStores() {
// Return a maximum of 9 shops
return this.stores.slice(0, 9);
}
}
}
</script>
/* No context defined. */
No notes defined.