feat: debounce name search added

shop/templates/components/products/list_filters.html

@@ -0,0 +1,34 @@
+<section class="bg-gray-50 dark:bg-gray-900 flex items-center my-4">
+  <div class="max-w-screen-xl px-4 mx-auto lg:px-12 w-full">
+    <div class="relative bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
+      <div class="flex flex-col items-center justify-between p-4 space-y-3 md:flex-row md:space-y-0 md:space-x-4">
+        <div class="w-full md:w-full">
+          <form class="flex items-center"
+                hx-get="{% url 'shop:list_products' %}"
+                hx-target="#products"
+                hx-trigger="keyup changed delay:500ms"
+                hx-swap="innerHTML"
+          >
+            <label for="simple-search" class="sr-only">Buscar</label>
+            <div class="relative w-full">
+              <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
+                     viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd"
+                        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                        clip-rule="evenodd"/>
+                </svg>
+              </div>
+              <input
+                type="text"
+                name="name"
+                class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                placeholder="Buscar"
+                autocomplete="off">
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>