{% if composants | length > 0 %}
<table class="table table-striped text-center">
    <thead>
    <tr>
        {% if selectable != null %}
            <th></th>


        {% endif %}
        <th></th>
        <th>Categorie</th>
        <th>Article</th>
        <th>Specs</th>
        <th>EAN</th>
        <th>Prix</th>
        <th>Stock</th>
        {% if selectable == null %}

            <th>Quantite</th>

        {% endif %}
    </tr>
    </thead>
    <tbody>

    {% for item in composants %}
        <tr>
            {% if selectable != null %}
                <td>
                    <button type="button" class="btn btn-info" data-bs-dismiss="modal" onclick="selectValue('{{ selectable }}','{{ item.id }}')">Selectionner</button>
                </td>

            {% endif %}
            <td>
                <img src="/img/composant/{{ item.image }}" alt="" width="100">
            </td>
            <td data-label="Catégorie">{{ item.categorie }}</td>
            <td data-label="Nom">{{ item }}</td>
            <td data-label="Specs">{{ item.specs }}</td>
            <td data-label="EAN">{{ item.ISBN }}</td>
            <td data-label="Prix">{{ item.prix }}
                €
            </td>
            <td data-label="Quantité">
                <span id="qteCompo_{{ item.id }}_3">{{ item.quantite }}</span>

            </td>

            {% if selectable == null %}

                <td><img src="/img/dash.svg" alt="moins" onclick="removeQte({{ item.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('{{ item.id }}')">OK</button>
                </td>
            {% endif %}
        </tr>
    {% endfor %}
    </tbody>
</table>
{% else %}
<div class="d-flex justify-content-center align-items-center my-3"><img src="img/cancel.svg" alt="" width="50">
    <div class="mx-3 fs-5">Aucun composant correspondant</d>
    </div>
    {% endif %}


    {% if selectable != null %}
    <script >
    function selectValue(id,value) {
        let item = document.getElementById(id);
      item.value = value;
      item.dispatchEvent(new Event('change'));
    }
</script>
{% endif %}