{{ template "headersDATAMIX.html" . }}

<div class="max-w-4xl mx-auto py-8 space-y-6">
	<!-- Onglets -->
	<nav class="flex border-b">
		<a
			href="/edit/{{ .UID }}/address?t=billing"
			up-target=".addresses"
			up-swap="outerHTML"
			up-active-class="border-red-600 text-gray-900"
			class="px-4 py-2 -mb-px font-semibold text-gray-600 border-b-2 border-transparent hover:text-gray-900"
		>
			Facturation
		</a>
		<a
			href="/edit/{{ .UID }}/address?t=shipping"
			up-target=".addresses"
			up-swap="outerHTML"
			up-active-class="border-red-600 text-gray-900"
			class="px-4 py-2 ml-4 font-semibold text-gray-600 border-b-2 border-transparent hover:text-gray-900"
		>
			Livraison
		</a>
	</nav>
  
	<!-- Conteneur des adresses -->
	<div class="addresses space-y-4">
	  <!-- Exemple : adresse existante -->
	  <form
		class="address-card bg-white p-6 rounded shadow-sm grid grid-cols-1 md:grid-cols-2 gap-4"
		method="PUT"
		action="/api/addresses/123"
		up-target=".address-card[data-id='123']"
		up-swap="outerHTML"
		up-submit="change"
	  >
		<input type="hidden" name="type" value="billing" />
  
		<!-- Ligne 1 -->
		<div>
		  <label class="block text-xs font-medium text-gray-600">Libellé</label>
		  <input
			name="label"
			value="Siège social"
			class="mt-1 w-full border rounded px-3 py-2 text-sm"
		  />
		</div>
		<div>
		  <label class="block text-xs font-medium text-gray-600">Pays</label>
		  <select
			name="country"
			class="mt-1 w-full border rounded px-3 py-2 text-sm"
		  >
			<option value="FR" selected>France</option>
			<option value="DE">Allemagne</option>
			<!-- … -->
		  </select>
		</div>
  
		<!-- Ligne 2 -->
		<div>
		  <label class="block text-xs font-medium text-gray-600">Adresse</label>
		  <input
			name="street"
			value="17 rue de la vanne"
			class="mt-1 w-full border rounded px-3 py-2 text-sm"
		  />
		</div>
		<div class="flex space-x-4">
		  <div class="flex-1">
			<label class="block text-xs font-medium text-gray-600">Code postal</label>
			<input
			  name="postal"
			  value="92120"
			  class="mt-1 w-full border rounded px-3 py-2 text-sm"
			/>
		  </div>
		  <div class="flex-1">
			<label class="block text-xs font-medium text-gray-600">Ville</label>
			<input
			  name="city"
			  value="Montrouge"
			  class="mt-1 w-full border rounded px-3 py-2 text-sm"
			/>
		  </div>
		</div>
  
		<!-- Actions -->
		<div class="md:col-span-2 flex justify-end items-center space-x-2">
		  <button
			class="px-2 py-1 text-red-600 hover:underline text-sm"
			up-delete="/api/addresses/123"
			up-target=".address-card[data-id='123']"
			up-swap="outerHTML"
		  >🗑 Supprimer</button>
		</div>
	  </form>
  
	  <!-- Bouton Ajouter une adresse -->
	  <button
		class="w-full py-3 bg-black text-white rounded hover:bg-gray-800"
		up-get="/account/addresses/new?type=billing"
		up-target=".addresses"
	  >+ Ajouter une adresse</button>
	</div>
  </div>
  

{{ template "footer.html" . }}