<div class="invocations-wrapper">
    <div class="invocations-roll-header">
        <button type="button" class="dice-picker invocation-roll-btn" data-skill="invocation">{{localize 'l5r5e.skills.social.invocation'}}</button>
    </div>
    <div class="invocations-columns">
        {{#each data.splitInvocationsList as |list type|}}
        <fieldset class="section-header flexrow invocation-column">
            <legend class="technique-controls">
                <span>{{localize (concat 'chiaroscuro.technique.invocation_types.' type)}}</span>
                {{#if ../data.editable_not_soft_locked}}
                <a data-item-type="mot_invocation" class="technique-control item-add" data-invocation-type="{{type}}" title="{{localize 'l5r5e.global.add'}}"><i class="fas fa-plus"></i></a>
                {{/if}}
            </legend>
            <ul class="item-list">
                {{#each list as |item|}}
                <li class="item technique flexcol" data-item-id="{{item._id}}">
                    <ul class="item-header technique-controls">
                        <li class="item-img"><img src="{{item.img}}" title="{{item.name}}" width="32px" height="32px"/></li>
                        <li class="item-name l5r5e-tooltip" data-item-id="{{item._id}}">{{item.name}}</li>
                        {{#if ../../data.editable_not_soft_locked}}
                        <li data-item-id="{{item._id}}" class="item-control item-edit" title="{{localize 'l5r5e.global.edit'}}"><i class="fas fa-edit"></i></li>
                        <li data-item-id="{{item._id}}" class="item-control item-delete" title="{{localize 'Delete'}}"><i class="fas fa-trash"></i></li>
                        {{/if}}
                    </ul>
                </li>
                {{/each}}
            </ul>
        </fieldset>
        {{/each}}
    </div>
</div>
