{{! Magic Tab }}
<section
  class='tab magic scrollable {{tab.cssClass}}'
  data-group='primary'
  data-tab='magic'
>
  <ol class='items-list'>
    {{#each spells as |spells spellLevel|}}
      <li class='item flexrow items-header'>
        <div class='item-name'>
          {{localize 'SR3.Item.Spell.SpellLVL' level=spellLevel}}
        </div>
        <div class='item-controls'>
          {{#if @root.editable}}
            <a
              class='item-control item-create'
              title='{{localize "DOCUMENT.Create" type='Spell'}}'
              data-action='createDoc'
              data-document-class='Item'
              data-type='spell'
              data-system.spell-level='{{spellLevel}}'
            >
              <i class='fa-solid fa-plus'></i>
              {{localize 'SR3.Item.Spell.AddLVL' level=spellLevel}}
            </a>
          {{/if}}
        </div>
      </li>
      {{#each spells as |item id|}}
        <li
          class='item flexrow'
          data-item-id='{{item._id}}'
          data-drag='true'
          data-document-class='Item'
        >
          <div class='item-name flexrow'>
            <div class='item-image'>
              <a class='rollable' data-roll-type='item' data-action='roll'>
                <img
                  src='{{item.img}}'
                  title='{{item.name}}'
                  width='24'
                  height='24'
                />
              </a>
            </div>
            <div>{{item.name}}</div>
          </div>
          <div class='item-controls'>
            <a
              class='item-control item-edit'
              title='{{localize "DOCUMENT.Update" type='spell'}}'
              data-action='viewDoc'
            >
              <i class='fa-solid fa-edit'></i>
            </a>
            {{#if @root.editable}}
              <a
                class='item-control item-delete'
                title='{{localize "DOCUMENT.Delete" type='spell'}}'
                data-action='deleteDoc'
              >
                <i class='fa-solid fa-trash'></i>
              </a>
            {{/if}}
          </div>
        </li>
      {{/each}}
    {{/each}}
  </ol>

</section>