{% load i18n %}
{% load static %}
<ul class="mb-4 grid gap-4 sm:grid-cols-2 md:mb-8 lg:grid-cols-3 xl:grid-cols-4">
  {% for product in page %}
    <li>
      {% include 'components/product_card.html' %}
    </li>
  {% endfor %}
</ul>

{% if has_previous_page %}
<button type="button"
  class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900
    hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4
    focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700
    dark:hover:text-white dark:focus:ring-gray-700"
  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 %}
{% if has_next_page %}
<button type="button"
  class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900
    hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4
    focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700
    dark:hover:text-white dark:focus:ring-gray-700"
  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 %}