<section class="tab changes{{#if tab.active}} active{{/if}}" data-group="{{tab.group}}" data-tab="{{tab.id}}">
    <header>
        <div class="key">{{localize "EFFECT.FIELDS.changes.element.key.label"}}</div>
        <div class="type">{{localize "EFFECT.FIELDS.changes.element.type.label"}}</div>
        <div class="value">{{localize "EFFECT.FIELDS.changes.element.value.label"}}</div>
        <div class="priority">{{localize "EFFECT.FIELDS.changes.element.priority.label"}}</div>
        <div class="controls">
            <a class="inline-control icon" data-action="addChange"><i class="fa-regular fa-square-plus"></i></a>
        </div>
    </header>
    <ol class="scrollable" data-changes>
        {{#each changes as |change|}}
            {{{change}}}
        {{/each}}
    </ol>

    <fieldset class="armor-change-container optional">
        <legend>
            {{localize "DAGGERHEART.GENERAL.armor"}} 
            <input type="checkbox" class="armor-change-checkbox" data-index="{{typedChanges.armor.index}}" {{checked typedChanges.armor}} />
        </legend>

        {{#if typedChanges.armor}}
            {{> "systems/daggerheart/templates/sheets/activeEffect/typeChanges/armorChange.hbs" typedChanges.armor fields=@root.systemFields.changes.element.types.armor.fields}}
        {{/if}}
    </fieldset>
</section>
