{% load i18n %}
{# Unified toolbar search — SearchSpec / render_toolbar_search. backend=server reload vs ag_grid Host API. #}
<div
  class="cm-toolbar-search{% if compact %} cm-toolbar-search--compact{% endif %}"
  data-cm-toolbar-search-root
  data-cm-search-backend="{{ backend }}"
  data-cm-search-mode="{{ mode|default:'smart' }}"
  data-cm-search-scope-id="{{ scope_id }}"
  data-cm-pref-grid-id="{{ pref_grid_id }}"
  {% if table_grid_id %}data-cm-table-grid-id="{{ table_grid_id }}"{% endif %}
  {% if saved %}data-cm-saved-searches='{{ saved_searches }}'{% endif %}
>
  <div class="cm-toolbar-search-field" title="{% translate 'search.smart_tooltip' %}">
    <svg class="cm-toolbar-search-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
    <input
      type="search"
      {% if backend == "ag_grid" %}id="ag-quick-filter-{{ scope_id }}"{% else %}id="cm-toolbar-search-{{ scope_id }}"{% endif %}
      name="{{ param }}"
      value="{{ value }}"
      autocomplete="off"
      class="cm-toolbar-search-input"
      title="{% translate 'search.smart_tooltip' %}"
      {% if backend == "ag_grid" %}
      data-cm-grid-search
      data-cm-grid-id="{{ scope_id }}"
      {% if apply_on_enter %}data-cm-grid-search-apply="enter"{% endif %}
      {% endif %}
      data-cm-toolbar-search
      data-cm-search-backend="{{ backend }}"
      data-cm-search-mode="{{ mode|default:'smart' }}"
      placeholder="{% if placeholder %}{{ placeholder }}{% else %}{% translate 'search.smart_placeholder' %}{% endif %}"
    >
    <button
      type="button"
      class="cm-toolbar-search-clear"
      data-cm-toolbar-search-clear
      data-cm-search-scope-id="{{ scope_id }}"
      {% if backend == "ag_grid" %}
      data-cm-grid-action="clearSearch"
      data-cm-grid-id="{{ scope_id }}"
      {% endif %}
      title="{% translate 'search.clear' %}"
      aria-label="{% translate 'search.clear' %}"
    >
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
    </button>
  </div>
  {% if saved %}
  <div class="cm-toolbar-search-saved-actions" role="group" aria-label="{% translate 'search.saved_searches' %}">
    <button
      type="button"
      class="cm-toolbar-search-action cm-toolbar-search-action--save"
      data-cm-grid-action="saveSearch"
      data-cm-grid-id="{{ scope_id }}"
      title="{% translate 'search.save' %}"
      aria-label="{% translate 'search.save' %}"
    >
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
    </button>
    <button
      type="button"
      class="cm-toolbar-search-action cm-toolbar-search-action--load"
      data-cm-grid-action="toggleSavedSearches"
      data-cm-grid-id="{{ scope_id }}"
      id="cm-saved-searches-btn-{{ scope_id }}"
      title="{% translate 'search.load_saved' %}"
      aria-label="{% translate 'search.load_saved' %}"
    >
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
    </button>
  </div>
  <div
    id="cm-saved-searches-dropdown-{{ scope_id }}"
    class="cm-toolbar-search-saved-panel cm-toolbar-search-saved-panel--detached is-hidden"
    data-cm-saved-dropdown-for="{{ scope_id }}"
  >
    <div class="cm-toolbar-search-saved-title">{% translate 'search.saved_searches' %}</div>
    <div id="cm-saved-searches-container-{{ scope_id }}" class="cm-toolbar-search-saved-list"></div>
  </div>
  {% endif %}
</div>