{% extends '@SyliusShop/layout.html.twig' %}

{% form_theme form '@SyliusUi/Form/theme.html.twig' %}

{% import '@SyliusUi/Macro/messages.html.twig' as messages %}
{% import '@SyliusUi/Macro/pagination.html.twig' as pagination %}

{% block content %}
    {% include '@SyliusShop/Product/Index/_header.html.twig' %}

    {{ form_start(form, {'method': 'GET', 'attr': {'class': 'needs-validation'}}) }}
    <div class="row">
        <div class="col-md-3">
            <div id="filters-vertical" class="list-group">
                <div class="list-group-item active">
                    {{ 'bitbag_sylius_elasticsearch_plugin.ui.filter_results'|trans }}
                </div>
                {% include '@BitBagSyliusElasticsearchPlugin/Shop/Product/Index/_filterForm.html.twig' %}
            </div>
        </div>
        <div class="col-md-9">
            <div class="card mb-4">
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            {% include '@BitBagSyliusElasticsearchPlugin/Shop/Product/Index/_sorting.html.twig' %}
                        </div>
                        <div class="col-md-6 text-end">
                            {% include '@BitBagSyliusElasticsearchPlugin/Shop/Product/Index/_pagination.html.twig' %}
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="input-group">
                            {{ form_widget(form.name, {'attr': {'placeholder': 'sylius.ui.search', 'class': 'form-control'}}) }}
                            <span class="input-group-text"><i class="bi bi-search"></i></span> <!-- Utilise une icône Bootstrap -->
                        </div>
                    </div>
                </div>
            </div>

            {% if products|length > 0 %}
                <div class="row" id="products">
                    {% for product in products %}
                        <div class="col-md-4 mb-4">
                            {% include '@SyliusShop/Product/_box.html.twig' %}
                        </div>
                    {% endfor %}
                </div>
                <div class="d-flex justify-content-center mt-4">
                    {{ pagination.simple(products) }}
                </div>
            {% else %}
                <div class="alert alert-info">
                    {{ messages.info('sylius.ui.no_results_to_display') }}
                </div>
            {% endif %}
        </div>
    </div>
    {{ form_end(form, {'render_rest': false}) }}
{% endblock %}