{% set filterItemId = 'filter-' ~ name ~ '-' ~ random() %}
{% if pluginSelector is not defined %}
{% set pluginSelector = 'filter-multi-select' %}
{% endif %}
{% if dataPluginSelectorOptions is not defined %}
{% set dataPluginSelectorOptions = {
name: name,
snippets: {
disabledFilterText: 'listing.disabledFilterTooltip'|trans|sw_sanitize
}
} %}
{% endif %}
{% block component_filter_multi_select %}
{# @deprecated tag:v6.5.0 - Bootstrap v5 removes `btn-block` class, use `d-grid` wrapper instead #}
<div class="filter-multi-select filter-multi-select-{{ name }} filter-panel-item{% if not sidebar %} dropdown{% endif %}{% if feature('v6.5.0.0') %} d-grid{% endif %}"
data-{{ pluginSelector }}="true"
data-{{ pluginSelector }}-options='{{ dataPluginSelectorOptions|json_encode }}'>
{% block component_filter_multi_select_toggle %}
{# @deprecated tag:v6.5.0 - Bootstrap v5 removes `btn-block` class, use `d-grid` wrapper instead #}
<button class="filter-panel-item-toggle btn{% if sidebar and not feature('v6.5.0.0') %} btn-block{% endif %}"
aria-expanded="false"
{% if sidebar %}
{{ dataBsToggleAttr }}="collapse"
{{ dataBsTargetAttr }}="#{{ filterItemId }}"
{% else %}
{{ dataBsToggleAttr }}="dropdown"
data-boundary="viewport"
{{ dataBsOffsetAttr }}="0,8"
aria-haspopup="true"
{% endif %}>
{% block component_filter_multi_select_display_name %}
{{ displayName }}
{% endblock %}
{% block component_filter_multi_select_count %}
<span class="filter-multi-select-count"></span>
{% endblock %}
{% block component_filter_multi_select_toggle_icon %}
{% sw_icon 'arrow-medium-down' style {
'pack': 'solid', 'size': 'xs', 'class': 'filter-panel-item-toggle'
} %}
{% endblock %}
</button>
{% endblock %}
{% block component_filter_multi_select_dropdown %}
<div class="filter-multi-select-dropdown filter-panel-item-dropdown{% if sidebar %} collapse{% else %} dropdown-menu{% endif %}"
id="{{ filterItemId }}">
{% block component_filter_multi_select_list %}
<ul class="filter-multi-select-list">
{% for element in elements %}
{% block component_filter_multi_select_list_item %}
<li class="filter-multi-select-list-item">
{% block component_filter_multi_select_list_item_inner %}
{% sw_include '@Storefront/storefront/component/listing/filter/filter-multi-select-list-item.html.twig' %}
{% endblock %}
</li>
{% endblock %}
{% endfor %}
</ul>
{% endblock %}
</div>
{% endblock %}
</div>
{% endblock %}