<section class="tab changes{{#if tab.active}} active{{/if}}" data-group="{{tab.group}}" data-tab="{{tab.id}}">
    <header>
        <div class="key">{{localize "EFFECT.ChangeKey"}}</div>
        <div class="mode">{{localize "EFFECT.ChangeMode"}}</div>
        <div class="value">{{localize "EFFECT.ChangeValue"}}</div>
        <div class="priority">{{localize "EFFECT.ChangePriority"}}</div>
        <div class="controls">
            <button type="button" class="inline-control icon fa-regular fa-square-plus" data-action="addChange"></button>
        </div>
    </header>
    <ol class="scrollable" data-changes>
        {{#each source.changes as |change i|}}
        {{#with ../fields.changes.element.fields as |changeFields|}}
        <li data-index="{{i}}">
            <div class="key">
                {{formInput changeFields.key name=(concat "changes." i ".key") value=change.key}}
            </div>
            <div class="mode">
                {{formInput changeFields.mode name=(concat "changes." i ".mode") value=change.mode choices=@root.modes}}
            </div>
            <div class="value">
                {{formInput changeFields.value name=(concat "changes." i ".value") value=change.value}}
            </div>
            <div class="priority">
                {{formInput changeFields.priority name=(concat "changes." i ".priority") value=change.priority
                    placeholder=(lookup ../../priorities change.mode)}}
            </div>
            <div class="controls">
                <button type="button" class="inline-control icon fa-solid fa-trash" data-action="deleteChange"></button>
            </div>
        </li>
        {{/with}}
        {{/each}}
    </ol>
</section>
