{#
/**
 * @file
 * FlowDrop Search Toolbar Component
 *
 * Search input with optional view toggle.
 *
 * Available variables:
 * - placeholder: Input placeholder text (default: "Search...")
 * - name: Input name attribute (default: "search")
 * - value: Current search value
 * - show_view_toggle: Whether to show list/grid toggle
 * - current_view: Current view mode (list, grid)
 * - view_toggle_param: URL parameter for view mode
 */
#}

{% set placeholder = placeholder|default('Search...') %}
{% set name = name|default('search') %}
{% set current_view = current_view|default('list') %}

<div class="fd-search-toolbar">
  <div class="fd-search-toolbar__search">
    <svg class="fd-search-toolbar__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
    </svg>
    <input
      type="search"
      name="{{ name }}"
      class="fd-search-toolbar__input"
      placeholder="{{ placeholder }}"
      {% if value %}value="{{ value }}"{% endif %}
      autocomplete="off"
    >
  </div>
  
  {% if show_view_toggle %}
    <div class="fd-search-toolbar__views" role="group" aria-label="View options">
      <button
        type="button"
        class="fd-search-toolbar__view-btn{% if current_view == 'list' %} fd-search-toolbar__view-btn--active{% endif %}"
        aria-pressed="{{ current_view == 'list' ? 'true' : 'false' }}"
        data-view="list"
        title="List view"
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10zm0 5.25a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
        </svg>
        <span class="fd-sr-only">List view</span>
      </button>
      <button
        type="button"
        class="fd-search-toolbar__view-btn{% if current_view == 'grid' %} fd-search-toolbar__view-btn--active{% endif %}"
        aria-pressed="{{ current_view == 'grid' ? 'true' : 'false' }}"
        data-view="grid"
        title="Grid view"
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M4.25 2A2.25 2.25 0 002 4.25v2.5A2.25 2.25 0 004.25 9h2.5A2.25 2.25 0 009 6.75v-2.5A2.25 2.25 0 006.75 2h-2.5zm0 9A2.25 2.25 0 002 13.25v2.5A2.25 2.25 0 004.25 18h2.5A2.25 2.25 0 009 15.75v-2.5A2.25 2.25 0 006.75 11h-2.5zm9-9A2.25 2.25 0 0011 4.25v2.5A2.25 2.25 0 0013.25 9h2.5A2.25 2.25 0 0018 6.75v-2.5A2.25 2.25 0 0015.75 2h-2.5zm0 9A2.25 2.25 0 0011 13.25v2.5A2.25 2.25 0 0013.25 18h2.5A2.25 2.25 0 0018 15.75v-2.5A2.25 2.25 0 0015.75 11h-2.5z" clip-rule="evenodd" />
        </svg>
        <span class="fd-sr-only">Grid view</span>
      </button>
    </div>
  {% endif %}
</div>


