<div class="overlay" data-overlay-type="{{type}}" {{#if level}}data-level="{{level}}"{{/if}} {{#if id}}data-overlay-id="{{id}}"{{/if}}>
    {{#if (eq type "heighten")}}
        <h3 class="form-group">
            <label>{{localize "PF2E.Item.Spell.Rank.Label"}}</label>
            <div class="form-fields">
                <select data-action="change-heighten-level">
                    {{selectOptions heightenLevels selected=level}}
                </select>
                <div class="item-controls">
                    <a data-action="delete-overlay" data-tooltip="Delete"><i class="fa-solid fa-trash"></i></a>
                </div>
            </div>
        </h3>
    {{else}}
        <div class="form-group">
            <label>{{localize "PF2E.Item.NameLabel"}}</label>
            <div class="form-fields">
                <input type="text" name="{{base}}.name" value="{{overlay.name}}" />
                <div class="item-controls">
                    <a data-action="delete-overlay" data-tooltip="Delete"><i class="fa-solid fa-trash"></i></a>
                </div>
            </div>
        </div>
    {{/if}}

    <div class="toggle-button-list">
        {{#each missing}}
            <button type="button" data-action="add-overlay-property" data-property="{{key}}">
                <i class="fa-solid fa-plus"></i>
                {{localize label}}
            </button>
        {{/each}}
    </div>

    {{#if (includes system "traits")}}
        <div class="traits">
            <a data-action="delete-overlay-property" data-property="traits"><i class="fa-solid fa-xmark"></i></a>
            <tagify-tags
                class="paizo-style tags spell-traits"
                name="{{dataPath}}.traits.value"
                value="{{json traits}}"
                {{#if (eq system.traits.value.length 0)}}placeholder="{{localize "PF2E.Traits"}}"{{/if}} />
        </div>
    {{/if}}

    {{#if (includes system "time")}}
        <div class="form-group">
            <label class="short">
                <a data-action="delete-overlay-property" data-property="time"><i class="fa-solid fa-xmark"></i></a>
                {{localize "PF2E.Item.Spell.Cast"}}
            </label>
            <div>
                <input type="text" name="{{dataPath}}.time.value" value="{{system.time.value}}" />
            </div>
        </div>
    {{/if}}

    {{#if (includes system "target")}}
        <div class="form-group">
            <label class="short">
                <a data-action="delete-overlay-property" data-property="target"><i class="fa-solid fa-xmark"></i></a>
                {{localize "PF2E.SpellTargetLabel"}}
            </label>
            <div>
                <input type="text" name="{{dataPath}}.target.value" value="{{system.target.value}}" />
            </div>
        </div>
    {{/if}}

    {{#if (includes system "area")}}
        <div class="form-group">
            <label class="short">
                <a data-action="delete-overlay-property" data-property="area"><i class="fa-solid fa-xmark"></i></a>
                {{localize "PF2E.Area.Label"}}
            </label>
            <div class="details-container-two-columns">
                <input type="number" name="{{dataPath}}.area.value" min="5" step="5" value="{{system.area.value}}" />
                <select name="{{dataPath}}.area.type">
                    {{selectOptions @root.areaShapes selected=system.area.type localize=true}}
                </select>
            </div>
        </div>
    {{/if}}

    {{#if (includes system "range")}}
        <div class="form-group">
            <label class="short">
                <a data-action="delete-overlay-property" data-property="range"><i class="fa-solid fa-xmark"></i></a>
                {{localize "PF2E.TraitRange"}}
            </label>
            <div>
                <input type="text" name="{{dataPath}}.range.value" value="{{system.range.value}}" />
            </div>
        </div>
    {{/if}}

    {{#if (includes system "damage")}}
        <div class="damage-formulas">
            <h3>
                <a data-action="delete-overlay-property" data-property="damage"><i class="fa-solid fa-xmark"></i></a>
                {{localize "PF2E.DamageLabel"}}
                <div class="item-controls">
                    <a data-action="add-damage-partial"><i class="fa-solid fa-plus"></i></a>
                </div>
            </h3>

            {{#each system.damage as |damage id|}}
                <div class="formula-section form-group">
                    <div class="form-fields">
                        <input type="text" name="{{../dataPath}}.damage.{{id}}.formula" value="{{damage.formula}}" placeholder="{{localize "PF2E.Formula"}}" />
                        <label class="apply-mod">
                            {{localize "PF2E.SpellAbilityModLabel"}}
                            <input type="checkbox" name="{{../dataPath}}.damage.{{id}}.applyMod" {{checked damage.applyMod}} />
                        </label>
                        <select name="{{../dataPath}}.damage.{{id}}.category">
                            {{selectOptions @root.damageSubtypes selected=damage.category blank="" localize=true}}
                        </select>
                        <select name="{{../dataPath}}.damage.{{id}}.type">
                            {{selectOptions @root.damageTypes selected=damage.type localize=true}}
                        </select>
                        <div class="item-controls">
                            <a class="tag-selector"
                                data-tag-selector="basic"
                                data-title="PF2E.Item.MaterialEffects.Label"
                                data-config-types="materialDamageEffects"
                                data-property="{{../dataPath}}.damage.{{id}}.materials"
                            ><i class="fa-solid fa-edit"></i></a>
                            <a data-action="delete-damage-partial" data-id="{{id}}"><i class="fa-solid fa-trash"></i></a>
                        </div>
                    </div>
                    {{#if damage.materials}}
                        <div class="materials">
                            {{#each damage.materials as |material|}}
                                <div class="tag-legacy">{{localize (lookup @root.materials this)}}</div>
                            {{/each}}
                        </div>
                    {{/if}}
                </div>
            {{/each}}
        </div>
    {{/if}}
</div>
