{# @var productListing \Pimcore\Bundle\EcommerceFrameworkBundle\IndexService\ProductList\ProductListInterface #}
{# @var result Knp\Component\Pager\Pagination\SlidingPagination #}
{# @var item \App\Model\Product\Car #}
{# @var filterService \Pimcore\Bundle\EcommerceFrameworkBundle\FilterService\FilterService #}
{# @var filterDefinition \Pimcore\Model\DataObject\FilterDefinition #}


{% if(category) %}
    <div class="page-header">
        <h1>{{ category.name }}</h1>
    </div>
{% endif %}

<div class="album bg-light">
    <div class="container">

        <div class="row">

            <div class="col-md-3">

                {% if( pimcore_device().isPhone ) %}
                <div id="filter-container" class="card mb-4">
                    <div class="card-header">
                        <a id="filter-head" href="#" class="text-dark text-decoration-none" data-toggle="collapse" data-target="#filter-container-content" aria-expanded="true" aria-controls="filter-container-content">
                            {{ 'filter.title' | trans }}
                        </a>
                    </div>
                    <div id="filter-container-content" class="card-body collapse" aria-labelledby="filter-head" data-parent="#filter-container">
                        {% endif %}

                        <form id="js_filterfield">

                            {% if(filterDefinition.filters|length > 0) %}

                                {% for filter in filterDefinition.filters %}

                                    {% set filterMarkup = filterService.filterFrontend(filter, productListing, currentFilter) %}

                                    {{ filterMarkup | raw  }}

                                {% endfor %}
                            {% endif %}

                        </form>

                        {% if( pimcore_device().isPhone ) %}
                    </div></div>
                {% endif %}

            </div>

            <div class="col-md-9">

                <div class="row">

                    {%  for item in results %}
                        <div class="col-md-4 d-flex align-items-stretch flex-column">
                            {% include 'product/product_teaser.html.twig' with {'product': item} %}
                        </div>

                    {% endfor %}
                </div>

            </div>

        </div>

        <div class="pt-5">

            {% include 'includes/pagination.html.twig' %}

        </div>

    </div>
</div>

{% do pimcore_inline_script().appendScript("

    $('#js_filterfield .custom-checkbox input, #js_filterfield .custom-radio input').on('change', function() {
        $('#js_filterfield').submit();
    });

") %}