<td colspan="12">
    <h5>{{ 'Détail Article' | trad }}</h5>
    
    <div class="single row">
        <dl class="dl-info">
            <dt>{{ 'Désignation complémentaire' | trad }}</dt>
            <dd>{{ ligne.DES_COMPL }}</dd>
        </dl>
    </div>
    {% set classColonne = param.AXES_IMPUT_ACTIF ? 'colonne4' : 'colonne3' %}
    <div class="{{ classColonne }}">
        <div class="informations">		
            <p>
                <span class="champs_label">{{ 'Sous Famille' | trad }}</span>
                <span class="resultat">{{ convertLibelleGlobal('SousFamille', '', ligne.SSFAM, true) }}</span>
            </p>			
            <p>
                <span class="champs_label">{{ 'TVA' | trad }}</span>
                <span class="resultat">{{ ligne.TVA | tva }} %</span>
            </p>
            <p>
                <span class="champs_label">{{ 'Fournisseur' | trad }}</span>
                <span class="resultat">
                {%- if ligne.CODE_FOU is not empty -%}
                    {{ ligne.CODE_FOU | fournisseurTrad }} ({{ ligne.CODE_FOU }})
                {%- endif -%}
                </span>
            </p>
            <p>
                <span class="champs_label">{{ 'Accord-cadre' | trad }}</span>
                <span class="resultat">{{ convertLibelleGlobal('AccCadre', '', ligne.ACD, true) }}</span>
            </p>
            <p>
                <span class="champs_label">{{ 'Contrôle qualité' | trad }}</span>
                <span class="resultat">{{ convertLibelleGlobal('Cqualite', '', ligne.CTRL_BR, true) }}</span>
            </p>
        </div>
    </div>
    <div class="{{ classColonne }}">
        <div class="informations">
            {% if param.DA_AFF_REF_ART_FOUR %}
                <p>	
                    <span class="champs_label">{{ 'Réf. Fournisseur' | trad }}</span>
                    <span class="resultat">{{ ligne.REF_FOUR }}</span>
                </p>
            {% endif %}
            <p>	
                <span class="champs_label">{{ 'Fabricant' | trad }}</span>
                <span class="resultat">{{ convertLibelleGlobal('Fabricant', '', ligne.COD_FAB, true) }}</span>
            </p>
            <p>	
                <span class="champs_label">{{ 'Code Gamme' | trad }}</span>
                <span class="resultat">{{ convertLibelleGlobal('gamme', '', ligne.COD_GAM, true) }}</span>
            </p>
            {% if param.DA_AFF_CODE_REF_FAB %}
                <p>	
                    <span class="champs_label">{{ 'Réf. Fabricant' | trad }}</span>
                    <span class="resultat">{{ ligne.REF_FAB }}</span>
                </p>
            {% endif %}
        </div>
    </div>
    {% if param.AXES_IMPUT_ACTIF %}	
    <div class="{{ classColonne }}">
        <div class="informations">
            {% if param.SI_ACTIF %}		
            <p>
                <span class="champs_label">{{ 'Section d\'imputation' | trad }}</span>
                <span class="resultat">{{ convertLibelleGlobal('sectimpu', '', ligne.SECTIMP, true) }}</span>
            </p>
            <p>
                <span class="champs_label">{{ 'Code gestion' | trad }}</span>
                <span class="resultat">{{ ligne.LIBGES }} {% if ligne.CODGES | trim %}({{ ligne.CODGES }}){% endif %}</span>
            </p>
            {% endif %}
            {% if param.CDC_ACTIF %}	
            <p>
                <span class="champs_label">{{ 'Code Complémentaire' | trad }}</span>
                <span class="resultat">{{ convertLibelleGlobal('codecomp', '', ligne.CODE_COMP, true) }}</span>
            </p>
            {% endif %}
            {% if param.SCA_ACTIF %}	
            <p>
                <span class="champs_label">{{ 'Sous compte d\'analyse' | trad }}</span>
                <span class="resultat">{{ convertLibelleGlobal('sscptana', '', ligne.SSCPTEANA, true) }}</span>
            </p> 
            {% endif %} 			
        </div>
    </div>
    {% endif %} 
    <div class="{{ classColonne }} last">
        <div class="informations">		
            <p>	
                <span class="champs_label">{{ 'Centre livraison' | trad }}</span>
                <span class="resultat">
                    {%- if ligne.CentreLiv is not empty -%}
                        {{ ligne.CentreLiv.RAIS_SOC }} ({{ ligne.CTRLIVR }})
                    {%- endif -%}
                </span>
            </p>
            {% if isExpedActive
                and ligne.CentreLiv.TRS_INTER | boolSql
            %}
            <p>	
                <span class="champs_label">{{ 'Mode de transport' | trad }}</span>
                <span class="resultat">{{ ligne.MOD_TRS }}</span>
            </p>
            {% endif %}
            <p>	
                <span class="champs_label">{{ 'Site' | trad }}</span>
                <span class="resultat">{{ convertLibelleGlobal('ssItesto', '', ligne.SITE_STK, true) }}</span>
            </p>
        </div>
    </div>
    {% if param.RECEP_AUTO_ONGLET_ACTIF or param.CS_ACTIF %}
    <div id="subAriane" class="single fullDiv">
        <ul class="nav nav-tabs sous_onglet">  
            <li id="caracCompHide"><a data-toggle="tab" href="#caracCompl{{ ligne.NO_PO }}">{{ 'Carac. compl.' |trad }}</a></li>
            {% if param.RECEP_AUTO_ONGLET_ACTIF %}<li ><a data-toggle="tab" href="#recep{{ ligne.NO_PO }}">{{ 'Réception automatique' | trad }}</a></li>{% endif %}
            {% if param.CS_ACTIF %}<li {% if param.RECEP_AUTO_ONGLET_ACTIF == 0 %}{% endif %}><a data-toggle="tab" href="#supp{{ ligne.NO_PO }}">{{ 'Champs Supplémentaires' | trad }}</a></li>{% endif %}
            {% if (planning | length) > 1 %}<li id="planning"><a data-toggle="tab" href="#planning{{ ligne.NO_PO }}">{{ 'Planning' |trad }}</a></li>{% endif %}
        </ul>
        <script>
            var actif = 0;
            $('#subAriane > ul > li').each(function(index) {
                if ($(this).css('display') != 'none') {
                    if (actif == 0) {
                        $(this).addClass('active');
                        let idOnglet = $(this).find(">:first-child").attr('href');
                        $(idOnglet).addClass('active').removeClass('fade');
                        actif = 1;
                    }
                }
            });
        </script>
        <div class="tab-content">
            {% if param.RECEP_AUTO_ONGLET_ACTIF %}
            <div id="recep{{ ligne.NO_PO }}" class="tab-pane active in clearfix bg_form padding_form border_form">
                <div class="colonne2">
                    <div class="informations">
                        <p>
                            <span class="champs_label">{{ 'Réception automatique' | trad }}</span>
                            <span class="resultat">{{ ligne.RECEP_AUTO | boolTrad  }}</span>
                        </p>
                        <p>
                            <span class="champs_label">{{ 'Début contrat' | trad }}</span>
                            <span class="resultat">{{ ligne.DATEDEBCONT | dateTrad }}</span>
                        </p>
                        <p>
                            <span class="champs_label">{{ 'Fin contrat' | trad }}</span>
                            <span class="resultat">{{ ligne.DATEFINCONT | dateTrad }}</span>
                        </p>
                    </div>
                </div>
                <div class="colonne2 last">
                    <div class="informations">
                        <p>
                            <span class="champs_label">{{ 'Période' | trad }}</span>
                            <span class="resultat">{{ tabPeriode[ligne.FIN_DEB_PER] }}</span>
                        </p>
                        <p>
                            <span class="champs_label">{{ 'Périodicité' | trad }}</span>
                            <span class="resultat">{{ tabPeriodicite[ligne.CONTRAT_PERIOD] }}</span>
                        </p>
                        <p>
                            <span class="champs_label">{{ 'Jours d\'application' | trad }}</span>
                            <span class="resultat">{{ ligne.DALI_RECEPAUTO_JOUR }}</span>
                        </p>
                    </div>
                </div>
            </div>
            {% endif %}
            <div id="planning{{ ligne.NO_PO }}" class="tab-pane fade clearfix bg_form padding_form border_form">
                <table class="table table-hover">
                    <thead>
                        <th>{{ 'Date' |trad }}</th>
                        <th>{{ 'Quantité' |trad }}</th>
                    </thead>
                    <tbody>
                        {% for date in planning %}
                            <tr>
                                <td>{{ date.DTE_LIV | dateTrad }}</td>
                                <td>{{ date.QTE_DEMAN | number_format(3, '.', '') }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div id="supp{{ ligne.NO_PO }}" class="tab-pane fade clearfix bg_form padding_form border_form">
                {{ VisualisationCS('DA_LIGNE', idForCS) }}
            </div>
            <div id="caracCompl{{ ligne.NO_PO }}" class="tab-pane fade clearfix bg_form padding_form border_form">
                {{ visualisationCC('DA', numDA, ligne.NO_PO, '0', 'caracCompHide') }}
            </div>
        </div>
    </div>
    {% endif %}
</td>