{{ attach_library('goizueta_theme/multi-filtered-list') }}

<div class="multi-filter">
  <button class="multi-filter-expand" aria-controls="{{ filter_id }}" aria-expanded="false">{{ filter_title }}</button>
  <div id="{{ filter_id }}" class="multi-filter-main">
    <div class="multi-filter-filters">
      {% for filter in filters %}
        {% if filter.type == 'checkboxes' %}
          <fieldset id="{{ filter.id }}" class="multi-filter-section checkboxes">
            <legend>{{ filter.name }}</legend>
            <div class="checkbox-group">
              {% for option in filter.options %}
                {% set option_id = filter.id ~ '--' ~ option.id %}
                <div class="checkbox-group">
                  <input class="multi-filter-option" id="{{ option_id }}" name="{{ filter.id }}"
                         type="checkbox" value="{{ option_id }}" />
                  <label for="{{ option_id }}">{{ option.name }}</label>
                </div>
              {% endfor %}
            </div>
          </fieldset>
        {% endif %}
      {% endfor %}
    </div>
    {% if use_apply_button %}
    <div class="multi-filter-operations">
      <button class="multi-filter-apply">Apply</button>
    </div>
    {% endif %}
  </div>
  {% if filter_extras %}
  <div class="multi-filter-extras">
    {% if filter_extras.filter_special_widget %}
      {# todo figure out "show unscheduled courses" #}
    {% endif %}
    {% if filter_extras.filter_display_switcher %}
      {# todo figure out list/calendar switcher #}
    {% endif %}
  </div>
  {% endif %}
</div>