{% sw_extends '@Storefront/storefront/element/cms-element-sidebar-filter.html.twig' %}
{% set pluginConfig = config('AcrisFilterCS.config') %}
{% block element_sidebar_filter %}
{% if pluginConfig.mobileLayout == "standard" %}
{{ parent() }}
{% elseif pluginConfig.mobileLayout == "dropDown" %}
{% block element_sidebar_filter_dropdown %}
{% set config = element.fieldConfig.elements %}
{% set slot = page.cmsPage.firstElementOfType('product-listing') %}
{% block element_product_listing_filter_dropdown_mobile %}
<div class="cms-element-sidebar-filter acris-filter-mobile">
{% block element_product_listing_filter_dropdown_mobile_button %}
<button class="btn header-actions-btn filter-panel-wrapper-toggle dropdown"
type="button"
id="drop-down-filter-menu-button"
data-toggle="collapse"
data-target="#collapseFilterMenu"
aria-expanded="false"
aria-controls="collapseFilterMenu"
aria-label="{{ "general.menuLink"|trans }}">
{% block element_product_listing_filter_dropdown_mobile_button_icon %}
{% sw_icon 'sliders-horizontal' %}
{% endblock %}
{{ "listing.filterTitleText"|trans }}
{% block component_filter_dropdown_mobile_button_multi_select_toggle_icon %}
{% sw_icon 'arrow-medium-down' style {
'pack': 'solid', 'size': 'xs', 'class': 'filter-panel-item-toggle'
} %}
{% endblock %}
</button>
{% endblock %}
{% block element_product_listing_filter_dropdown_mobile_menu %}
<div class="collapse" id="collapseFilterMenu">
<div id="filter-panel-wrapper" class="filter-panel-wrapper acris-filter-panel"
data-offcanvas-filter-content="true">
{% sw_include '@Storefront/storefront/component/listing/filter-panel.html.twig' with {
listing: slot.data.listing,
sidebar: block.sectionPosition == 'sidebar'
} %}
</div>
</div>
{% endblock %}
</div>
{% endblock %}
{% endblock %}
{% endif %}
{% block element_product_listing_filter_active_filters %}
{% if pluginConfig.showActiveFilter %}
<div class="acris-filter-mobile">
<div class="filter-panel-active-container acris-active-filter">
{% block component_filter_panel_active_container_inner %}{% endblock %}
</div>
</div>
{% endif %}
{% endblock %}
{% endblock %}