<div class="list-layout">

  <ul class="items-list effects-list {{#if actor.flags.tidy5e-sheet.allow-edit}}unlocked{{/if}}">
    {{#each effects as |section sid|}}
    <li class="items-header effects-header" data-effect-type="{{section.type}}">
      <h3 class="item-name effect-name">{{localize section.label}}</h3>
      <div class="items-header-labels">
        <div class="items-header-source" title="{{effect.sourceName}}"><span>{{localize 'DND5E.Source'}}</span></div>
        <div class="items-header-duration">{{localize 'DND5E.Duration'}}</div>
      </div>
    </li>

    <ul class="item-list">
      {{#each section.effects as |effect|}}
      <li class="item effect {{#if ../../owner}}context-enabled{{/if}}" data-effect-id="{{effect.id}}">
        <div class="item-name effect-name">
          <img class="item-image" src="{{effect.data.icon}}"/>
          <h4>{{effect.data.label}}</h4>
        </div>
        <div class="item-detail effect-source" title="{{effect.sourceName}}"><span>{{effect.sourceName}}</span></div>
        <div class="item-detail effect-duration">{{effect.duration.label}}</div>
        
        {{#if ../../owner}}
        <div class="activate-context-menu">
          <i class="fas fa-ellipsis-v"></i>
        </div>
        <div class="item-controls effect-controls context-menu">
          <a class="effect-control" data-action="toggle" title="{{localize 'DND5E.EffectToggle'}}">
              <i class="fas {{#if effect.data.disabled}}fa-check{{else}}fa-times{{/if}}"></i> <span class="control-label">{{localize 'DND5E.EffectToggle'}}</span>
          </a>
          <a class="effect-control effect-edit" data-action="edit" title=" {{localize 'DND5E.EffectEdit'}}">
              <i class="fas fas fa-pencil-alt"></i> <span class="control-label">{{localize 'DND5E.EffectEdit'}}</span>
          </a>
          <hr class="context-divider">
          <a class="effect-control effect-delete warning" data-action="delete" title="{{localize 'DND5E.EffectDelete'}}">
              <i class="fas fa-trash"></i> <span class="control-label">{{localize 'DND5E.EffectDelete'}}</span>
          </a>
        </div>
        {{/if}}
      </li>
      {{/each}}
      <li class="items-footer" data-effect-type="{{section.type}}">
        <a class="effect-create effect-control" data-action="create">
          <i class="fas fa-plus-circle"></i> {{localize "DND5E.Add"}}
        </a>
      </li>
    </ul>
    {{/each}}
  </ul>
</div>