{{!-- Partial pour l'affichage des effets sur les items --}}

<div class="sheet-box color-bg-archetype">
  <ul class="item-list alternate-list">
    
    {{!-- En-tête --}}
    <li class="item flexrow list-item items-title-bg">
      <span class="item-name-label-header">
        <h3><label class="items-title-text">Effets Actifs</label></h3>
      </span>
      <div class="item-filler">&nbsp;</div>
      <div class="item-controls item-controls-fixed">
        <a class="item-control" data-action="createEffect" title="Ajouter un effet">
          <i class="fas fa-plus"></i>
        </a>
      </div>
    </li>
    
    {{!-- Affiche un message si aucun effet --}}
    {{#if (not item.effects.length)}}
    <li class="item flexrow">
      <span class="item-name-label competence-name" style="color: #888; font-style: italic;">Aucun effet sur cet item</span>
    </li>
    {{/if}}
    
    {{!-- Liste des effets --}}
    {{#each item.effects as |effect|}}
    <li class="item flexrow" data-effect-id="{{effect.id}}" {{#if effect.disabled}}style="opacity: 0.6;"{{/if}}>
      {{!-- Icône de l'effet --}}
      <img class="item-name-img" src="{{effect.icon}}" onerror="this.src='systems/fvtt-mournblade-cyd-2-0/assets/icons/capacite.webp'" />
      
      {{!-- Nom et description de l'effet --}}
      <div class="flexcol item-name-label">
        <span class="item-name-label competence-name">
          {{effect.name}}
          {{#if effect.disabled}}<i class="fas fa-ban" style="color: #ff5555; margin-left: 5px;" title="Désactivé"></i>{{/if}}
        </span>
        
        {{!-- Affichage compact des modifications --}}
        {{#if effect.changes.length}}
        <span class="predilection-text" style="font-size: 0.85em; color: #aaa;">
          {{#each effect.changes as |change index|}}
            {{change.key}}: {{change.value}}
            {{#unless (eq index (subtract effect.changes.length 1))}}, {{/unless}}
          {{/each}}
        </span>
        {{/if}}
      </div>
      
      {{!-- Affichage de la durée --}}
      {{#if effect.duration.type}}
      <span class="item-field-label-short" style="font-size: 0.85em;">
        {{#if (eq effect.duration.type "rounds")}}🔄{{/if}}
        {{#if (eq effect.duration.type "turns")}}🎭{{/if}}
        {{#if (eq effect.duration.type "seconds")}}⏱️{{/if}}
        {{#if (eq effect.duration.type "combat")}}⚔️{{/if}}
        {{effect.duration.value}}
      </span>
      {{/if}}
      
      {{!-- Contrôles --}}
      <div class="item-controls item-controls-fixed">
        <a class="item-control" data-action="editEffect" data-effect-id="{{effect.id}}" title="Éditer">
          <i class="fas fa-edit"></i>
        </a>
        <a class="item-control" data-action="toggleEffect" data-effect-id="{{effect.id}}" title="{{#if effect.disabled}}Activer{{else}}Désactiver{{/if}}">
          <i class="fas fa-{{#if effect.disabled}}check{{else}}times{{/if}}"></i>
        </a>
        <a class="item-control" data-action="deleteEffect" data-effect-id="{{effect.id}}" title="Supprimer">
          <i class="fas fa-trash"></i>
        </a>
      </div>
    </li>
    {{/each}}
    
  </ul>
</div>