{% macro search(current_local_href,search, search_count, hx_select) -%}
<!-- Search (1/3 width → 4/12 columns) -->
  <!-- nb this does NOT oob itself!! -->
   <div
      id="search-desktop-wrapper"
      class="flex flex-row gap-2 items-center"
    >
    <input
      id="search-desktop"
      type="text"
      name="search"
      aria-label="search"
      class="w-full mx-1 my-3 px-3 py-2 text-md rounded-xl border-2 shadow-sm border-white placeholder-shown:border-white [&: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-desktop", "X-Search":"true"}'
      hx-sync="this:replace"
        
      autocomplete="off"
    >

    <div
        id="search-count-desktop"
        aria-label="search count"
        {% if not search_count %}
          class="text-xl text-red-500"
        {% endif %}
      >
        {% if search %}
          {{search_count}}
        {% endif %}
        {{zap_filter}}
      </div>
  </div>
{% endmacro %}