{% comment %}
HTMX-driven search input with a paired error region.

Required:
  hx_url       — endpoint to GET on input (e.g. request.path)
  hx_target    — CSS selector for the swap target (e.g. "#call-cards")

Optional:
  placeholder      — input placeholder (default "Search…")
  delay            — debounce in ms (default 350)
  name             — query param name (default "q")
  hx_select        — hx-select fragment (default omitted)
  hx_push_url      — truthy → hx-push-url=true
  error_target_id  — id of the error region (default derived from hx_target)

Usage:
  {% include "components/forms/htmx_search.html" with hx_url=request.path hx_target="#call-cards" placeholder="Search calls…" %}
{% endcomment %}
<div class="search-shell">
  <div class="relative">
    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5" aria-hidden="true">
      <svg class="h-4 w-4 text-ruforum-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35m0 0A7.5 7.5 0 104.5 4.5a7.5 7.5 0 0012.15 12.15z"/>
      </svg>
    </div>
    <input
      type="search"
      name="{{ name|default:'q' }}"
      value="{{ request.GET.q }}"
      placeholder="{{ placeholder|default:'Search…' }}"
      class="!pl-10"
      autocomplete="off"
      hx-get="{{ hx_url }}"
      hx-target="{{ hx_target }}"
      {% if hx_select %}hx-select="{{ hx_select }}"{% endif %}
      hx-trigger="input changed delay:{{ delay|default:350 }}ms, search"
      {% if hx_push_url %}hx-push-url="true"{% endif %}
      hx-indicator="closest .search-shell"
      aria-label="{{ placeholder|default:'Search' }}"
    >
  </div>
  <div
    id="{{ error_target_id|default:'htmx-search-error' }}"
    class="mt-2 hidden rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-800"
    role="alert"
    aria-live="polite"
    data-htmx-error-region
  ></div>
</div>