{#
// inputs:
// - offcanvas: string - one of [always, mobile] (default: mobile)
#}

{% set offcanvas = offcanvas|default('mobile') %}
{% set classes = {
    'always': 'widget-filters--offcanvas--always',
    'mobile': 'widget-filters--offcanvas--mobile',
}[offcanvas] %}

<div class="widget-filters widget {{ classes }}" data-collapse data-collapse-opened-class="filter--opened">
    <h4 class="widget-filters__title widget__title">Filters</h4>

    <div class="widget-filters__list">
        {% for filter in filters %}
            <div class="widget-filters__item">

                <div class="filter filter--opened" data-collapse-item>
                    <button type="button" class="filter__title" data-collapse-trigger>
                        {{ filter.title }}
                        <svg class="filter__arrow" width="12px" height="7px"><use xlink:href="images/sprite.svg#arrow-rounded-down-12x7"></use></svg>
                    </button>
                    <div class="filter__body" data-collapse-content>
                        <div class="filter__container">

                            {% if filter.type == 'categories' %}
                                <div class="filter-categories">
                                    <ul class="filter-categories__list">
                                        {% for item in filter.options.items %}
                                            <li class="filter-categories__item filter-categories__item--{{ item.type }}">
                                                {% if item.type == 'parent' %}
                                                    <svg class="filter-categories__arrow" width="6px" height="9px">
                                                        <use xlink:href="images/sprite.svg#arrow-rounded-left-6x9"></use>
                                                    </svg>
                                                {% endif %}
                                                <a href="">{{ item.name }}</a>
                                                <div class="filter-categories__counter">{{ item.count }}</div>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            {% endif %}

                            {% if filter.type == 'categories-alt' %}
                                <div class="filter-categories-alt">
                                    {% include '/partials/filter-categories-alt-list.twig' with {items: filter.options.items} %}
                                </div>
                            {% endif %}

                            {% if filter.type in ['checkbox', 'radio'] %}
                                <div class="filter-list">
                                    <div class="filter-list__list">
                                        {% for item in filter.options.items %}
                                            <label class="filter-list__item {% if item.disabled %} filter-list__item--disabled {% endif %}">

                                                {% if filter.type == 'checkbox' %}
                                                    <span class="filter-list__input input-check">
                                                        <span class="input-check__body">
                                                            <input class="input-check__input" type="checkbox" {% if item.checked %} checked {% endif %} {% if item.disabled %} disabled {% endif %}>
                                                            <span class="input-check__box"></span>
                                                            <svg class="input-check__icon" width="9px" height="7px"><use xlink:href="images/sprite.svg#check-9x7"></use></svg>
                                                        </span>
                                                    </span>
                                                {% endif %}

                                                {% if filter.type == 'radio' %}
                                                    <span class="filter-list__input input-radio">
                                                        <span class="input-radio__body">
                                                            <input class="input-radio__input" name="{{ filter.options.name }}" type="radio" {% if item.checked %} checked {% endif %} {% if item.disabled %} disabled {% endif %}>
                                                            <span class="input-radio__circle"></span>
                                                        </span>
                                                    </span>
                                                {% endif %}

                                                <span class="filter-list__title">
                                                    {{ item.title }}
                                                </span>
                                                {% if item.count %}
                                                    <span class="filter-list__counter">{{ item.count }}</span>
                                                {% endif %}
                                            </label>
                                        {% endfor %}
                                    </div>
                                </div>
                            {% endif %}

                            {% if filter.type == 'color' %}
                                <div class="filter-color">
                                    <div class="filter-color__list">
                                        {% for item in filter.options.items %}
                                            <label class="filter-color__item">
                                                <span class="filter-color__check input-check-color {% if item.white %} input-check-color--white {% endif %} {% if item.light %} input-check-color--light {% endif %}" style="color: {{ item.color }};">
                                                    <label class="input-check-color__body">
                                                        <input class="input-check-color__input" type="checkbox" {% if item.checked %} checked {% endif %} {% if item.disabled %} disabled {% endif %}>
                                                        <span class="input-check-color__box"></span>
                                                        <svg class="input-check-color__icon" width="12px" height="9px"><use xlink:href="images/sprite.svg#check-12x9"></use></svg>
                                                        <span class="input-check-color__stick"></span>
                                                    </label>
                                                </span>
                                            </label>
                                        {% endfor %}
                                    </div>
                                </div>
                            {% endif %}

                            {% if filter.type == 'price' %}
                                <div class="filter-price" data-min="{{ filter.options.min }}" data-max="{{ filter.options.max }}" data-from="{{ filter.options.from }}" data-to="{{ filter.options.to }}">
                                    <div class="filter-price__slider"></div>
                                    <div class="filter-price__title">Price: $<span class="filter-price__min-value"></span> – $<span class="filter-price__max-value"></span></div>
                                </div>
                            {% endif %}

                        </div>
                    </div>
                </div>

            </div>
        {% endfor %}
    </div>

    <div class="widget-filters__actions d-flex">
        <button class="btn btn-primary btn-sm">Filter</button>
        <button class="btn btn-secondary btn-sm">Reset</button>
    </div>
</div>
