<div class="flex flex-col justify-center gap-y-8">
<div class="md:hidden">
<div class="flex justify-between items-center">
<button type="button" class=" btn btn-dark btn-simple btn-size-sm btn-icons">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 13L5.5 8L10.5 3" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> Retour
</button>
</div>
</div>
<div class="flex flex-col gap-y-4">
<h2 class="h5">Mes adresses par défaut</h2>
<div class="flex flex-col md:flex-row gutter-half">
<div class="flex flex-col flex-1 gap-y-2 p-4 border border-black/16">
<h3 class="text-brand-700 font-bold text-body-base">Adresse de facturation</h3>
<div class="text-primary text-body-base">
<address class="not-italic">
<span class="font-bold">Marie-Noëlle Vincent</span><br>
2 rue du Conseil des Quinze<br>
Strasbourg, 67000<br>
France<br>
T: <a href="tel:0123456789">0123456789</a>
</address>
</div>
<div>
<a href="#" class="
underline
link-base
link-base
">
Modifier l'adresse de facturation
</a>
</div>
</div>
<div class="flex flex-col flex-1 gap-y-2 p-4 border border-black/16">
<h3 class="text-brand-700 font-bold text-body-base">Adresse de livraison</h3>
<div class="text-primary text-body-base">
<address class="not-italic">
<span class="font-bold">Marie-Noëlle Vincent</span><br>
2 rue du Conseil des Quinze<br>
Strasbourg, 67000<br>
France<br>
T: <a href="tel:0123456789">0123456789</a>
</address>
</div>
<div>
<a href="#" class="
underline
link-base
link-base
">
Modifier l'adresse de livraison
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-4">
<h2 class="h5">Carnet d'adresses</h2>
<div>
<div class="">
<table class="w-full">
<thead>
<tr class="h-14 border-b border-brand text-left text-body-sm font-bold">
<th class="p-2 hidden md:table-cell">Nom</th>
<th class="p-2">Adresse</th>
<th class="p-2 hidden md:table-cell">Ville</th>
<th class="p-2 hidden md:table-cell">Pays</th>
<th class="p-2 text-center">Detail</th>
<th class="p-2"></th>
</tr>
</thead>
<tbody>
<tr class="h-14 border-b border-black/08 even:bg-neutral-50 text-body-sm">
<td class="p-2 hidden md:table-cell">Vincent Marie-Noëlle</td>
<td class="p-2">
<div>
19 rue François Bonvin
<span class="md:hidden">
<br>75015 Paris
<br>France
</span>
</div>
</td>
<td class="p-2 hidden md:table-cell">75015 Paris</td>
<td class="p-2 hidden md:table-cell">France</td>
<td class="p-2">
<div class="flex items-center justify-center">
<button type="button" class=" btn btn-dark btn-outline btn-size-md">
Editer
</button>
</div>
</td>
<td class="p-2">
<div class="flex items-center justify-center">
<button type="button" aria-label="Label text" class=" btn btn-dark btn-simple btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</td>
</tr>
<tr class="h-14 border-b border-black/08 even:bg-neutral-50 text-body-sm">
<td class="p-2 hidden md:table-cell">Vincent Marie-Noëlle</td>
<td class="p-2">
<div>
32 Avenue des Vespins
<span class="md:hidden">
<br>06800 Cagnes-sur-Mer
<br>France
</span>
</div>
</td>
<td class="p-2 hidden md:table-cell">06800 Cagnes-sur-Mer</td>
<td class="p-2 hidden md:table-cell">France</td>
<td class="p-2">
<div class="flex items-center justify-center">
<button type="button" class=" btn btn-dark btn-outline btn-size-md">
Editer
</button>
</div>
</td>
<td class="p-2">
<div class="flex items-center justify-center">
<button type="button" aria-label="Label text" class=" btn btn-dark btn-simple btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex justify-between items-start pt-6">
<p class="text-body-sm text-black/64">
<span class="font-bold">2</span>
addresses
</p>
<div class="flex items-center">
<div class="flex flex-col w-full gap-y-1 field field-reserved">
<div x-data="selectlimiterOptions" class="input-wrapper input-wrapper-select flex flex-col relative w-full ">
<button type="button" @click="openSelect" x-ref="selectButton" class="form-select w-full peer flex justify-between btn gap-x-2
" :class="selected ? 'option-selected' : ''">
<label for="limiterOptions" class="text-body-xs text-black/72 flex items-center ">
<span>Afficher</span>
</label>
<span class="flex flex-row items-center gap-2">
<template x-if="selected && selected.type === 'leading-icon'">
<img :src="selected.image" :alt="selected.name">
</template>
<span x-text="selected ? selected.name : ''">
</span>
</span>
<span class="transition-all transform flex items-center" :class="{'rotate-180' : show}">
<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">
<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> </span>
</button>
<div class="dropdown-content relative w-full overflow-auto max-h-screen-40" x-show="show" x-transition x-cloak @click.outside="show = false" x-anchor.bottom-start.offset.0="$refs.selectButton">
<template x-for="option in options">
<div>
<template x-if="option.type === 'group'">
<div class="item-category text-brand-700 font-bold">
<div class="dropdown-item-category p-2">
<span class="flex-1" x-text="option.name"></span>
</div>
</div>
</template>
<template x-if="option.type !== 'group'">
<div @click="select(option.id)" :class="option.checked ? 'selected' : ''">
<template x-if="option.href">
<div>
<a :href="option.href" class="dropdown-item cursor-pointer p-2">
<template x-if="option.image">
<img :src="option.image" :alt="option.name">
</template>
<span class="flex-1" x-text="option.name"></span>
<template x-if="option.checked">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M21 2H3C2.4 2 2 2.4 2 3V21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21V3C22 2.4 21.6 2 21 2ZM17.7 9.3L10.9 16.1C10.5 16.5 9.9 16.5 9.5 16.1L6.3 12.9C5.9 12.5 5.9 11.9 6.3 11.5C6.7 11.1 7.3 11.1 7.7 11.5L10.2 14L16.3 7.9C16.7 7.5 17.3 7.5 17.7 7.9C18.1 8.3 18.1 8.9 17.7 9.3Z" fill="#34A5C3" />
</svg>
</template>
</a>
</div>
</template>
<template x-if="!option.href">
<div class="dropdown-item cursor-pointer p-2">
<template x-if="option.image">
<img :src="option.image" :alt="option.name">
</template>
<span class="flex-1" x-text="option.name"></span>
<template x-if="option.checked">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M21 2H3C2.4 2 2 2.4 2 3V21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21V3C22 2.4 21.6 2 21 2ZM17.7 9.3L10.9 16.1C10.5 16.5 9.9 16.5 9.5 16.1L6.3 12.9C5.9 12.5 5.9 11.9 6.3 11.5C6.7 11.1 7.3 11.1 7.7 11.5L10.2 14L16.3 7.9C16.7 7.5 17.3 7.5 17.7 7.9C18.1 8.3 18.1 8.9 17.7 9.3Z" fill="#34A5C3" />
</svg>
</template>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
<select class="sr-only " id="limiterOptions" id="limiter">
<option value="" selected disabled hidden></option>
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
</div>
</div>
<script>
function selectlimiterOptions() {
return {
rawOptions: [{
"value": "10",
"text": "10",
"selected": true
}, {
"value": "20",
"text": "20"
}, {
"value": "50",
"text": "50"
}],
options: [],
show: false,
selected: null,
init() {
Array.from(this.rawOptions).forEach(option => {
if (!option.disabled) {
this.options.push({
id: option.value,
name: option.text,
checked: option.selected,
image: option.image,
href: option.href,
type: option.type,
})
}
if (option.selected && option.value) {
this.select(option.value);
}
});
},
openSelect() {
this.show = !this.show;
},
select(id) {
this.options = this.options.map(option => {
if (option.id === id) {
option.checked = true;
this.selected = option;
} else {
option.checked = false;
}
return option;
});
document.getElementById('limiterOptions').value = this.selected.id;
this.show = false;
}
}
}
</script>
</div>
</div>
</div>
</div>
<div class="flex justify-between items-center">
<button type="button" class=" btn btn-dark btn-simple btn-size-sm btn-icons">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 13L5.5 8L10.5 3" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> Retour
</button>
<button type="button" class=" btn btn-dark btn-solid btn-size-lg">
Ajouter une nouvelle adresse
</button>
</div>
</div>
<div class="flex flex-col justify-center gap-y-8">
<div class="md:hidden">
{% render "@account-action-bar" with {
primary_button: null
} %}
</div>
<div class="flex flex-col gap-y-4">
<h2 class="h5">Mes adresses par défaut</h2>
<div class="flex flex-col md:flex-row gutter-half">
{% render "@address-card" with {
title: "Adresse de facturation",
link: {
label: "Modifier l'adresse de facturation",
}
} %}
{% render "@address-card" with {
title: "Adresse de livraison",
link: {
label: "Modifier l'adresse de livraison",
}
} %}
</div>
</div>
<div class="flex flex-col gap-4">
<h2 class="h5">Carnet d'adresses</h2>
{% if address_items %}
<div>
{% render '@address-item-list' with {
address_items: address_items
} %}
{% render '@account-table-pagination' with {
array_size: address_items|length,
label: "adresse",
plural_label: "addresses",
} %}
</div>
{% else %}
<div>
<p class="text-body-base">
Vous n’avez pas d’autres adresse dans votre carnet d’adresses.
</p>
</div>
{% endif %}
</div>
{% render "@account-action-bar" with {
primary_button: {
label: "Ajouter une nouvelle adresse",
}
} %}
</div>
/* No context defined. */
No notes defined.