<form class="{{cssClass}} {{item.type}} item_v2" autocomplete="off">
  <header class="item-sheet-header">

    {{!-- Scroll Creator --}}
    <div class="scroll-creator-wrapper">
      <a class="scroll-creator fa-lg fa-solid fa-scroll" title="{{localize 'dc20rpg.item.sheet.createScroll'}}"></a>
    </div>

    {{PARTIAL "Header"}}
  </header>

  {{!-- Tooltip --}}
  {{PARTIAL "Tooltip"}}

  <nav class="sheet-tabs tabs" data-group="primary">
    <a class="item" data-tab="description"><span>{{localize 'dc20rpg.item.sheet.description'}}</span></a>
    <a class="item" data-tab="config"><span>{{localize 'dc20rpg.item.sheet.config.tab'}}</span></a>
    <a class="item" data-tab="roll"><span>{{localize 'dc20rpg.item.sheet.roll'}}</span></a>
    <a class="item" data-tab="advanced"><span>{{localize 'dc20rpg.item.sheet.advanced'}}</span></a>
  </nav>

  <section class="item-sheet-body">
    <div class="tab description-tab content padding-7" data-group="primary" data-tab="description">
      <div class="description-box">
        {{editor enriched.description target="system.description" button=true editable=editable engine="prosemirror"}}
      </div>
    </div>

    <div class="tab config-tab content padding-7" data-group="primary" data-tab="config">
      <div class="row margin-top-5">
        <span>{{localize "dc20rpg.item.sheet.spell.spellType"}}</span>
        <select name="system.spellType">
          {{selectOptions @root.config.DROPDOWN_DATA.spellTypes selected=system.spellType blank=""}}
        </select>
      </div>
      <div class="row margin-top-5">
        <span>{{localize "dc20rpg.item.sheet.spell.magicSchool"}}</span>
        <select name="system.magicSchool">
          {{selectOptions @root.config.DROPDOWN_DATA.magicSchools selected=system.magicSchool blank=""}}
        </select>
      </div>
      <div class="row margin-top-5">
        <span>{{localize "dc20rpg.item.sheet.spell.spellOrigin"}}</span>
        <input type="text" name="system.spellOrigin" value="{{system.spellOrigin}}" placeholder="-">
      </div>
      <div class="row margin-top-5" title="{{localize "dc20rpg.item.sheet.spell.countToLimitTitle"}}">
        <span>{{localize "dc20rpg.item.sheet.countToLimit"}}</span>
        <a class="fa-lg activable {{#if system.knownLimit}}fa-solid fa-square-check{{else}}fa-regular fa-square{{/if}}" data-path="system.knownLimit"></a>
      </div>

      {{!-- Spell Lists --}}
      <div class="sub-header margin-top-10">
        <span>{{localize "dc20rpg.item.sheet.spell.spellLists"}}</span>
      </div>
      <div class="properties">
        <div class="grid grid-3col grid-gap-5 margin-top-3">
          {{#each system.spellLists as |list key|}}
            <a class="activable-box activable {{#if list.active}}active{{/if}}"
                  data-path="system.spellLists.{{key}}.active"
            >{{labelFromKey key @root.config.DROPDOWN_DATA.spellLists}}
            </a>
          {{/each}}
        </div>
      </div>

      {{!-- Spell Components --}}
      <div class="sub-header margin-top-10">
        <span>{{localize "dc20rpg.item.sheet.spell.components"}}</span>
      </div>
      <div class="properties">
        <div class="grid grid-3col grid-gap-5 margin-top-3">
          {{#each system.components as |component key|}}
            <a class="component activable-box activable {{#if component.active}}active{{/if}}"
                  data-path="system.components.{{key}}.active"
            >{{labelFromKey key @root.config.DROPDOWN_DATA.components}}
            </a>
          {{/each}}
        </div>
      </div>
      {{#if system.components.material.active}}
      <div class="row margin-top-5">
        <span>{{localize "dc20rpg.item.sheet.spell.material"}} </span>
        <input class="formula" type="text" name="system.components.material.description" value="{{system.components.material.description}}" placeholder="-">
      </div>
      <div class="row margin-top-5">
        <span>{{localize "dc20rpg.item.sheet.spell.materialCost"}} </span>
        <input class="small-input" type="text" name="system.components.material.cost" value="{{system.components.material.cost}}" data-dtype="Number" placeholder="-">
      </div>
      <div class="row margin-top-5">
        <span>{{localize "dc20rpg.item.sheet.spell.materialConsume"}}</span>
        <a class="{{#if system.components.material.consumed}}fa-solid fa-square-check{{else}}fa-regular fa-square{{/if}} fa-lg activable" data-path="system.components.material.consumed"></a>
      </div>
      {{/if}}
      {{PARTIAL "Basic Config"}}

      {{!-- Spell Tags (Not yet implemented) --}}
      {{!-- <div class="sub-header margin-top-10">
        <span>{{localize "dc20rpg.item.sheet.spell.tags"}}</span>
      </div>
      <div class="properties">
        <div class="grid grid-4col grid-gap-5 margin-top-3">
          {{#each system.tags as |tag key|}}
            <a class="component activable-box activable {{#if tag.active}} active {{/if}}"
                  data-path="system.tags.{{key}}.active"
            >{{labelFromKey key @root.config.spellTags}}
            </a>
          {{/each}}
        </div>
      </div> --}}
    </div>

    {{PARTIAL "Roll"}}
    {{PARTIAL "Advanced"}}
  </section>
</form>