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

{% set definition = grid.definition %}
{% set data = grid.data %}

{% set path = path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) %}
{% set criteria = app.request.query.get('criteria') %}

{% if definition.enabledFilters|length > 0 %}
    <div class="ui hidden divider"></div>
    <div class="ui styled fluid accordion">
        <div class="title {% if criteria is not null %}active{% endif %}">
            <i class="dropdown icon"></i>
            {{ 'sylius.ui.filters'|trans }}
        </div>
        <div class="content {% if criteria is not null %}active{% endif %}">
            <form method="get" action="{{ path }}" class="ui loadable form" novalidate>
                <div class="sylius-filters">
                    {% for filter in definition.enabledFilters|filter(filter => filter.enabled)|sort_by('position') %}
                        <div class="sylius-filters__field">
                            {{ sylius_grid_render_filter(grid, filter) }}
                        </div>
                    {% endfor %}
                </div>
                {{ buttons.filter() }}
                {{ buttons.resetFilters(path) }}
            </form>
        </div>
    </div>
{% endif %}

<div class="ui hidden divider"></div>
<div class="sylius-grid-wrapper">
    <div class="sylius-grid-nav">
        {% if data|length > 0 and definition.actionGroups.bulk is defined and definition.getEnabledActions('bulk')|length > 0 %}
            <div class="sylius-grid-nav__bulk">
                {% for action in definition.getEnabledActions('bulk') %}
                    {{ sylius_grid_render_bulk_action(grid, action, null) }}
                {% endfor %}
            </div>
        {% endif %}
        <div class="sylius-grid-nav__pagination">
            {{ pagination.simple(data) }}
        </div>
        {% if definition.limits|length > 1 and data|length > min(definition.limits) %}
            <div class="sylius-grid-nav__perpage">
                <div class="ui fluid one menu sylius-paginate">
                    {{ pagination.perPage(data, definition.limits) }}
                </div>
            </div>
        {% endif %}
    </div>

    {% if data|length > 0 %}
        <div class="ui segment spaceless sylius-grid-table-wrapper">
            <table class="ui sortable stackable very basic celled table" {{ sylius_test_html_attribute('grid-table') }}>
                <thead>
                <tr>
                    {{ table.headers(grid, definition, app.request.attributes) }}
                </tr>
                </thead>
                <tbody {{ sylius_test_html_attribute('grid-table-body') }}>
                {% for row in data %}
                    {{ table.row(grid, definition, row) }}
                {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        {{ messages.info('sylius.ui.no_results_to_display') }}
    {% endif %}
    {{ pagination.simple(data) }}
</div>
