
    <div    class="zoneArticle {% if parametrage['MODE_AFFICHAGE_ARTICLE'] == 'V2' %}ligneArticle{% elseif parametrage['MODE_AFFICHAGE_ARTICLE'] == 'V1' %}listeArticle{% else %}caseArticle{% endif %}" 
    {# <div    class="zoneArticle {% if parametrage['MODE_AFFICHAGE_ARTICLE'] != 'V3' %}ligneArticle{% else %}caseArticle{% endif %}"  #}
            id="divArticle{{article.ROW_COMPTEUR}}" 
            data-rowcompteur="{{article.ROW_COMPTEUR}}" 
            data-idligne="{{article.idLigne}}"
    >

        <p  class="design {% if article.DES_COMP %}white-tooltip{% endif %}" 
            id="design{{article.ROW_COMPTEUR}}" 
            {% if article.PUNCHOUT  == '' and post.tabSearch %}
                onClick="dynamicTab('ART', '{{ path('RechercheArticles.Articles.fiche', {table:post.tabSearch, rowCompteur: article.ROW_COMPTEUR}) }}');"
            {% endif %}
        >
            <span class="infos_tooltip designTooltip" style="text-align: left;">
                {{ article.DES_COMP }}
            </span>
            {{ article.DES_ART }}   
        </p>
        <div class="img">
            <img src="{% if article.IMGART %}{{ article.IMGART }}{% else %}{{ baseUrl('IconeV2/Misc/image_default.png') }}{% endif %}" onerror="this.onerror=null; this.src='{{ baseUrl('IconeV2/Misc/image_default.png') }}'">
        </div>
        <div class="qte">
            <div class="priceQte">
                <span class="price" 
                    id="price{{article.ROW_COMPTEUR}}" 
                    data-pricesave="{% if article.price == 0 and ACTIVER_LIBELLE_PRIX_0 == 'O' %}{{ textNonDispo }}{% else %}{{ article.priceSave }} {{ article.DEVISE }}{% endif %}"
                >
                    {% if article.price == 0 and ACTIVER_LIBELLE_PRIX_0 == 'O' %}
                        {{ textNonDispo }}
                    {% else %}
                        {{ article.price }} {{ article.DEVISE }}
                    {% endif %}
                </span>
                {% if article.PUNCHOUT  == '' %}
                    <span 
                        id="unite{{article.ROW_COMPTEUR}}" 
                        data-unitesave="{{ article.uniteSave }}" 
                        class="unite {% if article.condition %}cond white-tooltip link-tooltip{% endif %}" 
                        {% if article.condition %}{{ generateDataTooltips('top', article.unite ) }}{% endif %}
                    >
                        {{ article.unite }}
                    </span>
                {% endif %}
            </div>
            <div class="articlePourPanier">
                {% if article.PRIXDEGRESSIF %}
                    <span class="white-tooltip tooltipsDegressif">
                        <span class="infos_tooltip left">
                            <table>
                                <thead>
                                    <tr>
                                        <td>{{ traductionText['QteTrad'] }}</td>
                                        <td>{{ traductionText['PuTrad'] }}</td>
                                    </tr>
                                </thead>
                                <tbody class="noHover">
                                    {% for px in article.PRIXDEGRESSIF_VAL %}
                                        <tr>
                                            <td class="montant" style="padding-right:10px;">{{ px.QTETRANCHE }}</td>
                                            <td class="montant">{{ px.PRIXNET }} {{ article.DEVISE }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </span>
                        <span style="margin-top: 3px;margin-right: 5px;" class="degressif"></span>
                    </span>
                {% endif %}
                {% if contexte == 'AO' %}
                    <a class="buttonAddCard" onClick="addDocument(this,'{{ path('RechercheArticles.RechercheArticles.addRemove', {table:article.TABLE, rowCompteur:article.ROW_COMPTEUR, contexte:contexte, idContexte:idContexte}) }}');">{{ traductionText['AjoutConsultatonTrad'] }}</a>
                {% elseif contexte == 'CDE' %}
                    <a class="buttonAddCard" onClick="addDocument(this,'{{ path('RechercheArticles.RechercheArticles.addRemove', {table:article.TABLE, rowCompteur:article.ROW_COMPTEUR, contexte:contexte, idContexte:idContexte}) }}');">{{ traductionText['AjoutCdeTrad'] }}</a>
                {% elseif contexte == 'DA' %}
                    <a class="buttonAddCard" onClick="addDocument(this,'{{ path('RechercheArticles.RechercheArticles.addRemove', {table:article.TABLE, rowCompteur:article.ROW_COMPTEUR, contexte:contexte, idContexte:idContexte}) }}');">{{ traductionText['AjoutDaTrad'] }}</a>
                {% else %}
                    <a class="buttonAddCard" id="buttonAddCard{{article.ROW_COMPTEUR}}" {% if article.CC_exist == false %}style="display:none;"{% endif %} href="{{ path('RechercheArticles.Articles.createEdit', {table:article.TABLE, rowCompteur:article.ROW_COMPTEUR}) }}">{{ traductionText['AjoutAuPanierTrad'] }}</a>
                    {% if article.PUNCHOUT %}
                        <span class="punchout white-tooltip" onClick="generatePunchOut('{{ path('RechercheArticles.Punchout.generatePath', {'idCat' : article.PUNCHOUT}) }}');" id="punchout{{article.ROW_COMPTEUR}}" {% if article.PUNCHOUT == false %}style="display:none;"{% endif %}>
                            <span class="infos_tooltip left">
                                    {{ traductionText['cetArticlesPunchout'] }}
                            </span>
                        </span>
                    {% endif %}
                    <div class="divQtePanier" id="divQtePanier{{article.ROW_COMPTEUR}}" {% if article.CC_exist or article.PUNCHOUT %}style="display:none;"{% endif %}>
                        <input class="form-control qteArticle" data-oldvalue="{{ article.qte }}" onFocus="$('#article_{{ article.ROW_COMPTEUR }}').select(); " data-onchange-echo-delta="300" data-onchange-echo="qteChange('{{ path('RechercheArticles.RechercheArticles.addRemove', {table:article.TABLE, rowCompteur:article.ROW_COMPTEUR, contexte:contexte}) }}', 'article_{{ article.ROW_COMPTEUR }}', {% if article.TABLE == 'HISTO' %}true{% else %}false{% endif %});" type="text" id="article_{{ article.ROW_COMPTEUR }}" value="{{ article.qte }}">
                        <a class="ajouter_blanc_v2 button_v2" onClick="addRemoveArticle('add', this);"></a>
                        <a class="moins_blanc_v2 button_v2 secondaire" onClick="addRemoveArticle('remove', this);"></a>
                    </div>
                {% endif %}
            </div>
        </div>
        <div class="clearfix details">
            <hr style="margin:15px 0px 15px 0px">                                        
            <ul class="list dataWrapper">
                <li style="margin-bottom:5px;">
                    <div>{{traductionText['FournisseurTrad']}} :</div><div style="position: relative;">
                        {% if article.FRAISPORT.ARTFRPORT %}
                            <span class="white-tooltip tooltipsFraisPort" style="position: absolute; left: -30px;top:-5px">
                                <span class="infos_tooltip right">
                                        <ul class="dataWrapper">
                                            <li><div>{{traductionText['FraisDePortTrad']}} :</div><div>{{ article.FRAISPORT.PRXPLBAS |prixUnitaire  }}</div></li>
                                            <li><div>{{traductionText['MiniFrancoTrad']}} :</div><div> {{ article.FRAISPORT.MNTMINFRA |prixUnitaire  }} {{ article.FRAISPORT.DEVISE }}</div></li>
                                            {% if article.FRAISPORT.FRPOBLIG | boolSql %}<li class="articleFraisPort"><div>{{traductionText['PortObligatoireTrad']}}</div></li>{% endif %}
                                        </ul>
                                </span>
                                <span style="float:left;margin-top: 2px;margin-right: 5px;"class="icon-postage"></span>
                            </span>
                        {% endif %} 
                        <div class="ref white-tooltip tooltip-overflow" style="font-weight:bold;"
                            {% if post.tabSearch and article.COD_FOURN != getConst('fournisseurStock') and article.COD_FOURN != '' %}
                                onClick="dynamicTab('FOURN', '{{ path('RechercheArticles.fournisseur.fiche', {idFourn:article.COD_FOURN}) }}');"
                            {% endif %}
                        >
                            <span class="infos_tooltip top" style="left: 0!important">
                                    {{ article.RS_FOURN }} {% if article.COD_FOURN != getConst('fournisseurStock') %}({{ article.COD_FOURN }}){% endif %}
                            </span>
                            {{ article.RS_FOURN }}
                        </div>
                    </div>
                </li>
                <li style="position: relative;">
                    <div class="libRef">
                        {{traductionText['refFourTrad']}} :
                    </div>
                    <div class="ref {% if article.REF_FOURN | length > 20 %} white-tooltip tooltip-overflow {% endif %}" onClick="filtreByRef('{{ article.REF_FOURN }}');">
                            <span class="infos_tooltip top" style="">
                                {{ article.REF_FOURN }}
                            </span>
                        {{ article.REF_FOURN }}
                    </div>
                </li>
                <li  style="position: relative;">
                    <div class="libRef">
                        {{traductionText['refFabTrad']}} :
                    </div>
                    <div class="ref {% if article.REF_FAB | length > 20 %} white-tooltip tooltip-overflow {% endif %}" OnClick="filtreByRef('{{ article.REF_FAB }}');">
                            <span class="infos_tooltip top" style="">
                                {{ article.REF_FAB }}
                            </span>
                        {{ article.REF_FAB }}
                    </div>
                </li>
                <li>
                    <div class="libRef">
                        {{traductionText['refArtTrad']}} :
                    </div>
                    <div class="ref" onClick="filtreByRef('{{ article.COD_ART }}');">
                        {{ article.COD_ART }}
                    </div>
                </li>
            </ul>
        </div>

        {% if article.RAYON1 %}
            <div class="clearfix divRayon" style="font-style:italic;width:100px;white-space: nowrap;">
                <p id="showRayon" style="cursor:pointer;" onClick="if($('#rayon{{article.ROW_COMPTEUR}}').is(':visible')){$('#rayon{{article.ROW_COMPTEUR}}').hide();}else{$('#rayon{{article.ROW_COMPTEUR}}').show();}">{{'Voir les rayons'|trad}}</p>
                <span id="rayon{{article.ROW_COMPTEUR}}" class="infos_tooltip bottom-right" style="text-align: left;">
                    <span class="link" data-niv='1' data-idRayon='{{ article.RAYON1 }}' style="color:#{{ libelleRayon[article.RAYON1].RAYCOULEUR }};">
                        {{ libelleRayon[article.RAYON1].LIBRAYON }}
                    </span>
                    {% if article.RAYON2 %}</br>{% endif %}
                    {% if article.RAYON2 %}
                        <span class="link" data-niv='2' data-idRayon='{{ article.RAYON2 }}' style="color:#{{ libelleRayon[article.RAYON2].RAYCOULEUR }};margin-left:5px;">
                            {{ libelleRayon[article.RAYON2].LIBRAYON }}
                        </span>
                        {% if article.RAYON3 %}</br>{% endif %}
                    {% endif %}
                    {% if article.RAYON3 %}
                        <span class="link" data-niv='3' data-idRayon='{{ article.RAYON3 }}' style="color:#{{ libelleRayon[article.RAYON3].RAYCOULEUR }};margin-left:10px;">
                            {{ libelleRayon[article.RAYON3].LIBRAYON }}
                        </span>
                        {% if article.RAYON4 %}</br>{% endif %}
                    {% endif %}
                    {% if article.RAYON4 %}
                        <span class="link" data-niv='4' data-idRayon='{{ article.RAYON4 }}' style="color:#{{ libelleRayon[article.RAYON4].RAYCOULEUR }};margin-left:15px;">
                            {{ libelleRayon[article.RAYON4].LIBRAYON }}
                        </span>
                        {% if article.RAYON5 %}</br>{% endif %}
                    {% endif %}
                    {% if article.RAYON5 %}
                        <span class="link" data-niv='5' data-idRayon='{{ article.RAYON5 }}' style="color:#{{ libelleRayon[article.RAYON5].RAYCOULEUR }};margin-left:20px;">
                            {{ libelleRayon[article.RAYON5].LIBRAYON }}
                        </span>
                    {% endif %}
                </span>
            </div>
        {% endif %}
        <div class="clearfix footer">
            {% if article.COD_ACD != '' %}
                <span class="icon-contrat white-tooltip">
                    <span class="infos_tooltip top">
                        {{ 'Accord-cadre' | trad }} : {{ article.LIB_ACD }} ({{ article.COD_ACD }})
                    </span>
                </span>
            {% endif %}
            {% if article.LSTSITSTK != '' %}
                <span class=" white-tooltip tooltipsStock {% if article.STOCK_DISPO > 0 %}icon-storage green{% else %}icon-storage{% endif %}" >
                    <span class="infos_tooltip top">
                        <p id="libStock">{{ traductionText['articleStockTrad'] }}</p>
                        <p id="valueStock">{{ traductionText['qteDispo'] }} {{ article.STOCK_DISPO | qte }}</p>
                    </span>
                </span>
            {% endif %}
            {% if article.ARTASSOCIE %}
                <span class="icon-art-associated white-tooltip">
                    <span class="infos_tooltip top">
                            {{ traductionText['presenceArticleAsso'] }}
                    </span>
                </span>
            {% endif %}
            {% if article.FICHTECH %}
                <span class="icon-fiche-tech white-tooltip">
                    <span class="infos_tooltip top">
                            {{ traductionText['presFichTecTrad'] }}
                    </span>
                </span>
            {% endif %}

            {% if rechercheActive %}
                <input 
                    onClick="checkCompare(this);" 
                    style="float:right;margin-top: 2px;" 
                    type="checkbox" 
                    {% if articleCompare[article.ROW_COMPTEUR] %}checked{% endif %} 
                    id="compare{{article.ROW_COMPTEUR}}" 
                    name="compare{{article.ROW_COMPTEUR}}" 
                    class="checkbox checkCompare white-tooltip link-tooltip" 
                    {{ generateDataTooltips('top', traductionText['Comparer']) }}
                />
                {% if parametrage.RECHERCHE_PAR_FAVORI %}
                    <span 
                        id="fav{{article.ROW_COMPTEUR}}" 
                        class=" white-tooltip link-tooltip {% if article.FAVORIS %}artFav{% else %}artNoFav{% endif %}" 
                        style="float:right;cursor:pointer;margin-top: -2px;" 
                        onClick="gestFavoris('{{ path('RechercheArticles.RechercheArticles.favoris', {table: post.tabSearch, 'rowCompteur': article.ROW_COMPTEUR}) }}', '{{ article.ROW_COMPTEUR }}');" 
                        {{ generateDataTooltips('top', traductionText['AjouterAvosFavoris']) }}
                    >
                    </span>
                {% endif %}
            {% endif %}

            {% for carac in article.CARACT %}
                <span class="white-tooltip" style="float:right;">
                    <span class="infos_tooltip top">
                        {{ carac.libelle }}
                    </span>
                    <img src="{{ carac.img }}" class="white-tooltip" style="width:18px;height:18px;"></img>
                </span>
            {% endfor %}
        </div>
    </div>