{% 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="mt-4 p-6 border border-gray-100 rounded-md dark:border-gray-600"
          hx-get="{% url 'web:user_info_component' %}" hx-trigger="load"
      >

      </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 %}