{{!-- Tab for the items view to manage effects --}}
<div class="tab effects" data-group="primary" data-tab="effects">
    <ol class="effects-list">
        <li class="effect flexrow effect-header">
            <div class="effect-image"></div>
            <div class="effect-name">Name</div>
            <div class="effect-controls">
                <a class="effect-control" data-action="create" title="{{localize 'DS4.UserInteractionAddEffect'}}">
                    <i class="fas fa-plus"></i> {{localize 'DS4.UserInteractionAddEffect'}}</a>
            </div>
        </li>
        {{#each item.effects as |effect id|}}
        <li class="effect flexrow" data-effect-id="{{effect._id}}">
            <h4 class="effect-name">{{effect.label}}</h4>
            <div class="effect-controls">
                <a class="effect-control" data-action="edit" title="{{localize 'DS4.UserInteractionEditEffect'}}">
                    <i class="fas fa-edit"></i></a>
                <a class="effect-control" data-action="delete" title="{{localize 'DS4.UserInteractionDeleteEffect'}}">
                    <i class="fas fa-trash"></i></a>
            </div>
        </li>
        {{/each}}
    </ol>
</div>