<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"><a data-action="addChange"><i class="fa-regular fa-square-plus"></i></a></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">
                        <input type="text" class="effect-change-input" 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"><a data-action="deleteChange"><i class="fa-solid fa-trash"></i></a></div>
                </li>
            {{/with}}
        {{/each}}
    </ol>
</section>