{{!-- Liste des sorts --}}
<div class="spells">
  <header class="items-header flexrow">
    <h3>{{localize "MYRIAD_SYSTEM.SheetLabels.Spells"}}</h3>
    <div class="item-controls">
      <a class="item-control item-create" title="{{localize 'Create Spell'}}" data-type="spell">
        <i class="fas fa-plus"></i>
      </a>
    </div>
  </header>

  {{!-- Grouper les sorts par grade (I à V) --}}
  {{#each ../spells as |spells grade|}}
  <div class="spell-grade">
    <h4>{{localize "MYRIAD_SYSTEM.Grade.label"}} {{grade}}</h4>
    <ol class="items-list">
      {{#each spells as |spell|}}
      <li class="item flexrow" data-item-id="{{spell._id}}">
        <div class="item-header flexrow">
          <div class="item-image">
            <img src="{{spell.img}}" title="{{spell.name}}" width="24" height="24"/>
          </div>
          <h4 class="item-name">{{spell.name}}</h4>

          {{#if spell.system.tags}}
          <div class="item-tags">
            {{#each spell.system.tags}}
            <span class="tag">{{this}}</span>
            {{/each}}
          </div>
          {{/if}}

          <div class="spell-cost">
            <span class="cost">{{spell.system.magicPointCost}} {{localize "MYRIAD_SYSTEM.Usage.costTypes.magic"}}</span>
          </div>

          <div class="item-controls">
            <a class="item-control item-toggle" title="{{#if expanded}}{{localize 'Collapse'}}{{else}}{{localize 'Expand'}}{{/if}}">
              <i class="fas {{#if expanded}}fa-chevron-up{{else}}fa-chevron-down{{/if}}"></i>
            </a>
            <a class="item-control item-edit" title="{{localize 'Edit'}}"><i class="fas fa-edit"></i></a>
            <a class="item-control item-delete" title="{{localize 'Delete'}}"><i class="fas fa-trash"></i></a>
          </div>
        </div>

        {{#if expanded}}
        <div class="item-description">
          {{{spell.system.description}}}
        </div>
        {{/if}}
      </li>
      {{/each}}
    </ol>
  </div>
  {{/each}}
</div>