{# Reusable search input.
   Contract: ~/.claude/skills/ux-architect/components/search-input.md
   Parameters: endpoint, target (CSS selector), placeholder (optional), table

   v0.62 CSS refactor: inline Tailwind → semantic .dz-search-* classes
   (components/fragments.css). #}
{% set placeholder = placeholder | default('Search ' + (table.entity_name|default("") | replace("_", " ") |lower) + '...' if table else 'Search...') %}
{% set target = target | default('#' + (table.table_id or 'dt-table') + '-body' if table else '#search-results') %}
{% set search_id = 'dz-search-' + (table.table_id or 'search') if table else 'dz-search' %}
<div x-data="{ query: '' }" class="dz-search-input-wrap">

  <label for="{{ search_id }}" class="visually-hidden">
    {{ 'Search ' + table.title if table else 'Search' }}
  </label>

  {# Search icon #}
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
       class="dz-search-input-icon"
       aria-hidden="true">
    <circle cx="11" cy="11" r="8"></circle>
    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
  </svg>

  <input type="search"
         id="{{ search_id }}"
         name="search"
         x-model="query"
         placeholder="{{ placeholder }}"
         aria-label="{{ 'Search ' + table.title if table else 'Search' }}"
         class="dz-search-input"
         hx-get="{{ endpoint }}"
         hx-target="{{ target }}"
         hx-trigger="keyup changed delay:300ms"
         hx-swap="innerHTML"
         hx-include="closest [data-dazzle-table]"
         hx-headers='{"Accept": "text/html"}'
         hx-indicator="{% if table %}#{{ table.table_id or 'dt-table' }}-loading-sr{% else %}next .dz-search-indicator{% endif %}" />

  {# Clear button — shown when query is non-empty #}
  <button x-show="query.length > 0"
          x-cloak
          @click="query = ''; $el.previousElementSibling.value = ''; htmx.trigger($el.previousElementSibling, 'keyup')"
          type="button"
          aria-label="Clear search"
          class="dz-search-clear">
    <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
         aria-hidden="true">
      <line x1="18" y1="6" x2="6" y2="18"></line>
      <line x1="6" y1="6" x2="18" y2="18"></line>
    </svg>
  </button>

  {% if not table %}
  <span class="dz-search-indicator visually-hidden" aria-live="polite">Searching…</span>
  {% endif %}

</div>