{% comment %}
  Renders a main-search-style2.

  Usage:
  {% render 'main-search-style2' %}
{% endcomment %}

<div class='main-search-style2'>
  {%- case section.settings.filter_style -%}
    {%- when 'toggleSidebar' -%}
      <div
        class='
          main-search-style2__header{% if section.settings.enable_filtering == false %}
            main-search-style2__header--end
          {% endif %}
        '
        aria-labelledby='verticalTitle'
      >
        {% if section.settings.enable_filtering %}
          <div class='main-search-style2__trigger' id='main-search-style2__trigger-toggle'>
            {% render 'icon', name: 'filter2', icon_size: '20' %}
            <div class='main-search-style2__trigger-text'>Filter</div>
          </div>
        {% endif %}
        {% render 'main-search-mobile' %}
        {% render 'facets', results: search, enable_sorting: section.settings.enable_sorting, columns_desktop: section.settings.columns_desktop %}
      </div>
      <div class='main-search-style2__grid' id='main-search-style2__toggle'>
        {% if section.settings.enable_filtering %}
          <div class='main-search-style2__sidebar' aria-labelledby='verticalTitle'>
            {% for filter in search.filters %}
              {% render 'filters-fieldset', type: 'block', filter: filter %}
            {% endfor %}
          </div>
        {% endif %}
        <div class='main-search-style2__content-wrap'>
          {% render 'filters-search-content',
            items_per_page: section.settings.items_per_page,
            columns_mobile: section.settings.columns_mobile,
            columns_desktop: section.settings.columns_desktop
          %}
        </div>
      </div>
    {%- when 'drawer' -%}
      <div
        class='
          main-search-style2__header {% if section.settings.enable_filtering == false %}
            main-search-style2__header--end
          {% endif %}
        '
        aria-labelledby='verticalTitle'
      >
        {% if section.settings.enable_filtering %}
          <xo-modal-trigger xo-name='search-modal' class='main-search-style2__trigger'>
            {% render 'icon', name: 'filter2', icon_size: '20' %}
            <div class='main-search-style2__trigger-text'>Filter</div>
          </xo-modal-trigger>
          <xo-modal xo-portal xo-name='search-modal' xo-animate='slide-right' xo-placement='top-left' style='z-index:999'>
            <div class='main-search-style2__modal-wrap'>
              <xo-modal-trigger class='main-search-style2__modal-close'>
                <button aria-label='{{ 'accessibility.close' | t }}'>{% render 'icon', name: 'close2', icon_size: '15' %}</button>
              </xo-modal-trigger>
              <div class='main-search-style2__modal'>
                {% for filter in search.filters %}
                  {% render 'filters-fieldset', type: 'block', filter: filter %}
                {% endfor %}
              </div>
            </div>
          </xo-modal>
        {% endif %}
        {% render 'main-search-mobile' %}
        {% render 'facets', results: search, enable_sorting: section.settings.enable_sorting, columns_desktop: section.settings.columns_desktop %}
      </div>
      {% render 'filters-search-content',
        items_per_page: section.settings.items_per_page,
        columns_mobile: section.settings.columns_mobile,
        columns_desktop: section.settings.columns_desktop
      %}
    {%- when 'dropdown' -%}
      <div
        class='
          main-search-style2__header {% if section.settings.enable_filtering == false %}
            main-search-style2__header--end
          {% endif %}
        '
        aria-labelledby='verticalTitle'
      >
        {% if section.settings.enable_filtering %}
          <xo-collapse-trigger xo-name='search-collapse' class='main-search-style2__trigger'>
            {% render 'icon', name: 'filter2', icon_size: '20' %}
            <div class='main-search-style2__trigger-text'>Filter</div>
          </xo-collapse-trigger>
        {% endif %}
        {% render 'main-search-mobile' %}
        {% render 'facets', results: search, enable_sorting: section.settings.enable_sorting, columns_desktop: section.settings.columns_desktop %}
      </div>
      {% if section.settings.enable_filtering %}
        <xo-collapse xo-name='search-collapse'>
          <xo-grid style='--xs: 2; --lg: 3' class='main-search-style2__collapse-wrap'>
            {% for filter in search.filters %}
              <div class='main-search-style2__collapse'>
                {% render 'filters-fieldset', type: 'block', filter: filter, style: 'scroll' %}
              </div>
            {% endfor %}
          </xo-grid>
        </xo-collapse>
      {% endif %}
      {% render 'filters-search-content',
        items_per_page: section.settings.items_per_page,
        columns_mobile: section.settings.columns_mobile,
        columns_desktop: section.settings.columns_desktop
      %}
  {%- endcase -%}
</div>
