{% for cat in categorie %}
    
    {% if cat.id not in [16,34] %}
        {% if section is defined and section == cat | replace({' ': '_'}) %}
            {% set class = "" %}
        {% else %}
            {% set class = 'hide' %}
        {% endif %}


    


        <div id="{{ cat | replace({' ': '_'}) }}" class="{{ class }}">

            <div class="d-flex mt-5 justify-content-between">

                <div class="d-flex">

                    {% if cat.icone != null %}

                        <img src="/img/categorie/{{ cat.icone }}" alt="" width="40" class="me-2">

                    {% endif %}

                    <h2 id="{{ cat.getLibelle() |replace({' ' : '_'}) }}">{{ cat.getLibelle() }}

                        ({{ cat.getComposants()|length }})</h2>

                    <button class="btn btn-success mx-3" data-bs-toggle="modal"
                            data-bs-target="#createComposantModal" data-id="{{ cat.id }}"><img
                                src="/img/plus.svg" alt="plus" width="30"></button>

                </div>

                <div class="d-flex align-items-center">

                    <div>

                        <b>Nombre de

                            {{ cat }}

                            :</b>

                        {{ cat.sumQuantiteCompo() }}</div>
                    <button onclick="ConfirmReset('{{ path('stock.categorie.reset',{id : cat.id}) }}')"
                            class="btn btn-danger mx-3">Reset
                    </button>
                    <div class="d-flex mx-3">

                        <b>Montant du stock :</b>

                        {{ cat.prixStock() }}

                        €
                    </div>

                </div>

            </div>


            <div class="row fw-bold text-center">
                <div class="col"></div>
                <div class="col"></div>
                <div class="col">

                    Image

                </div>

                <div class="col">

                    {% set url = 'arrow-down.svg' %}

                    {% set tmp = 'ASC' %}

                    {% if sort == 'marque' %}

                        {% if order == 'ASC' %}

                            {% set tmp = 'DESC' %}

                            {% set url = 'arrow-down-fill.svg' %}

                        {% else %}

                            {% set tmp = 'ASC' %}

                            {% set url = 'arrow-up-fill.svg' %}

                        {% endif %}


                    {% endif %}


                    <span>Marque</span>
                    {% set catName  = cat.getLibelle() | replace({' ':'_'}) %}
                    <a href="?sort=marque&order={{ tmp }}&section={{ catName }}#{{ catName }}"><img
                                src="/img/{{ url }}" alt="" width="30"></a>


                </div>

                <div class="col">

                    {% set url = 'arrow-down.svg' %}

                    {% if sort == 'model' %}

                        {% if order == 'ASC' %}

                            {% set tmp = 'DESC' %}

                            {% set url = 'arrow-down-fill.svg' %}

                        {% else %}

                            {% set tmp = 'ASC' %}

                            {% set url = 'arrow-up-fill.svg' %}

                        {% endif %}


                    {% endif %}


                    <span>Modele</span>


                    <a href="?sort=model&section={{ catName }}&order={{ tmp }}#{{ cat.getLibelle() | replace({' ':'_'}) }}"><img
                                src="/img/{{ url }}" alt="" width="30"></a>


                </div>

                <div class="col">

                    {% set url = 'arrow-down.svg' %}

                    {% if sort == 'specs' %}

                        {% if order == 'ASC' %}

                            {% set tmp = 'DESC' %}

                            {% set url = 'arrow-down-fill.svg' %}

                        {% else %}

                            {% set tmp = 'ASC' %}

                            {% set url = 'arrow-up-fill.svg' %}

                        {% endif %}


                    {% endif %}


                    <span>Specs</span>

                    <a href="?sort=specs&section={{ catName }}&order={{ tmp }}#{{ cat.getLibelle() | replace({' ':'_'}) }}"><img
                                src="/img/{{ url }}" alt="" width="30"></a>


                </div>


                <div class="col">EAN</div>

                <div class="col">

                    {% set url = 'arrow-down.svg' %}

                    {% if sort == 'prix' %}

                        {% if order == 'ASC' %}

                            {% set tmp = 'DESC' %}

                            {% set url = 'arrow-down-fill.svg' %}

                        {% else %}

                            {% set tmp = 'ASC' %}

                            {% set url = 'arrow-up-fill.svg' %}

                        {% endif %}


                    {% endif %}


                    <span>Prix</span>

                    <a href="?sort=prix&section={{ catName }}&order={{ tmp }}#{{ cat.getLibelle() | replace({' ':'_'}) }}"><img
                                src="/img/{{ url }}" alt=" " width=" 30"></a>


                </div>

                <div class="col">
                    Fiche
                </div>

                <div class="col">

                    {% set url = 'arrow-down.svg' %}

                    {% if sort == 'quantite' %}

                        {% if order == 'ASC' %}

                            {% set tmp = 'DESC' %}

                            {% set url = 'arrow-down-fill.svg' %}

                        {% else %}

                            {% set tmp = 'ASC' %}

                            {% set url = 'arrow-up-fill.svg' %}

                        {% endif %}


                    {% endif %}

                    <span>Quantité</span>

                    <a href="?sort=quantite&section={{ catName }}&order={{ tmp }}#{{ cat.getLibelle() | replace({' ':'_'}) }}"><img
                                src="/img/{{ url }}" alt="" width="30"></a>

                </div>

                <div class="col">Modifier la quantité</div>

            </div>

            <div class="compo_container">

                {% for composant in cat.getComposantsOrderBy(sort | default('quantite'),order | default('DESC')) %}




                    <div class="row border-bottom align-items-center text-center line-compo"
                         id="compo_{{ composant.id }}">


                        <div class="col">
                            <a href="{{ path('composant_edit',{id : composant.id}) }}"
                               class="btn btn-info my-3">Modifier</a>

                            <button class="btn btn-danger"
                                    onclick="ConfirmDeleteCompo('{{ composant.id }}')">
                                Supprimer
                            </button>
                        </div>



                        <div class="col">
                            {% if composant.id in compoCount | keys %}
                                {% set count = compoCount[composant.id] %}
                            {% if count > starColor['yellow'] %}
                                {% set class = 'text-warning' %}
                            {% elseif count > starColor['blue'] %}
                                {% set class = 'text-primary' %}
                                {% elseif count  > starColor['green'] %}
                                    {% set class = 'text-success' %}



                                {% endif %}
                            {% else %}
                                {% set count = '' %}
                                {% set class = 'text-secondary' %}
                            {% endif %}
                            <div class="d-flex justify-content-center align-items-center">
                                <span class="fs-4 mx-2">{{ count | default('') }}</span>
                                <i class="fad fa-star fs-1 {{ class | default('') }}"></i>
                            </div>
                        </div>



                        <div class="col">

                            {% if composant.hasImage() %}

                                <img src="/img/composant/{{ composant.image }}" alt="" width="100"
                                     data-bs-toggle="modal" data-bs-target="#displayImgModal"
                                     data-id="composant/{{ composant.image }}">


                            {% else %}

                                <img src="/img/composant/default.svg" alt="" width="50">


                            {% endif %}

                            <img src="/img/edit.svg" alt="" width="25" data-bs-toggle="modal"
                                 data-bs-target="#editImgCompoModal" data-id="{{ composant.id }}">


                        </div>



                        <div class="col">

                            <div id="marque_{{ composant.id }}">

                                {{ composant.marque }}

                                <button onclick='editMarque("{{ composant.id }}")'
                                        class="btn btn-white">
                                    <img src="{{ asset('img/edit.svg') }}" alt="edit"></button>


                            </div>


                            {% include "stock/component/input.html.twig" with {'id' : 'editMarque_'~composant.id , 'input_value' : composant.marque, 'function' : 'updateMarque("'~composant.id~'","'~path('stock.compo.edit')~'")'} %}


                        </div>



                        <div class="col">


                            <div id="modele_{{ composant.id }}" class="d-flex">

                                {{ composant.model }}

                                <button onclick='editModele("{{ composant.id }}")'
                                        class="btn btn-white">
                                    <img src="{{ asset('img/edit.svg') }}" alt="edit"></button>


                            </div>


                            {% include "stock/component/input.html.twig" with {'id' : 'editModele_'~composant.id , 'input_value' : composant.model, 'function' : 'updateModele("'~composant.id~'","'~path('stock.compo.edit')~'")'} %}


                        </div>



                        <div class="col">

                            <div id="specs_{{ composant.id }}">

                                {{ composant.specs }}

                                <button onclick='editSpecs("{{ composant.id }}")' class="btn btn-white">
                                    <img
                                            src="{{ asset('img/edit.svg') }}" alt="edit"></button>


                            </div>


                            {% include "stock/component/input.html.twig" with {'id' : 'editSpecs_'~composant.id , 'input_value' : composant.specs, 'function' : 'updateSpecs("'~composant.id~'","'~path('stock.compo.edit')~'")'} %}


                        </div>






                        <div class="col">

                            <div id="EAN_{{ composant.id }}">

                                {{ composant.isbn }}

                                <button onclick='editEAN("{{ composant.id }}")' class="btn btn-white">
                                    <img src="img/edit.svg" alt="edit">
                                    </button>


                            </div>

                            {% include "stock/component/input.html.twig" with {'id' : 'editEAN_'~ composant.id , 'input_value' : composant.isbn, 'function' : 'updateEAN("'~composant.id~'","'~path('stock.compo.edit')~'")'} %}



                        </div>



                        <div class="col">

                            <div id="prix_{{ composant.id }}">

                                {{ composant.prix }}

                                <button onclick='editPrix("{{ composant.id }}")' class="btn btn-white">
                                                                        <img src="img/edit.svg" alt="edit">

                                    </button>


                            </div>


                            {% include "stock/component/input.html.twig" with {'id' : 'editPrix_'~composant.id , 'input_value' : composant.prix, 'function' : 'updatePrix("'~composant.id~'","'~path('stock.compo.edit')~'")'} %}


                        </div>


                        <div class="col">

                            {% if composant.hasFiche() %}
                                <a href="{{ composant.getPathFiche() }}" target="_blank" class="mx-2">
                                    <img src="/img/file.svg" alt="fiche" width="30">
                                </a>
                            {% endif %}
                            <img src="/img/edit.svg" alt="" width="25" data-bs-toggle="modal" onclick="sendIdFiche({{ composant.id }})"
                                 data-bs-target="#editFicheCompoModal" data-id="{{ composant.id }}">
                        </div>

                        <div class="col my-4">

                            {% if composant.quantite > limiteQteCompo.value %}

                                {% set warning = 'success text-white' %}

                            {% elseif composant.quantite > 0 %}

                                {% set warning = 'warning' %}

                            {% else %}

                                {% set warning = 'danger text-white' %}

                            {% endif %}


                            <span class="bg-{{ warning }} p-3 rounded" id="qteCompo_{{ composant.id }}">

										{{ composant.quantite }}

									</span>

                        </div>

                        <div class="col">

                            <img src="/img/dash.svg" alt="moins" onclick="removeQte({{ composant.id }})"
                                 width="30">

                            <span class="">0</span>

                            <img src="/img/plus.svg" alt="plus" onclick="addQte()" width="30">

                            <button class="btn btn-success mx-3"
                                    onclick="submitQteCompo('{{ composant.id }}')">OK
                            </button>

                        </div>




                    </div>


                {% endfor %}
            </div>
            


        </div>




    {% endif %}
    


{% endfor %}