<{{elements.inventory}} class="inventory-element">
  <div class="inventory-filters spellbook-filters flexrow">
    <div class="form-group spellcasting-ability">
        {{#unless isNPC}}
        <label>{{localize "DND5E.Spellcasting"}}</label>
        {{else}}
        <label>{{localize "DND5E.Level"}}</label>
        {{numberInput system.attributes.spell.level name="system.attributes.spell.level" class="spellcasting-level"
                      placeholder="0" min=0 step=1 disabled=classSpellcasting}}
        {{/unless}}
        <select name="system.attributes.spellcasting" data-type="String">
            {{ selectOptions config.abilities selected=system.attributes.spellcasting labelAttr="label"
                             blank=(localize "DND5E.None") }}
        </select>
        <span>{{localize "DND5E.AbbreviationDC"}} {{system.attributes.spell.dc}}</span>
    </div>

    <ul class="filter-list flexrow" data-filter="spellbook">
        <li class="filter-item" data-filter="action">{{localize "DND5E.Action"}}</li>
        <li class="filter-item" data-filter="bonus">{{localize "DND5E.BonusAction"}}</li>
        <li class="filter-item" data-filter="reaction">{{localize "DND5E.Reaction"}}</li>
        <li class="filter-item" data-filter="concentration">{{localize "DND5E.AbbreviationConc"}}</li>
        <li class="filter-item" data-filter="ritual">{{localize "DND5E.Ritual"}}</li>
        <li class="filter-item" data-filter="prepared">{{localize "DND5E.Prepared"}}{{#if preparedSpells}} ({{preparedSpells}}){{/if}}</li>
    </ul>
  </div>

  <ol class="items-list inventory-list">
  {{#each spellbook as |section|}}
    <li class="items-header spellbook-header flexrow" {{ dnd5e-dataset section.dataset }}>
        <div class="item-name flexrow">
            <h3>{{section.label}}</h3>
            <div class="spell-slots">
                {{#if section.usesSlots}}
                <input type="text" name="system.spells.{{section.prop}}.value" value="{{section.uses}}" placeholder="0"
                       data-dtype="Number">
                <span class="sep"> / </span>
                <span class="spell-max" data-level="{{section.prop}}" data-slots="{{section.slots}}">
                    {{{section.slots}}}
                    {{#if section.editable}}
                    <a class="slot-max-override" data-tooltip="DND5E.SpellProgOverride">
                        <i class="fas fa-edit"></i>
                    </a>
                    {{/if}}
                </span>
                {{ else }}
                <span>{{{section.uses}}}</span>
                <span class="sep"> / </span>
                <span class="spell-max">{{{section.slots}}}</span>
                {{/if}}
            </div>
        </div>
        <div class="spell-school">{{localize "DND5E.SpellSchool"}}</div>
        <div class="spell-action">{{localize "DND5E.SpellUsage"}}</div>
        <div class="spell-target">{{localize "DND5E.SpellTarget"}}</div>

        <div class="item-controls flexrow">
            {{#if section.canCreate}}
            <a class="item-control item-action" data-action="create" data-tooltip="DND5E.SpellCreate">
                <i class="fas fa-plus"></i> {{localize "DND5E.Add"}}
            </a>
            {{/if}}
        </div>
    </li>

    <ol class="item-list">
    {{#each section.spells as |item i|}}
    {{#dnd5e-itemContext item as |ctx|}}
        <li class="item flexrow {{#if ctx.isExpanded}}expanded{{/if}}" data-item-id="{{item.id}}">
            <div class="item-name flexrow rollable">
                <div class="item-image item-action" data-action="use" tabindex="0" role="button"
                     aria-label="{{item.name}}" style="background-image: url('{{item.img}}')"></div>
                <h4 class="item-action" data-action="toggleExpand">{{item.name}}</h4>
                {{#if item.hasLimitedUses}}
                <div class="item-detail spell-uses">
                  {{localize "DND5E.Uses"}} {{#if item.system.uses.value}}{{item.system.uses.value}}{{else}}0{{/if}} / {{item.system.uses.max}}
                </div>
                {{/if}}
                <div class="spell-comps">
                    {{#each item.labels.components.all}}
                    <span class="spell-component{{#if tag}} tag{{/if}}">{{abbr}}</span>
                    {{/each}}
                </div>
            </div>
            <div class="spell-school">{{item.labels.school}}</div>
            <div class="spell-action">{{item.labels.activation}}</div>
            <div class="spell-target" data-tooltip="{{localize 'DND5E.Range'}}: {{item.labels.range}}">
                {{#if item.labels.target}}
                {{item.labels.target}}
                {{else}}{{localize 'DND5E.None'}}
                {{/if}}
            </div>

            {{#if @root.owner}}
            <div class="item-controls flexrow">
                {{#if section.canPrepare}}
                <a class="item-control item-action {{ctx.toggleClass}}" data-action="prepare"
                   data-tooltip="{{ctx.toggleTitle}}">
                    <i class="fas fa-sun"></i>
                </a>
                {{/if}}
                <a class="item-control item-action" data-action="edit" data-tooltip="DND5E.ItemEdit">
                    <i class="fas fa-edit"></i>
                </a>
                <a class="item-control item-action" data-action="delete" data-tooltip="DND5E.ItemDelete">
                    <i class="fas fa-trash"></i>
                </a>
            </div>
            {{/if}}

            {{#if ctx.isExpanded}}
                {{> "dnd5e.item-summary" (lookup @root.expandedData item.id)}}
            {{/if}}
        </li>
    {{/dnd5e-itemContext}}
    {{/each}}
    </ol>
  {{else}}
    {{#if owner}}
    {{#if filters.spellbook.size}}
    <li class="item flexrow"><p class="notes">{{localize "DND5E.FilterNoSpells"}}</p></li>
    {{else}}
    <li class="item flexrow inventory-header spellbook-header spellbook-empty" data-type="spell" data-level="{{lvl}}">
        <div class="item-controls flexrow">
            <a class="item-control item-action" data-action="create" data-tooltip="DND5E.SpellCreate">
                <i class="fas fa-plus"></i> {{localize "DND5E.SpellAdd"}}
            </a>
        </div>
    </li>
    <li class="item flexrow"><p class="notes">{{localize "DND5E.NoSpellLevels"}}</p></li>
    {{/if}}
    {{/if}}
  {{/each}}
  </ol>
</{{elements.inventory}}>
