{% extends 'base.html.twig' %}

{% block body %}

    <div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
        {% for product in products %}
            {% for product in product %}
            <div class="col-xs-12 col-sm-12 col-md-4">
                <div class="elements">
                <h3>{{ product.name }}</h3>
                <img src="{{ asset('assets/img/' ~ product.picture) }}" alt="{{ product.picture }}" style="width: 100%; height:100%">
                <p>{{ product.description }}</p>
                    <a href="{{ path('basket_add', {'id' : product.id, 'prize': product.prize }) }}"><button class="btn btn-primary" style="width: 49%">Dodaj do koszyka >></button></a>
                {% if is_granted('IS_AUTHENTICATED_FULLY') %}
                    <a href="{{ path('product_show', {'product_id': product.id}) }}"><button class="btn btn-warning" style="width: 49%">Informacje >></button></a>
                {% else %}
                    <a href="{{ path('product_show', {'product_id': product.id}) }}"><button class="btn btn-warning" style="width: 49%">Informacje >></button></a>
                {% endif %}
                </div>
            </div>
            {% endfor %}
        {% endfor %}
        </div>
    </div>

        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
                <li class="page-item">
                    {% for previous in previouses %}
                    <a class="page-link" href="{{ path('products', {'page_id':previous}) }}" tabindex="-1">Previous</a>
                    {% endfor %}
                </li>
                {% for page in pages %}
                   <li class="page-item"><a class="page-link" href="{{ path('products', {'page_id':page}) }}">{{ page }}</a></li>
                {%  endfor %}
                <li class="page-item">
                    {% for next in nextes %}
                    <a class="page-link" href="{{ path('products', {'page_id':next}) }}">Next</a>
                    {% endfor %}
                </li>

            </ul>
        </nav>
    </div>




{% endblock %}