{% load i18n %}
{% load static %}
{% for address in customer_addresses %}
<form
  id="edit_address_{{ address.pk }}"
  class="hidden py-2 md:py-4"
  hx-post="{% url 'web:update_customer_address' pk=address.pk %}"
  hx-on:htmx:after-request="htmx.toggleClass(htmx.find('#edit_address_{{ address.pk }}'), 'hidden'); htmx.toggleClass(htmx.find('#details_address_{{ address.pk }}'), 'hidden')"
  hx-swap="none"
>
    {% csrf_token %}
    <div class="mb-4 grid gap-4 sm:grid-cols-2 sm:gap-8 lg:gap-16">
        <div class="space-y-4">
            <dl>
                <dt class="font-semibold  ">
                    <label for="address_full_name">
                        {% translate 'Nombre completo' %}
                    </label>
                </dt>
                <dd class="flex items-center gap-1  ">
                    <input class="input" id="address_full_name" name="full_name" type="text" value="{{ address.full_name }}">
                </dd>
            </dl>
            <dl>
                <dt class="font-semibold  ">
                    <label for="address">
                        {% translate 'Dirección' %}
                    </label>
                </dt>
                <dd class="flex items-center gap-1  ">
                    <input class="input" id="address" name="address" type="text" value="{{ address.address }}">
                </dd>
            </dl>
            <dl>
                <dt class="font-semibold  ">
                    <label for="address_zip">
                        {% translate 'Código postal' %}
                    </label>
                </dt>
                <dd class=" ">
                    <input class="input" id="address_zip" name="address_zip" type="text" value="{{ address.address_zip }}">
                </dd>
            </dl>
            <dl>
                <dt class="font-semibold  ">
                    <label for="address_phone">
                        {% translate 'Teléfono' %}
                    </label>
                </dt>
                <dd class=" ">
                    <input class="input" id="address_phone" name="address_phone" type="text" value="{{ address.address_phone }}">
                </dd>
            </dl>
        </div>
        <div class="space-y-4">
            <dl>
                <dt class="font-semibold  ">
                    <label for="address_town">
                        {% translate 'Localidad' %}
                    </label>
                </dt>
                <dd class=" ">
                    <input class="input" id="address_town" name="address_town" type="text" value="{{ address.address_town }}">
                </dd>
            </dl>
            <dl>
                <dt class="font-semibold  ">
                    <label for="address_state">
                        {% translate 'Provincia' %}
                    </label>
                </dt>
                <dd class=" ">
                    <input class="input" id="address_state" name="address_state" type="text" value="{{ address.address_state }}">
                </dd>
            </dl>
        </div>
    </div>


    <div class="flex justify-end">
        <button class="text-white  hover: focus:ring-4 focus:outline-none
                   focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center
                   : :ring-primary-800 cursor-pointer"
        >
            {% translate 'Guardar' %}
        </button>
    </div>

</form>

<div id="details_address_{{ address.pk }}" class="py-2 md:py-4">
    <div class="mb-4 grid gap-4 sm:grid-cols-2 sm:gap-8 lg:gap-16">
        <div class="space-y-4">
            <dl>
                <dt class="font-semibold  ">{% translate 'Nombre completo' %}</dt>
                <dd class="flex items-center gap-1  ">
                    {{ address.full_name }}
                </dd>
            </dl>
            <dl>
                <dt class="font-semibold  ">{% translate 'Dirección' %}</dt>
                <dd class="flex items-center gap-1  ">
                    {{ address.address }}
                </dd>
            </dl>
            <dl>
                <dt class="font-semibold  ">{% translate 'Código postal' %}</dt>
                <dd class=" ">{{ address.address_zip }}</dd>
            </dl>
            <dl>
                <dt class="font-semibold  ">{% translate 'Teléfono' %}</dt>
                <dd class=" ">{{ address.address_phone }}</dd>
            </dl>
        </div>
        <div class="space-y-4">
            <dl>
                <dt class="font-semibold  ">{% translate 'Localidad' %}</dt>
                <dd class=" ">{{ address.address_town }}</dd>
            </dl>
            <dl>
                <dt class="font-semibold  ">{% translate 'Provincia' %}</dt>
                <dd class=" ">{{ address.address_state }}</dd>
            </dl>
        </div>
    </div>
    <div class="flex justify-end">
        <button hx-on:click="htmx.toggleClass(htmx.find('#edit_address_{{ address.pk }}'), 'hidden'); htmx.toggleClass(htmx.find('#details_address_{{ address.pk }}'), 'hidden')"
                type="button"
                data-modal-target="accountInformationModal2" data-modal-toggle="accountInformationModal2"
                class="inline-flex w-full items-center justify-center rounded-lg  px-5 py-2.5 text-sm
                       font-medium text-white hover: focus:outline-none focus:ring-4 focus:ring-primary-300
                        : :ring-primary-800 sm:w-auto cursor-pointer"
        >
            {% include 'components/icons/edit.svg' %}
            {% translate 'Editar datos' %}
        </button>
    </div>
</div>
{% if not forloop.last %}
<hr class="h-px my-2   ">
{% endif %}
{% endfor %}