{% extends 'theme/base.html' %}
{% load i18n %}
{% block main %}
  {% include 'components/generic/navbar.html' %}
  <section class="bg-white py-8 antialiased dark:bg-gray-900 md:py-8">
    <div class="mx-auto max-w-screen-lg px-4 2xl:px-0">
      <h2
        class="mb-4 text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl md:mb-6"
      >
        {% translate 'Mi cuenta' %}
      </h2>
      <div class="md:grid md:grid-cols-2 md:gap-4">
        <section
          class="p-6 border border-gray-100 rounded-md dark:border-gray-600"

        >
          <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl md:mb-6">
            {% translate 'Datos de usuario' %}
          </h2>
          <div hx-get="{% url 'web:user_info_component' %}" hx-trigger="load, updated_user_info">
            <div class="flex justify-center items-center">
              {% include 'components/generic/spinner.html' %}
            </div>
          </div>
        </section>

        <section
          class="p-6 border border-gray-100 rounded-md dark:border-gray-600 mt-4 md:mt-0"
        >
          <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl md:mb-6">
            {% translate 'Contraseña' %}
          </h2>
          <div hx-get="{% url 'web:change_password_component' %}" hx-trigger="load, changed_password">
            <div class="flex justify-center items-center">
              {% include 'components/generic/spinner.html' %}
            </div>
          </div>
        </section>
      </div>

      <div class="mt-4 p-6 border border-gray-100 rounded-md dark:border-gray-600">
        <div class="flex space-x-4">
          <div>
            <h3 class="flex items-center text-xl font-bold leading-none text-gray-900 dark:text-white sm:text-2xl">
              {% translate 'Mis direcciones' %}
            </h3>
          </div>

        </div>
        <hr class="h-px my-2 bg-gray-200 border-0 dark:bg-gray-700">

        {% if customer_addresses.count == 0 %}
          <span class="text-gray-500 dark:text-gray-400">{% translate 'No hay ninguna dirección' %}</span>
        {% endif %}

        <div hx-get="{% url 'web:list_customer_addresses_component' %}" hx-trigger="load, updated_addresses">

        </div>
      </div>
    </div>

  </section>
{% endblock %}