{#
// inputs:
// - products:  object[] - list of product objects (default: [])
// - layout:    string   - one of [grid, grid-with-features, list] (required)
// - grid:      string   - one of [grid-3-sidebar, grid-4-full, grid-5-full] (required)
// - limit:     integer  - number of products per page (default: 16)
// - offcanvas: string   - one of [always, mobile] (default: mobile)
#}

{% set products = products|default([]) %}
{% set limit = limit|default(16) %}
{% set offcanvas = offcanvas|default('mobile') %}
{% set classes = {
    'always': 'view-options--offcanvas--always',
    'mobile': 'view-options--offcanvas--mobile',
}[offcanvas] %}

<div class="products-view">
    <div class="products-view__options">
        <div class="view-options {{ classes }}">
            <div class="view-options__filters-button">
                <button type="button" class="filters-button">
                    <svg class="filters-button__icon" width="16px" height="16px">
                        <use xlink:href="images/sprite.svg#filters-16"></use>
                    </svg>
                    <span class="filters-button__title">Filters</span>
                    <span class="filters-button__counter">3</span>
                </button>
            </div>
            <div class="view-options__layout">
                <div class="layout-switcher">
                    <div class="layout-switcher__list">
                        <button data-layout="{{ grid }}" data-with-features="false" title="Grid" type="button"
                                class="layout-switcher__button {% if layout == 'grid' %} layout-switcher__button--active {% endif %}">
                            <svg width="16px" height="16px">
                                <use xlink:href="images/sprite.svg#layout-grid-16x16"></use>
                            </svg>
                        </button>
                        <button data-layout="{{ grid }}" data-with-features="true" title="Grid With Features" type="button"
                                class="layout-switcher__button {% if layout == 'grid-with-features' %} layout-switcher__button--active {% endif %}">
                            <svg width="16px" height="16px">
                                <use xlink:href="images/sprite.svg#layout-grid-with-details-16x16"></use>
                            </svg>
                        </button>
                        <button data-layout="list" data-with-features="false" title="List" type="button"
                                class="layout-switcher__button {% if layout == 'list' %} layout-switcher__button--active {% endif %}">
                            <svg width="16px" height="16px">
                                <use xlink:href="images/sprite.svg#layout-list-16x16"></use>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
            <div class="view-options__legend">Showing 6 of 98 products</div>
            <div class="view-options__divider"></div>
            <div class="view-options__control">
                <label for="">Sort By</label>
                <div>
                    <select class="form-control form-control-sm" name="" id="">
                        <option value="">Default</option>
                        <option value="">Name (A-Z)</option>
                    </select>
                </div>
            </div>
            <div class="view-options__control">
                <label for="">Show</label>
                <div>
                    <select class="form-control form-control-sm" name="" id="">
                        <option value="">12</option>
                        <option value="">24</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="products-view__list products-list"
         data-layout="{{ layout != 'list' ? grid : layout }}"
         data-with-features="{{ layout == 'grid-with-features' ? 'true' : 'false' }}"
         data-mobile-grid-columns="2"
    >
        <div class="products-list__body">
            {% for product in products|slice(0, limit) %}
                <div class="products-list__item">
                    {% include '/partials/product-card.twig' with {
                        product: product
                    } only %}
                </div>
            {% endfor %}
        </div>
    </div>

    <div class="products-view__pagination">
        {% include '/partials/pagination.twig' %}
    </div>
</div>
