{# Shared search input macros for filter UIs #}

{% macro search_mobile(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 %}

{% macro search_desktop(current_local_href, search, search_count, hx_select) -%}
  <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 %}