{% 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">{{ famille.Intitule }}</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="#"> Catégorie {{ famille.Intitule }} </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(artciles_dir ~famille.image) }}" 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 -->

                <div class="category-filter" style="margin-top: 0px;margin-bottom: 0px;">
                    <h4 >Description</h4>
                   {{ famille.description|raw() }}
                </div>
                <!-- 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 art in  articles %}
                            {% if art['famille'] == famille.cbmarq %}
                                <div class="product-layout product-list col-xs-12">
                                    <div class="product-thumb row">
                                        <div class="image">
                                            <a href="{{ path('product',{ 'id': art["idart"] }) }}">
                                                <img class="image_thumb" src="{{ asset(artciles_dir ~ art['image'] ) }}" title="Image Article" alt="Image Article" />
                                                <img class="image_thumb_swap" src="{{ asset(artciles_dir ~ art['image'] ) }}" title="Image Article" alt="Image Article" />
                                            </a>
                                            <div class="button-group" style="top: 3%;">
                                                <button class="btn-cart " type="button" title="Add to Cart" onclick="addtocart({{ art["idart"] }})" >
                                                    <i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">Ajouter au panier</span>
                                                </button>

                                                <button class="btn-quickview" type="button" title="Voir Détails" onclick="location.href='{{ path('product',{ 'id': art['idart'] }) }}'" ><i class="fa fa-eye"></i>
                                                    <span title="Voir Détails">Voir</span>
                                                </button>

                                                <button class="btn-compare">
                                                    <a class="icon zoom" data-lightbox="example-set" href="{{ asset(artciles_dir ~ art['image'] ) }}" title="ZOOM">
                                                        <i class="fa fa-plus"></i> <span class="hidden-xs hidden-sm hidden-md">ZOOM</span></a>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="thumb-description">
                                            <div class="caption">
                                                <h4><a href="#"> {{ art['article'] }}</a></h4>
                                                {#<div class="rating">#}
                                                    {#<span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span>#}
                                                    {#<span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span>#}
                                                    {#<span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span>#}
                                                    {#<span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span>#}
                                                    {#<span class="fa fa-stack"><i class="fa fa-star off fa-stack-2x"></i></span>#}
                                                {#</div>#}
                                                {% if(art['remise']) %}
                                                    <div>
                                                        <label class="text-right">Remise <span class="badge badge-pill badge-secondary" style="border-radius: 5px ;background-color: #789b41;"> {{ art['remise'] }} %</span></label><br>

                                                        <label class="text-right"> <h6> Du  {{ art['debutpromo']|date('d/m/Y')  }}  Au  {{ art['finpromo']|date('d/m/Y') }} </h6></label>
                                                    </div>
                                                {% else %} <div class="text-right"> <label >&nbsp;</label></div>
                                                {% endif %}

                                                <div class="price">
                                                    {{ (art['ttc'])|localizedcurrency('TND')  }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>

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

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

{% endblock %}

{#{% block menu %}#}

{#{% endblock %}#}