{% load i18n %}
<section class="  flex items-center my-4">
  <div class="max-w-screen-xl px-4 mx-auto lg:px-12 w-full">
    <div class="relative  shadow-md  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="input w-full">
              <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <g
                  stroke-linejoin="round"
                  stroke-linecap="round"
                  stroke-width="2.5"
                  fill="none"
                  stroke="currentColor"
                >
                  <circle cx="11" cy="11" r="8"></circle>
                  <path d="m21 21-4.3-4.3"></path>
                </g>
              </svg>
              <input
                type="search"
                name="name"
                id="simple-search"
                placeholder="{% translate 'Buscar' %}"
                autocomplete="off">
            </label>

            {% if filter_by_category %}
              <input type="hidden" name="category" value="{{ category.id }}">
            {% endif %}
          </form>
        </div>
      </div>
    </div>
  </div>
</section>