<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">Niveau</span>
      <span class="equipement-detail">Quantité</span>
      <span class="equipement-detail">Conteneur</span>
      <span class="item-controls">Actions</span>
    </li>
    {{#each herbes as |herbe|}}
    <li class="item flexrow list-item" data-item-id="{{herbe.id}}">
      <span class="equipement-nom">
        <img class="sheet-competence-img" src="{{herbe.img}}" data-tooltip="{{herbe.name}}"/>
        <span>{{herbe.name}}</span>
      </span>
      <span class="equipement-detail">{{herbe.categorie}}</span>
      <span class="equipement-detail">{{herbe.niveau}}</span>
      <span class="equipement-detail">
        <a class="herbe-moins"><i class="fa-solid fa-square-minus"></i></a>
        <span>{{herbe.quantite}}</span>
        <a class="herbe-plus"><i class="fa-solid fa-square-plus"></i></a>
      </span>
      <span class="equipement-detail">
        <select class="herbe-conteneur">
          {{#select herbe.conteneurId}}
          {{#each ../conteneurs as |c|}}
          <option value="{{c.id}}">{{c.name}}</option>
          {{/each}}
          {{/select}}
        </select>
      </span>
      <span class="item-controls">
        {{#if herbe.isHerbeAPotion}}
        <a class="herbe-decoction" data-tooltip="Décoction"><i class="fa-solid fa-flask-vial"></i></a>
        {{/if}}
        <a class="herbe-vendre" data-tooltip="Vendre ou donner"><i class="fa-solid fa-comments-dollar"></i></a>
        <a class="herbe-chat" data-tooltip="Montrer"><i class="fa-solid fa-comment"></i></a>
        <a class="herbe-edit" data-tooltip="Éditer"><i class="fa-solid fa-edit"></i></a>
      </span>
    </li>
    {{/each}}
  </ul>
</div>
