{% macro search(current_local_href, search, search_count, hx_select) -%}

    <div
      id="search-mobile-wrapper"
      class="flex flex-row gap-2 items-center flex-1 min-w-0 pr-2"
    >
      <input
        id="search-mobile"
        type="text"
        name="search"
        aria-label="search"
        class="text-base md:text-sm col-span-5 rounded-md px-3 py-2 mb-2 w-full min-w-0 max-w-full border-2 border-stone-200 placeholder-shown:border-stone-200 [&:not(:placeholder-shown)]:border-yellow-200"
        hx-preserve
        value="{{ search|default('', true) }}"
        placeholder="search"
        hx-trigger="input changed delay:300ms"
        hx-target="#main-panel"
              
        hx-select="{{hx_select}}, #search-mobile-wrapper, #search-desktop-wrapper"
        hx-get="{{ (current_local_href ~ {'search': None}|qs)|host }}"
        hx-swap="outerHTML"
        hx-push-url="true"
        hx-headers='{"X-Origin":"search-mobile",  "X-Search":"true"}'
        hx-sync="this:replace"
        autocomplete="off"
      >
      
        <div
          id="search-count-mobile"
          aria-label="search count"
          {% if not search_count %}
            class="text-xl text-red-500"
          {% endif %}
        >
          {% if search %}
            {{search_count}}
          {% endif %}
        </div>
    </div>
{% endmacro %}