{% extends 'theme/base.html' %}

{% load static %}

{% block main %}
  <div>
    {% include 'components/products/list_filters.html' %}
  <section
    class="p-8"
    hx-get="{% url 'shop:list_products' %}{% querystring request.GET %}"
    hx-trigger="load"
    hx-target="#products"
    hx-swap="innerHTML"
  >
    <div>
      <div id="products" class="mb-4 grid gap-4 sm:grid-cols-2 md:mb-8 lg:grid-cols-3 xl:grid-cols-4">
      </div>
      <div class="w-full text-center">
        <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 'shop:list_products' %}{% querystring request.GET %}{% querystring page=9 %}"
                hx-trigger="click"
                hx-target="#products"
                hx-swap="beforeend"
        >
          Mostrar mas
        </button>
      </div>
    </div>
  </section>
  </div>
{% endblock %}