<ol class="items-list effects-list">
  {{#each effects as |section sid|}}
    <li class="items-header flexrow" data-effect-type="{{section.type}}" data-parent-id="{{@root.actor.id}}" >
      <h3 class="item-name effect-name flexrow">{{localize section.label}}</h3>
      <div class="effect-source">{{localize "WANDERHOME.Effect.Source"}}</div>
      <div class="effect-source">{{localize "EFFECT.TabDuration"}}</div>
      <div class="item-controls effect-controls flexrow">
        <a class="effect-control" data-action="create" title="{{localize 'DOCUMENT.Create' type="Effect"}}">
          <i class="fas fa-plus"></i> {{localize "DOCUMENT.New" type="Effect"}}
        </a>
      </div>
    </li>

    <ol class="item-list">
    {{#each section.effects as |effect|}}
      <li class="item effect flexrow" data-effect-id="{{effect.id}}" data-parent-id="{{effect.parent.id}}">
        <div class="item-name effect-name flexrow">
          <img class="item-image" src="{{effect.icon}}"/>
          <h4>{{effect.name}}</h4>
        </div>
        <div class="effect-source">{{effect.sourceName}}</div>
        <div class="effect-duration">{{effect.duration.label}}</div>
        <div class="item-controls effect-controls flexrow">
          <a class="effect-control" data-action="toggle" title="{{localize 'WANDERHOME.Effect.Toggle'}}">
            <i class="fas {{#if effect.disabled}}fa-check{{else}}fa-times{{/if}}"></i>
          </a>
          <a class="effect-control" data-action="edit" title="{{localize 'DOCUMENT.Update' type="Effect"}}">
            <i class="fas fa-edit"></i>
          </a>
          <a class="effect-control" data-action="delete" title="{{localize 'DOCUMENT.Delete' type="Effect"}}">
            <i class="fas fa-trash"></i>
          </a>
        </div>
      </li>
    {{/each}}
    </ol>
  {{/each}}
</ol>
