{# Reusable search input with debounced HTMX search — Alpine for clear button #}
{# Parameters: endpoint, target (CSS selector), placeholder (optional) #}
{% set placeholder = placeholder | default('Search ' + (table.entity_name|default("") |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="form-control">
  <label for="{{ search_id }}" class="sr-only">
    {{ 'Search ' + table.title if table else 'Search' }}
  </label>
  <div class="relative">
    <input type="search"
           id="{{ search_id }}"
           name="search"
           x-model="query"
           placeholder="{{ placeholder }}"
           aria-label="{{ 'Search ' + table.title if table else 'Search' }}"
           class="input input-bordered input-sm w-full max-w-xs pr-8"
           hx-get="{{ endpoint }}"
           hx-target="{{ target }}"
           hx-trigger="keyup changed delay:300ms"
           hx-swap="innerHTML"
           hx-include="closest [data-dz-table]"
           hx-headers='{"Accept": "text/html"}'
           hx-indicator="{% if table %}#{{ table.table_id or 'dt-table' }}-loading{% else %}next .htmx-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="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-xs btn-circle">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  {% if not table %}
  <span class="htmx-indicator loading loading-spinner loading-xs mt-1" aria-hidden="true"></span>
  {% endif %}
</div>