{% load i18n %}
{% load static %}

<ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 mb-8">
  {% for product in page %}
    <li>
      {% include 'components/product_card.html' %}
    </li>
  {% empty %}
    <li class="col-span-full text-center py-16 text-base-content/60">
      {% translate 'No se han encontrado productos.' %}
    </li>
  {% endfor %}
</ul>

<div class="flex justify-center items-center gap-2 pb-4">
  {% if has_previous_page %}
    <button type="button"
            class="btn btn-outline btn-sm"
            hx-get="{% url 'web:list_products' %}{% querystring page=page.previous_page_number %}"
            hx-trigger="click"
            hx-target="#products"
            hx-swap="innerHTML"
    >
      {% translate 'Anterior' %}
    </button>
  {% endif %}
  <span class="text-sm text-base-content/60 px-2">
    {% blocktranslate %}Página {{ current_page }} de {{ num_pages }}{% endblocktranslate %}
  </span>
  {% if has_next_page %}
    <button type="button"
      class="btn btn-outline btn-sm"
      hx-get="{% url 'web:list_products' %}{% querystring page=page.next_page_number %}"
      hx-trigger="click"
      hx-target="#products"
      hx-swap="innerHTML"
    >
      {% translate 'Siguiente' %}
    </button>
  {% endif %}
</div>