{% set HEADER_SEARCH_DEFAULTS = {
  className: ''
} %}

{% macro HeaderSearch(settings = {}) %}
  {% set settings = merge(HEADER_SEARCH_DEFAULTS, settings) %}

  <div class="header-search {{ settings.className }}" x-bind="search">
    <button type="button" title="Search" class="header-search__trigger header-search__trigger--open" x-bind="searchTrigger">
      <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="33" height="38" viewBox="0 0 33 38">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M28.5934 23.0697C31.505 18.217 31.2656 10.2635 25.2532 5.24688C19.6694 0.583201 11.3126 0.986547 6.1447 6.17962C0.850792 11.4735 1.29195 19.0236 3.78765 22.9563L3.82546 23.0949C5.80438 26.8763 10.4681 30.6072 16.6191 30.3929C21.6483 30.2165 27.2699 26.7754 28.4673 23.221L28.5808 23.0697H28.5934Z" stroke="#19391F" stroke-width="3.7" stroke-miterlimit="10"/>
        <path d="M27.8973 37.0453C28.4524 37.9031 29.5977 38.1485 30.4555 37.5935C31.3133 37.0384 31.5588 35.893 31.0037 35.0352L27.8973 37.0453ZM22.2127 28.2599L27.8973 37.0453L31.0037 35.0352L25.3191 26.2499L22.2127 28.2599Z" fill="#19391F"/>
      </svg>
      <span class="sr-only">Toggle search</span>
    </button>
    <form action="/" class="header-search__form" x-ref="searchForm">
      <div class="header-search__form-wrapper">
        <input type="text" class="header-search__input" placeholder="Suche" name="q">
        <button class="header-search__trigger header-search__trigger--close" type="button" title="Close" x-bind="searchClose">
          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/></svg>
        </button>
      </div>
    </form>
  </div>
{% endmacro %}