<ol class="form-list">
    <li class="form-group">
        <label class="short">{{localize "PF2E.SpellCategoryLabel"}}</label>
        <select name="system.category.value">
            {{#select data.category.value}}
                {{#each spellCategories as |label key|}}
                    <option value="{{key}}">{{localize label}}</option>
                {{/each}}
            {{/select}}
        </select>
    </li>


    <li class="form-group">
        <label class="short">{{localize "PF2E.SpellSchoolLabel"}}</label>
        <select name="system.school.value">
            {{#select data.school.value}}
                {{#each magicSchools as |name school|}}
                    <option value="{{school}}">{{localize name}}</option>
                {{/each}}
            {{/select}}
        </select>
    </li>
    <li class="form-group">
        <label class="short">{{localize "PF2E.SpellTraditionsLabel"}}</label>
        <input class="tags paizo-style" name="system.traditions.value" value="{{json data.traditions.value}}" data-dtype="JSON" />
    </li>

    {{#unless isRitual}}
        <li class="form-group">
            <label>{{localize "PF2E.TraitCantrip"}}</label>
            <input class="toggle-trait" type="checkbox" {{checked isCantrip}} data-trait="cantrip" />
        </li>
    {{/unless}}
</ol>

<ol class="form-list">
    <h3>{{localize "PF2E.CastLabel"}}</h3>

    <div class="form-group">
        <label class="short">{{localize "PF2E.SpellTimeLabel"}}</label>
        <input type="text" name="system.time.value" value="{{data.time.value}}" />
    </div>

    <div class="form-group">
        <label class="short">{{localize "PF2E.SpellComponentsLabel"}}</label>
        <div class="details-container-flex-row spell-components">
            <label>
                <input type="checkbox" name="system.components.focus" {{checked data.components.focus}} />
                <span>{{localize "PF2E.SpellComponentShortF"}}</span>
            </label>
            <label>
                <input type="checkbox" name="system.components.material" {{checked data.components.material}} />
                <span>{{localize "PF2E.SpellComponentShortM"}}</span>
            </label>
            <label>
                <input type="checkbox" name="system.components.somatic" {{checked data.components.somatic}} />
                <span>{{localize "PF2E.SpellComponentShortS"}}</span>
            </label>
            <label>
                <input type="checkbox" name="system.components.verbal" {{checked data.components.verbal}} />
                <span>{{localize "PF2E.SpellComponentShortV"}}</span>
            </label>
        </div>
    </div>

    <div class="form-group">
        <label class="short">{{localize "PF2E.SpellRequirementsLabel"}}</label>
        <input type="text" name="system.materials.value" value="{{data.materials.value}}" />
    </div>

    <div class="form-group">
        <label class="short">{{localize "PF2E.SpellCostLabel"}}</label>
        <input type="text" name="system.cost.value" value="{{data.cost.value}}" />
    </div>
</ol>

{{#if isRitual}}
    <ol class="form-list">
        <h3>{{localize "PF2E.SpellRitualLabel"}}</h3>

        <div class="form-group">
            <label class="short">{{localize "PF2E.SpellPrimaryCheckLabel"}}</label>
            <input type="text" name="system.primarycheck.value" value="{{data.primarycheck.value}}" />
        </div>

        <div class="form-group">
            <label class="short">{{localize "PF2E.SpellSecondaryChecksLabel"}}</label>
            <input type="text" name="system.secondarycheck.value" value="{{data.secondarycheck.value}}" />
        </div>

        <div class="form-group">
            <label class="short">{{localize "PF2E.SpellSecondaryCasters"}}</label>
            <input type="text" name="system.secondarycasters.value" value="{{data.secondarycasters.value}}" />
        </div>
    </ol>
{{/if}}

<ol class="form-list">
    <h3>{{localize "PF2E.Usage"}}</h3>

    <div class="form-group">
        <label class="short">{{localize "PF2E.SpellRangeLabel"}}</label>
        <input type="text" name="system.range.value" value="{{data.range.value}}" />
    </div>

    <div class="form-group">
        <label class="short">{{localize "PF2E.SpellTargetLabel"}}</label>
        <input type="text" name="system.target.value" value="{{data.target.value}}" />
    </div>

    <div class="form-group">
        <label class="short">{{localize "PF2E.AreaLabel"}}</label>
        <div class="details-container-two-columns">
            <select name="system.area.value" data-dtype="Number">
                <option value="0"></option>
                {{#select data.area.value}}
                    {{#each areaSizes as |label key|}}
                        <option value="{{key}}">{{localize label}}</option>
                    {{/each}}
                {{/select}}
            </select>
            <select name="system.area.type">
                <option value=""></option>
                {{#select data.area.type}}
                    {{#each areaTypes as |label type|}}
                        <option value="{{type}}">{{localize label}}</option>
                    {{/each}}
                {{/select}}
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="short">{{localize "PF2E.SpellDurationLabel"}}</label>
        <input type="text" name="system.duration.value" value="{{data.duration.value}}" />
    </div>
</ol>

<ol class="form-list">
    <h3>{{localize "PF2E.DamageLabel"}}</h3>

    <div class="form-group">
        <label class="short">{{localize "PF2E.SpellTypeLabel"}}</label>
        <select name="system.spellType.value">
            {{#select data.spellType.value}}
                {{#each spellTypes as |name type|}}
                    <option value="{{type}}">{{localize name}}</option>
                {{/each}}
            {{/select}}
        </select>
    </div>

    <div class="form-group">
        <label class="short">{{localize "PF2E.SpellSaveLabel"}}</label>
        <div class="details-container-two-columns">
            <select name="system.save.basic">
                {{#select data.save.basic}}
                    <option value=""></option>
                    <option value="basic">{{localize "PF2E.SpellBasicSaveOption"}}</option>
                {{/select}}
            </select>
            <select name="system.save.value">
                {{#select data.save.value}}
                    <option value=""></option>
                    {{#each saves as |ability a|}}
                        <option value="{{a}}">{{localize ability}}</option>
                    {{/each}}
                {{/select}}
            </select>
        </div>
    </div>

    <div class="damage-formulas">
        <h3>
            {{localize "PF2E.FormulaPlaceholder"}}
            <div class="item-controls">
                <i class="fas fa-fw fa-plus" data-action="damage-create"></i>
            </div>
        </h3>

        {{#each data.damage.value as |damage id|}}
            <div class="formula-section">
                <div class="details-container-flex-row">
                    <input type="text" name="system.damage.value.{{id}}.value" value="{{damage.value}}" placeholder="{{localize "PF2E.FormulaPlaceholder"}}" />
                    <label>
                        <span>&nbsp;{{localize "PF2E.SpellAbilityModLabel"}}</span>
                        <input type="checkbox" name="system.damage.value.{{id}}.applyMod" {{checked damage.applyMod}} />
                    </label>
                    <select name="system.damage.value.{{id}}.type.subtype">
                        {{#select damage.type.subtype}}
                            <option></option>
                            {{#each @root.damageSubtypes as |name type|}}
                                <option value="{{type}}">{{localize name}}</option>
                            {{/each}}
                        {{/select}}
                    </select>
                    <select name="system.damage.value.{{id}}.type.value">
                        {{#select damage.type.value}}
                            <option value=""></option>
                            {{#each @root.damageTypes as |name type|}}
                                <option value="{{type}}">{{localize name}}</option>
                            {{/each}}
                        {{/select}}
                    </select>
                    <div class="item-controls">
                        <a class="tag-selector" data-tag-selector="basic" data-title="PF2E.DamageCategoriesLabel" data-config-types="materialDamageEffects" data-property="system.damage.value.{{id}}.type.categories"><i class="fas fa-fw fa-edit"></i></a>
                        <a data-action="damage-delete" data-id="{{id}}"><i class="fas fa-fw fa-trash"></i></a>
                    </div>
                </div>
                {{#if damage.type.categories}}
                    <div class="traits-list">
                        {{#each damage.type.categories}}
                            <div class="tag-legacy">{{localize (lookup @root.damageCategories this)}}</div>
                        {{/each}}
                    </div>
                {{/if}}
            </div>
        {{/each}}
    </div>
</ol>

{{#unless data.heightening.type}}
    {{#if canHeighten}}
        <button data-action="heightening-interval-create"><i class="fas fa-fw fa-plus"></i> {{localize "PF2E.SpellScalingInterval.Add"}}</button>
    {{/if}}
{{/unless}}

{{#if (eq data.heightening.type "interval")}}
    <div class="form-list">
        <h3>
            {{localize "PF2E.SpellScalingInterval.Header"}}
            <div class="item-controls">
                <i class="fas fa-fw fa-trash" data-action="heightening-delete" data-idx="{{idx}}"></i>
            </div>
        </h3>

        <div class="form-group">
            <label class="short">{{localize "PF2E.SpellScalingInterval.Label"}}</label>
            <select name="system.heightening.interval" data-dtype="Number">
                {{#select data.heightening.interval}}
                    {{#each @root.heightenIntervals as |key|}}
                        <option value="{{key}}">{{localize "PF2E.SpellScalingInterval.Selection" interval=key}}</option>
                    {{/each}}
                {{/select}}
            </select>
        </div>

        {{#each data.damage.value as |damage idx|}}
            <div class="form-group">
                <label class="short">{{localize (lookup @root.damageTypes damage.type.value)}}</label>
                <input type="text" name="system.heightening.damage.{{idx}}" value="{{lookup ../data.heightening.damage idx}}" />
            </div>
        {{/each}}
    </div>
{{/if}}

{{! Spell heightening for fixed levels}}
{{#unless (eq data.heightening.type "interval")}}
    {{#each heightenOverlays}}
        {{> systems/pf2e/templates/items/spell-overlay.hbs this=this}}
    {{/each}}
    {{#if canHeighten}}
        <button data-action="heightening-fixed-create" data-overlay-type="heightening">
            <i class="fas fa-fw fa-plus"></i> {{localize "PF2E.SpellScalingOverlay.Add"}}
        </button>
    {{/if}}
{{/unless}}

<div class="form-group">
    <label>{{localize "PF2E.Counteract"}}</label>
    <input type="checkbox" name="system.hasCounteractCheck.value" {{checked data.hasCounteractCheck.value}} />
</div>
{{#if (not isVariant)}}
    <div class="form-list variants" data-can-drop="true">
        <h3>
            {{localize "PF2E.Item.Spell.Variants.LabelPlural"}}
            <div class="item-controls">
                <i class="fas fa-fw fa-plus" data-action="variant-create"></i>
            </div>
        </h3>

        {{#each variants as |variant|}}
            <div class="variant" data-variant-id="{{variant.id}}">
                <label>{{variant.name}}</label>
                <span class="activity-icon">{{variant.actions}}</span>
                <div class="item-controls">
                    <a data-action="variant-edit" data-id="{{variant.id}}"><i class="fas fa-fw fa-edit"></i></a>
                    <a data-action="variant-delete" data-id="{{variant.id}}"><i class="fas fa-fw fa-trash"></i></a>
                </div>
            </div>
        {{/each}}
    </div>
{{/if}}
