{% extends '@SyliusShop/layout.html.twig' %}
{% import '@SyliusUi/Macro/pagination.html.twig' as pagination %}

{% block content %}
    {% include '@MonsieurBizSyliusSearchPlugin/Search/_header.html.twig' %}

        <div class="ui stackable grid mbiz-sylius-search-grid">
            <div class="ui dimmer" style="border-radius: 20px; background-color: rgba(0,0,0,.6);">
                <div class="ui massive text loader">
                    <h3>{{ 'monsieurbiz_searchplugin.filters.loading' | trans }}</h3>
                </div>
            </div>
            <div class="four wide column">
                {% include '@MonsieurBizSyliusSearchPlugin/Search/_sidebar.html.twig' %}
            </div>
            <div class="twelve wide column">
                {% if resultSet.totalHits == 0 %}
                    <div class="ui very padded center aligned secondary segment">
                        <div class="ui centered grid">
                            <div class="sixteen wide tablet twelve wide computer center aligned column">
                                <p>
                                    {{ 'monsieurbiz_searchplugin.search.result.no_result'|trans }}
                                </p>
                            </div>
                        </div>
                    </div>
                {% else %}
                    {% include '@MonsieurBizSyliusSearchPlugin/Search/_pagination.html.twig' %}
                    {% include '@MonsieurBizSyliusSearchPlugin/Search/_sorting.html.twig' %}
                    <div class="ui clearing hidden divider"></div>

                    <div class="ui three cards" id="products">
                        {% for result in resultSet.results %}
                            {% include '@MonsieurBizSyliusSearchPlugin/Search/_box.html.twig' with {'result': result} %}
                        {% endfor %}
                    </div>

                    <div class="ui hidden divider"></div>

                    {{ pagination.simple(resultSet.pager) }}
                {% endif %}
            </div>
        </div>
{% endblock %}
