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

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

{% block content %}
    {% if resources.data|length > 0 %}
        {{ render(path('bitbag_sylius_cms_plugin_shop_section_show', {'code' : app.request.get('sectionCode'), 'template' : '@BitBagSyliusCmsPlugin/Shop/Page/Index/_section.html.twig'})) }}
    {% endif %}
    <div class="ui stackable grid segment">
        <div class="ui sixteen wide column">

            {% if resources.data|length > 0 %}
                <div class="ui one column stackable grid" id="bitbag-pages">
                    {% for page in resources.data %}
                        <div class="item bitbag-page">
                            <a href="{{ path('bitbag_sylius_cms_plugin_shop_page_show', {'slug' : page.slug}) }}">

                                <div class="content">

                                     {% if page.image %}
                                        <img class="ui left floated image" src="{{ page.image.path|imagine_filter(filter|default('sylius_small')) }}" alt="">
                                    {% endif %}

                                    <h3>{{ page.name }}</h3>
                                    <p>
                                        {{ page.content|striptags|length > 200 ? page.content|striptags|slice(0, 200) ~ '...' : page.content|striptags }}
                                    </p>
                                </div>
                            </a>
                        </div>
                    {% endfor %}
                </div>
                <div class="ui hidden divider"></div>

                {{ pagination.simple(resources.data) }}
            {% else %}
                {{ messages.info('sylius.ui.no_results_to_display') }}
            {% endif %}
        </div>
    </div>
{% endblock %}