{% extends 'layout.twig' %}

{% block body %}

	<div class="contenu clearfix titre_div"  id="Commande">
	
		<h1>
		    {{ 'Commandes' | trad }}</h1>
		    {{ ariane() }}
		
		<h2>
		    {{ 'Commande'  | trad  }} : {{ commande.NO_CDE }} {% if commande.AVENANT %} - {{ commande.AVENANT }}{% endif %}
		</h2>


        <div class="oversizeTable">
            <table class="table table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th>{{ 'Statut' | trad }}</th>
                        {% for chps in listeChamps %}
                            <th>{{ chps.Libelle }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for ligne in listeLigneErreur %}
                        <tr>
                            <td>
                                {% if ligne.STATUT_ERROR == 'true' %}
                                    <span class="statut enErreur"></span>
                                {% else %}
                                    <span class="statut transferer"></span>
                                {% endif %}
                            </td>
                            {% for chps in listeChamps %}
                                <td {% if ligne[chps.code_bdd]['error'] %}style="color:red;" class=""{% endif %}>
                                    {% if ligne[chps.code_bdd]['error'] %}
                                        <span class="bloquant white-tooltip">
                                        <span class="infos_tooltip designTooltip top{% if loop.index < 5 %}-right{% endif %}" style="text-align: left;">
                                            {{ ligne[chps.code_bdd]['error'] |raw }}
                                        </span>
                                        </span>
                                    {% endif %}
                                    {{ shortLibelle(ligne[chps.code_bdd]['value'], 60) }}
                                </td>
                            {% endfor %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>


    </div>

    <style>
        .table tr td {
            border-left: 1px solid var(--main-color-grey2);
        }
        .table tr td,.table tr th {
            white-space: nowrap;
        }

        #main-content {
            overflow-x: auto;
        }

        .oversizeTable {
            display: block;
            overflow-x: scroll;
        }

        .oversizeTable table {
            margin-top: 30px;
            margin-bottom: 50px;
        }

        .oversizeTable .statut {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>


{% endblock %}