{% extends 'base.html.twig' %}
{% block body_class %}product-product-42{% endblock %}

{% block body %}
    <div class="header-content-title">
        <div style="background-image: url('{{ asset('bundles/frontend/') }}image/catalog/demo/banners/parallax.jpg'); background-position: 50% 78.1106%;" data-source-url="{{ asset('bundles/frontend/') }}image/catalog/demo/banners/parallax.jpg" class="parallex">
        </div>
    </div>

    <div id="product-category" class="container product-category">
        <div class="page-title-wrapper">
            <div class="container">
                <h1 class="page-title">Nos points de vente</h1>
                <ul class="breadcrumb">
                    <li><a href="{{ path('homepage') }}"><i class="fa fa-home"></i> Acceuil</a></li>
                    {#<li><a href="{{ path('homepage') }}"> Catégories </a></li>#}
                    <li><a href="#"> </a></li>
                </ul>
            </div>
        </div>

        {#<ul class="breadcrumb">#}
            {#<li><a href="{{ path('home') }}"><i class="fa fa-home"></i>Acceuil</a></li>#}
            {#<li><a href="#">{{ famille.Intitule }} </a></li>#}
        {#</ul>#}
        {#| {{ famille.code }}#}
        <div class="row">
            <aside id="column-left" class="col-sm-3 hidden-xs">

                <div class="panel panel-default category-treeview">
                    <div class="swiper-viewport">
                        <div id="banner0" class="swiper-container swiper-container-horizontal swiper-container-fade">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide swiper-slide-active" style="width: 263px; opacity: 1; transform: translate3d(0px, 0px, 0px);">
                                    <a href="#">
                                        <img src="{{ asset(imagepath ~ societe.logo2) }}" alt="Left-Banner" class="img-responsive">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <script type="text/javascript"><!--
                    $('#banner0').swiper({
                        effect: 'fade',
                        autoplay: 2500,
                        autoplayDisableOnInteraction: false
                    });
                    -->
                </script>

                <div class="panel panel-default category-treeview">
                    <div class="panel-heading">Categories</div>
                    {%  for cat in categories_articles %}
                        <li><a href="{{ path('famille',{'id': cat.cbmarq }) }}"  >{{ cat.Intitule }}</a></li>
                    {% endfor %}
                </div>
            </aside>
            <div id="content" class="col-sm-9">
                <!-- Category Description START -->


                <!-- Category Description END -->
                <!-- Category filter START -->
                <div class="category-filter">
                    <!-- Grid-List Buttons -->
                    <div class="col-md-2 filter-grid-list">
                        <div class="btn-group">
                            <button type="button" id="grid-view" class="btn btn-default" data-toggle="tooltip" title="Grid"><i class="fa fa-th"></i></button>
                            <button type="button" id="list-view" class="btn btn-default" data-toggle="tooltip" title="List"><i class="fa fa-th-list"></i></button>
                        </div>
                    </div>
                    <!-- Show Products Selection -->
                </div>
                <!-- Category filter END -->
                <!-- Category products START -->
                <div class="category-products">
                    <div class="row">
                        {%  for p in  pv %}
                            {% if p.visibilite == 1 %}

                                <div class="product-layout product-list col-xs-12">
                                    <div class="product-thumb row">
                                        <div class="image">

                                                <img class="image_thumb" src="{{ asset(imagepath ~ p.image ) }}" title="Image Article" alt="Image Article" />
                                                <img class="image_thumb_swap" src="{{ asset(imagepath ~ p.image ) }}" title="Image Article" alt="Image Article" />


                                        </div>

                                        <div class="thumb-description">
                                            <div class="caption">
                                                <h2>{{ p.nom }}</h2>



                                                <div class="price">

                                                     {{ p.telephone }}<br>
                                                     {{ p.adresse }}

                                                </div>
                                                <a href="https://www.google.com/maps/{{ p.maps }}" style="width: auto ; padding: 10px 18px!important;"><strong>Google Maps</strong></a>

                                            </div>

                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>

                <!-- Category products END -->
                <!-- Category pagination START -->

                <!-- Category pagination END -->
            </div>
        </div>
    </div>

{% endblock %}

{#{% block menu %}#}

{#{% endblock %}#}