.section.magic
    +sectionheader("show_magic", false)
        span(data-i18n="MAGIC")
    .spellcaster
        .grey-box
            .spell-slots
                h3(data-i18n="SPELL_SLOTS")
                each val in ["first", "second", "third", "fourth", "fifth"]
                    +text-input(`spell-slots-${val}-level`, `${val}_LEVEL`)(type="number", value="0", min="0").center
            .invoker.grid.grid-flow-col.gap-1
                h3(data-i18n="SPELL_POINTS")
                +text-input-duo(" ", "legate_xp_max", "CURRENT_MAX")(type="number", value="0", min="0")
        .spells.grey-box.simple-repsection.mt
            .spells-header.grid.grid-flow-col.gap-1.mb
                h3(data-i18n="SPELLS")
                each val in ["max_level", "spell_casts"]
                    +text-input(val, val)(type="number", value="1", min="1").center
                +text-input("spells_prepared", "SPELLS_PREPARED")(type="number", value="3", min="1").center
            fieldset.repeating_magic-spells
                .show-chevron
                    +collapseChevron
                    button.display.invisible-button(type="roll", name="roll_Spell", value!="&{template:swn-default} {{system=@{system}}} {{charname=@{character_name}}} {{title=@{spell_name}}} {{info=^{SPELL}}} {{desc=@{spell_description}}} {{damage=[[@{spell_damage}]]}}")
                    .display.grid
                        .name.ellipsis.grid.grid-flow-col.gap-1
                            span(name="attr_spell_name")
                            span.level #[span(data-i18n="LEVEL")]-#[span(name="attr_spell_level")]
                            div
                                span.prepared #[span(data-i18n="PREPARED")]:
                                input.prepared(type="number", name="attr_spell_prepared", value="0", min="0")
                        .details #[span(name="attr_spell_description")]
                    .edit.grid
                        .grid.grid-flow-col.gap-1.spell-grid
                            +text-input("spell_name", "NAME")
                            each val in ["level", "prepared"]
                                +text-input(`spell_${val}`, val)(type="number", value="0", min="0").center
                            +text-input("spell_damage", "DAMAGE").center
                        textarea(name="attr_spell_description", data-i18n-placeholder="DESCRIPTION")