{% extends "::layout.html.twig" %}

{% set pageMainTabs = "shopping" %}


{% block container %}
    <div class="row">
        <h3 style="background-color:#99cc33;text-transform:uppercase;color:#fff;padding:3px;">{{ pagination.getTotalItemCount }} produit{% if pagination.getTotalItemCount > 1 %}s{% endif %} pour : <span>{{ search }}</span></h3>
        <div class="navigation" style="text-align:center;">
            {{ knp_pagination_render(pagination) }}
        </div>
        <div>
            {% for product in pagination %}
            <div class="row" style="margin-top:25px;border-bottom:1px solid #d0d0d0;">
                <div class="col-md-2">
                    {% if product.images %}
                    <img src="http://{{ picthost }}/{{ (product.images|first).webPath }}" alt="" height="100%" width="100%"/>
                    {% endif %}
                </div>
                <div class="col-md-8">
                    <h4>{{ product.titre }}</h4>
                    <h6>par <a href="/boutique/{{ product.boutique.slug }}.html">{{ product.boutique.nom }}</a></h6>
                    <p style="font-weight:normal;color:#888;">{{ product.description[:300]|replace({'<script>':'[script]', '</script>':'[/script]'})|raw }} ...</p>
                </div>
                <div class="col-md-2">
                    <p>
                        {% if product.material.prixWithPromo < product.material.prix %}
                            <h5 style="color:#666;text-decoration:line-through;">{{ product.material.prix }}€</h5>
                            <h3>{{ product.material.prixWithPromo }}€</h3>
                        {% else %}
                            <h3>{{ product.material.prix }}€</h3>
                        {% endif %}
                    </p>
                    <a class="btn btn-green" href="{{ url('you_product_page', {'boutique':product.boutique.slug, 'produit':product.slug}) }}">
                        <i class="icon icon-search icon-white"></i>
                        Voir produit
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
        {# display navigation #}
        <div class="navigation" style="text-align:center;">
            {{ knp_pagination_render(pagination) }}
        </div>

        <h3>{{ boutiques|length }} boutique{% if boutiques|length > 1 %}s{% endif %} pour : <span>{{ search }}</span></h3>
        {% import 'YOUBoutiqueBundle:Category:vignettes.html.twig' as vignette %}
            <ul id="listArticleEqualize" class="thumbnails listvignettes">
            {% for boutique in boutiques %}
                {{ vignette.boutique(boutique,true,12) }}
            {% endfor %}
            </ul>

    </div>
{% endblock %}
{% block append_javascript %}
    <script>


        function setMaxHeightListeVignette(){
            maxheight = 0;
            $('#listArticleEqualize li').each(function(){

                if(maxheight < $(this).height()){
                    maxheight = $(this).height();
                }

            });
            if(maxheight > 200){
                $('#listArticleEqualize li').animate({height:maxheight},0);
            }
        }

        setMaxHeightListeVignette();
        setTimeout(setMaxHeightListeVignette,250);
        setTimeout(setMaxHeightListeVignette,500);
        setTimeout(setMaxHeightListeVignette,750);
        setTimeout(setMaxHeightListeVignette,1000);
        setTimeout(setMaxHeightListeVignette,1500);
        setTimeout(setMaxHeightListeVignette,2000);
        setTimeout(setMaxHeightListeVignette,2500);


        var protectLinkActionState = false;
        function protectLinkAction(val){
            if(val == false){
                setTimeout(function(){protectLinkAction(false);},50);
            }
            protectLinkActionState = val;
        }

        function linkAction(link){
            if(!protectLinkActionState){
                document.location.href = link;
            }
        }

        $('#numberItemProduct').on('change',function(){
            document.location.href = '?limit='+$(this).val();
        });
        $('#sortItemProduct').on('change',function(){
            document.location.href = '?sortBy='+$(this).val();
        });
    </script>
{% endblock %}