{% load i18n %}
<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 'web:list_products' %}"
                hx-target="#products"
                hx-trigger="keyup changed delay:500ms"
                hx-swap="innerHTML"
                hx-push="true"
          >
            <label for="simple-search" class="sr-only">{% translate 'Buscar' %}</label>
            <div class="relative w-full">
              <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
              {% include 'components/icons/search.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="{% translate 'Buscar' %}"
                autocomplete="off">
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>