{# Reusable search input with debounced HTMX search — no Alpine #}
{# Parameters: endpoint, target (CSS selector), placeholder (optional) #}
{% set placeholder = placeholder | default('Search...') %}
{% set target = target | default('#' + (table.table_id or 'dt-table') + '-body' if table else '#search-results') %}
<div data-dz-search class="form-control">
  <div class="relative">
    <input type="text"
           name="search"
           data-dz-search-input
           placeholder="{{ placeholder }}"
           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/hidden by dz.js on input event #}
    <button data-dz-search-clear
            type="button"
            style="display:none;"
            class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-xs btn-circle">
      &times;
    </button>
  </div>
  {% if not table %}
  <span class="htmx-indicator loading loading-spinner loading-xs mt-1"></span>
  {% endif %}
</div>