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

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

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

{% block content %}
<h1 class="text-center my-4">
    Recherche avancée
</h1>

<div class="row">
    <aside class="col-lg-3">
        <div class="offcanvas-lg offcanvas-start" id="filterSidebar">
            <div class="offcanvas-header py-3">
                <h5 class="offcanvas-title">{{ 'bitbag_sylius_elasticsearch_plugin.ui.filter_results'|trans }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#filterSidebar" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body flex-column pt-2 py-lg-0">
                
                {{ form_start(searchForm, {'attr': {'class': ''}}) }}

                <!-- Champ de recherche textuel -->
                <div class="mb-3">
                    {{ form_row(searchForm.box.query, {'attr': {'placeholder': 'Rechercher des produits...', 'class': 'form-control'}}) }}
                </div>

                <!-- Facettes de recherche -->
                {% if searchForm.facets is defined %}
                    {% for facet in searchForm.facets %}
                        <div class="w-100 border rounded p-3 p-xl-4 mb-3 mb-xl-4">
                            <div class="bitbag-sylius-elasticsearch-plugin-facets-form">
                                {{ form_label(facet) }}
                                {{ form_widget(facet, sylius_test_form_attribute(facet.vars.id)) }}
                            </div>
                        </div>
                    {% endfor %}
                {% endif %}

                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-search"></i> {{ 'bitbag_sylius_elasticsearch_plugin.ui.filter'|trans }}
                    </button>
                </div>

                {{ form_end(searchForm) }}
            </div>
        </div>
    </aside>

    <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>

                {% if results|length > 0 %}
                    <div class="row" id="search_results">
                        {% for product in results %}
                            <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(results) }}
                    </div>
                {% else %}
                    <div class="alert alert-info">
                        {{ messages.info('sylius.ui.no_results_to_display') }}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}