{% set PAGE_FILTER_SEARCH = {
  attrs: {}
} %}

{% macro PageFilterSearch(settings = {}) %}
  {% set settings = merge(PAGE_FILTER_SEARCH, settings) %}

  <div class="page-filter-search" x-data="PageFilterSearch({ api: '{{ PATH.media }}/search.json?q=' })"
    {{ Helpers.setAttributes(settings.attrs) }}
  >
    <div class="page-filter-search__input-wrapper">
      <input
        class="page-filter-search__input"
        type="text"
        placeholder="Geben Sie hier den Firmennamen oder Teile davon ein"
        name="q"
        value="Lorem Ipsum"
        x-ref="search"
        x-bind="input"
      >
      <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="33" height="38" viewBox="0 0 33 38" class="page-filter-search__icon">
        <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>
    </div>
    <template x-if="results.length">
      <div class="page-filter-search__results-wrapper" x-bind="resultsWrapper">
        <template x-for="result in results">
          <button type="button" class="page-filter-search__results-item" x-bind="option(result)"></button>
        </template>
      </div>
    </template>
  </div>
{% endmacro %}