<div class="panel">
<ol class="items-list effects-list">
{{#each effects as |section sid|}}
    <li class="items-header flexrow" data-effect-type="{{section.type}}">
        <h3 class="item-name effect-name flexrow">{{localize section.label}}</h3>
        <div class="effect-source">Source</div>
        <div class="effect-source">Duration</div>
        <div class="item-controls effect-controls flexrow">
            <a class="effect-control" data-action="create" title="{{localize 'SW5E.EffectCreate'}}">
                <i class="fas fa-plus"></i> {{localize "SW5E.Add"}}
            </a>
        </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 flexrow">
                <img class="item-image" src="{{effect.data.icon}}"/>
                <h4>{{effect.data.label}}</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 'SW5E.EffectToggle'}}">
                    <i class="fas {{#if effect.data.disabled}}fa-check{{else}}fa-times{{/if}}"></i>
                </a>
                <a class="effect-control" data-action="edit" title="{{localize 'SW5E.EffectEdit'}}">
                    <i class="fas fa-edit"></i>
                </a>
                <a class="effect-control" data-action="delete" title="{{localize 'SW5E.EffectDelete'}}">
                    <i class="fas fa-trash"></i>
                </a>
            </div>
        </li>
    {{/each}}
    </ol>
{{/each}}
</ol>
</div>