<section class="tab activity-{{ tab.id }} {{ tab.cssClass }}" data-tab="{{ tab.id }}" data-group="{{ tab.group }}">
    <fieldset>
        <legend>
            <span>{{ localize "DND5E.ENCHANT.FIELDS.enchant.label" }}</span>
            <button type="button" class="unbutton control-button" data-action="addEffect"
                    data-tooltip="DND5E.ENCHANT.Enchantment.Action.Create"
                    aria-label="{{ localize "DND5E.ENCHANT.Enchantment.Action.Create" }}">
                <i class="fas fa-plus"></i>
            </button>
        </legend>
        <multi-select name="appliedEffects" class="hidden-tags">
            {{ selectOptions allEnchantments }}
        </multi-select>
        <ul class="separated-list enchantments flexcol unlist">
            {{#each appliedEffects}}
            <li data-index="{{ index }}" data-effect-id="{{ effect.id }}" data-expand-id="effects.{{ effect.id }}">
                {{> ".enchantment" }}
            </li>
            {{else}}
            <li class="empty">
                {{{ localize "DND5E.ENCHANT.Enchantment.Empty" }}}
            </li>
            {{/each}}
        </ul>
    </fieldset>
</section>

{{#*inline ".enchantment"}}
<div class="details flexrow">
    <img class="gold-icon" src="{{ effect.img }}" alt="{{ effect.name }}">
    {{{ contentLink }}}
    <div class="list-controls flexrow">
        <button type="button" class="unbutton control-button" data-action="dissociateEffect"
                data-tooltip aria-label="{{ localize 'DND5E.EFFECT.Action.Dissociate' }}">
            <i class="fa-solid fa-minus" inert></i>
        </button>
        <button type="button" class="unbutton control-button" data-action="deleteEffect"
                data-tooltip aria-label="{{ localize 'DND5E.ENCHANT.Enchantment.Action.Delete' }}">
            <i class="fa-solid fa-trash" inert></i>
        </button>
    </div>
</div>
<input type="hidden" name="{{ prefix }}_id" value="{{ data._id }}">
<div class="additional-tray collapsible {{ collapsed }}" data-action="toggleCollapsed">
    <label class="roboto-upper">
        <i class="fa-solid fa-gears" inert></i>
        <span>{{ localize "DND5E.AdditionalSettings" }}</span>
        <i class="fas fa-caret-down" inert></i>
    </label>
    <div class="collapsible-content">
        <div class="wrapper">
            <div class="form-group">
                <label>{{ localize "DND5E.ENCHANT.FIELDS.effects.element.level.label" }}</label>
                <div class="form-fields range-fields">
                    {{ formInput fields.level.fields.min name=(concat prefix "level.min") value=data.level.min
                                 placeholder="0" ariaLabel=(localize "DND5E.LevelLimit.Min")
                                 input=@root.inputs.createNumberInput }}
                    <dnd5e-icon src="systems/dnd5e/icons/svg/range-connector.svg" class="sep"></dnd5e-icon>
                    {{ formInput fields.level.fields.max name=(concat prefix "level.max") value=data.level.max
                                 placeholder="∞" ariaLabel=(localize "DND5E.LevelLimit.Max") }}
                </div>
                <p class="hint">{{ localize "DND5E.ENCHANT.FIELDS.effects.element.level.hint" }}</p>
            </div>
            {{#with fields.riders.fields as |fields|}}
            {{ formField fields.activity name=(concat ../prefix "riders.activity") options=../activityOptions
                         rootId=@root.partId }}
            {{ formField fields.effect name=(concat ../prefix "riders.effect") options=../effectOptions
                         rootId=@root.partId }}
            {{ formField fields.item name=(concat ../prefix "riders.item") value=../data.riders.item
                         rootId=@root.partId }}
            {{/with}}
        </div>
    </div>
</div>
{{/inline}}
