<div class="tab effects sheet-part {{#if @root.tabs.effects.active}}active{{/if}}" data-group="sheet" data-tab="effects">
  <h4 class="item-name effect-name flexrow">{{ localize "UI.effects.name" }}</h4>
  <ol class="items-list effects-list">
    {{#each effects as |section sid|}}
    <li class="items-header flexrow" data-effect-type="{{section.type}}">
      <p class="item-name effect-name flexrow">{{#if (eq section.type 'temporary')}}
        {{localize "UI.effects.temporary" }}
        {{else if (eq section.type 'passive')}}
        {{localize "UI.effects.passive" }}
        {{else if (eq section.type 'inactive')}}
        {{localize "UI.effects.inactive" }}
        {{/if}}
      </p>
      <div class="effect-source">{{localize 'UI.source'}}</div>
      <div class="effect-source">{{localize 'UI.duration'}}</div>
      <div class="item-controls effect-controls flexrow">
        {{#if @root.isEditMode}}
        <a class="effect-control" data-action="create" class="effect-control" title="{{localize 'UI.effect_create'}}">
          <i class="fas fa-plus"></i> {{localize "UI.add"}}
        </a>
        {{/if}}
      </div>
    </li>

    <ol class="item-list">
      {{#each section.effects as |effect|}}
      <li class="item effect flexrow" data-effect-id="{{effect.id}}">
        <div class="item-name effect-name">
          <a class="effect-control flexrow flex-group-center items-center" class="effect-control" data-effect-op="edit" title="{{localize 'UI.effect_edit'}}">
            <img class="item-image" src="{{effect.icon}}" />
            <span>{{effect.label}}</span>
          </a>
        </div>
        <div class="effect-source">{{effect.sourceName}}</div>
        <div class="effect-duration">{{effect.duration.label}}</div>
        <div class="item-controls effect-controls flexrow">
          {{#if @root.isEditMode}}
          <a class="effect-control" data-action="create" class="effect-control" data-effect-op="toggle" title="{{localize 'UI.effect_toggle'}}">
            <i class="fas {{#if effect.disabled}}fa-check{{else}}fa-times{{/if}}"></i>
          </a>
          <a class="effect-control" data-action="create" class="effect-control" data-effect-op="delete" title="{{localize 'UI.effect_delete'}}">
            <i class="fas fa-trash"></i>
          </a>
          {{/if}}
        </div>
      </li>
      {{/each}}
    </ol>
    {{/each}}
  </ol>
</div>
