<div>
  <ul class="item-list alterne-list">
    <li class="competence-header flexrow">
      <span class="equipement-nom">Nom</span>
      <span class="equipement-detail">Catégorie</span>
      <span class="equipement-detail">Quantité</span>
      <span class="equipement-detail">Conteneur</span>
      <span class="item-controls">Actions</span>
    </li>
    {{#each ingredients as |ing|}}
    <li class="item flexrow list-item" data-item-id="{{ing.id}}">
      <span class="equipement-nom">
        <img class="sheet-competence-img" src="{{ing.img}}" data-tooltip="{{ing.name}}"/>
        <span>{{ing.name}}</span>
      </span>
      <span class="equipement-detail">{{ing.categorie}}</span>
      <span class="equipement-detail">
        <a class="ingredient-moins"><i class="fa-solid fa-square-minus"></i></a>
        <span>{{ing.quantite}}</span>
        <a class="ingredient-plus"><i class="fa-solid fa-square-plus"></i></a>
      </span>
      <span class="equipement-detail">
        <select class="ingredient-conteneur">
          {{#select ing.conteneurId}}
          {{#each ../conteneurs as |c|}}
          <option value="{{c.id}}">{{c.name}}</option>
          {{/each}}
          {{/select}}
        </select>
      </span>
      <span class="item-controls">
        <a class="ingredient-vendre" data-tooltip="Vendre ou donner"><i class="fa-solid fa-comments-dollar"></i></a>
        <a class="ingredient-chat" data-tooltip="Montrer"><i class="fa-solid fa-comment"></i></a>
        <a class="ingredient-edit" data-tooltip="Éditer"><i class="fa-solid fa-edit"></i></a>
      </span>
    </li>
    {{/each}}
  </ul>
</div>
