{{ attach_library('goizueta_theme/superfilter') }}
<div class="superfilter" id="superfilter-{{ filter.id }}">
  <section class="sticky-container wide">
    <div class="sticky-container__inner">
      <div class="superfilter__filter-section">
        <div class="filter-narrow">
          <div class="filter-narrow__trigger">
            <button class="filter-narrow__trigger-button"
              aria-controls="{{ filter.id ~ '-items-narrow' }}" aria-expanded="false">
              {{ filter.trigger.narrow.label }}
            </button>
          </div>
          {% if filter.inline_filters or filter.display_switcher.narrow %}
            <div class="filter-narrow__extra-options">
              {% if filter.inline_filters %}
                {% for inline_filter in filter.inline_filters %}
                <div class="filter__inline-filter filter-narrow__inline-filter">
                  <input type="checkbox" class="inline-filter-checkbox"
                    id="inline-filter-narrow-{{ inline_filter.key }}" value="{{ inline_filter.key }}"
                    {% if inline_filter.default %}checked{% endif %}/>
                  <label for="inline-filter-narrow-{{ inline_filter.key }}" class="option">
                    {{ inline_filter.value }}
                  </label>
                </div>
                {% endfor %}
              {% endif %}
              {% if filter.display_switcher.narrow %}
                {{ filter.display_switcher.narrow }}
              {% endif %}
            </div>
          {% endif %}
          <div class="filter-narrow__filter-items" id="{{ filter.id ~ '-items-narrow' }}" style="display: none" hidden>
            <div class="filter-narrow__filter-options">
              {% for section in filter.dropdown_sections %}
                <button class="filter-narrow__section-head{% if section.prefilter %} prefilter{% endif %}"
                  aria-controls="{{ filter.id ~ '-narrow-section-' ~ section.key }}" aria-expanded="false">
                  {{ section.title }}
                </button>
                <div class="filter-narrow__section-filters {% if section.prefilter %} prefilter{% endif %}"
                  id="{{ filter.id ~ '-narrow-section-' ~ section.key }}"
                  data-key="{{ section.key }}" style="display: none" hidden>
                  <ul class="superfilter-checkboxes">
                  {% for option in section.options %}
                    <li class="superfilter-checkbox">
                      <input type="checkbox" id="{{ filter.id ~ '-narrow-checkbox-' ~ option.key }}" value="{{ option.key }}"
                        {% if section.prefilter %}
                          disabled
                          {% if option.key in section.prefilter %}checked{% endif %}
                        {% endif %}
                        />
                      <label for="{{ filter.id ~ '-narrow-checkbox-' ~ option.key }}" class="option">
                        {{ option.value }}
                      </label>
                    </li>
                  {% endfor %}
                  </ul>
                </div>
              {% endfor %}
            </div>
            {% if filter.widgets.narrow.inside_bottom %}
              <div class="filter-narrow__inside-bottom">
                {% for widget in filter.widgets.narrow.inside_bottom %}
                  {{ widget }}
                {% endfor %}
              </div>
            {% endif %}
            <div class="filter-narrow__bottom">
              {% if filter.inline_filters %}
                {% for inline_filter in filter.inline_filters %}
                <div class="filter__inline-filter filter-narrow__inline-filter">
                  <input type="checkbox" class="inline-filter-checkbox"
                    id="inline-filter-narrow-bottom-{{ inline_filter.key }}" value="{{ inline_filter.key }}"
                    {% if inline_filter.default %}checked{% endif %}/>
                  <label for="inline-filter-narrow-bottom-{{ inline_filter.key }}" class="option">
                    {{ inline_filter.value }}
                  </label>
                </div>
                {% endfor %}
              {% endif %}
              <div class="filter-narrow__actions">
                <button class="filter-narrow__clear button button--light" type="button">
                  <div class="button--inner">
                    <span class="button__text">
                      {{ "Clear"|t }}
                    </span>
                  </div>
                </button>
                <button class="filter-narrow__apply button button--light" type="button">
                  <div class="button--inner">
                    <span class="button__text">
                      {{ "Apply"|t }}
                    </span>
                  </div>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="filter-wide">
          <div class="filter-wide__trigger">
            <div class="filter-wide__trigger-legend">{{ filter.trigger.wide.label }}:</div>
            {% for section in filter.dropdown_sections %}
              <button class="filter-wide__dropdown-trigger button button--light{% if section.prefilter %} prefilter{% endif %}"
                aria-controls="filter-wide__dropdown" aria-expanded="false"
                {% if section.prefilter %}disabled{% endif %}
                >
                <div class="button--inner">
                  <span class="button__text">
                    {{ section.title }}
                  </span>
                </div>
              </button>
            {% endfor %}
            {% if filter.inline_filters %}
            <div class="filter-wide__inline">
              {% for inline_filter in filter.inline_filters %}
                <div class="filter__inline-filter filter-wide__inline-filter">
                  <input type="checkbox" class="inline-filter-checkbox"
                    id="inline-filter-wide-{{ inline_filter.key }}" value="{{ inline_filter.key }}"
                    {% if inline_filter.default %}checked{% endif %}/>
                  <label for="inline-filter-wide-{{ inline_filter.key }}" class="option">
                    {{ inline_filter.value }}
                  </label>
                </div>
                {% endfor %}
            </div>
          {% endif %}
          {% if filter.display_switcher.wide %}
            <div class="filter-wide__display-switcher">
              {{ filter.display_switcher.wide }}
            </div>
          {% endif %}
          </div>
          <div class="filter-wide__dropdown" style="display: none" hidden>
            <div class="filter-wide__dropdown-inner">
            {% for section in filter.dropdown_sections %}
              <div class="filter-wide__dropdown-section{% if section.prefilter %} prefilter{% endif %}" data-key="{{ section.key }}">
                <div class="section-legend">{{ section.title }}</div>
                <ul class="superfilter-checkboxes">
                {% for option in section.options %}
                  <li class="superfilter-checkbox">
                    <input type="checkbox" id="{{ filter.id ~ '-wide-checkbox-' ~ option.key }}" value="{{ option.key }}"
                      {% if section.prefilter %}
                        disabled
                        {% if option.key in section.prefilter %}checked{% endif %}
                      {% endif %}
                    />
                    <label for="{{ filter.id ~ '-wide-checkbox-' ~ option.key }}" class="option">
                      {{ option.value }}
                    </label>
                  </li>
                {% endfor %}
              </div>
            {% endfor %}
            </div>
            <button class="filter-wide__dropdown-close">
              <span class="sr-only">{{ "Close"|t }}</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
  <div class="superfilter__content-section">
    {% if filter.widgets.narrow.content_top %}
      <div class="filter-narrow__content-top">
        {% for widget in filter.widgets.narrow.content_top %}
          {{ widget }}
        {% endfor %}
      </div>
    {% endif %}
    {% if filter.widgets.wide.content_top %}
      <div class="filter-wide__content-top">
        {% for widget in filter.widgets.wide.content_top %}
          {{ widget }}
        {% endfor %}
      </div>
    {% endif %}
    {{ content }}
  </div>
</div>