{{!-- Spellbook Header --}}
{{> "modules/tidy5e-sheet/templates/actors/parts/tidy5e-spellbook-header.html"}}

<div class="grid-layout">
  <ul class="inventory-list spellbook-list items-list">
    {{#each spellbook as |section|}}
    <li class="items-header spellbook-header">
      <div class="spell-level-slots">
        <h3>{{section.label}}</h3>

        {{#if section.usesSlots}}
        <div class="spell-detail spell-slots">
          <input type="text" name="data.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 ../editable}}
            <a class="slot-max-override" title="{{localize 'DND5E.SpellProgOverride'}}">
              <i class="fas fa-pencil-alt"></i>
            </a>
            {{/if}}
          </span>
        </div>
        {{/if}}

      </div>
    </li>

    <ul class="item-list">
      {{#each section.spells as |item i|}}
      <li class="item {{#if ../../owner}}context-enabled{{/if}} {{~#if section.canPrepare}} preparable{{/if}} {{~#if data.preparation.prepared}} prepared{{/if}}{{#if (eq data.preparation.mode 'always')}} alwaysPrepared{{/if}}" data-item-id="{{item._id}}">
        {{~#if item.flags.favtab}} 
        {{~#if item.flags.favtab.isFavorite}} 
          <i class="fas fa-bookmark icon-fav" title="{{localize 'TIDY5E.isFav'}}"></i>
        {{/if}}
        {{/if}}
        <div class="item-name rollable">
          <div class="item-image" style="background-image: url({{item.img}})">
            <i class="fa fa-dice-d20"></i>
          </div>
        </div>

        {{#if item.data.uses.per }}
        <div class="item-stats">
          <div class="item-detail item-charges" title="{{localize 'DND5E.Charges'}}: {{item.data.uses.value}}/{{item.data.uses.max}} ">
            {{#if item.hasUses }}
            <i class="fas fa-bolt"></i><input type="text" data-path="data.uses.value" value="{{item.data.uses.value}}" placeholder="0" maxlength="2" >
            {{/if}}
          </div>
        </div>
        {{/if}}

        <div class="info-card {{~#if item.data.preparation.prepared}} equipped {{/if}}{{#if (eq data.preparation.mode 'always')}} alwaysPrepared{{/if}}" data-item-id="{{item._id}}">
          <p class="info-card-name">{{item.name}}</p>
          <div class="info-card-states">
            <span><!-- <i class="fas fa-hat-wizard"></i><b>{{localize 'DND5E.SpellSchool'}}:</b>  -->{{labels.school}}</span>
            {{#if ../../owner}}
            {{#if section.canPrepare}}
              <span>{{item.toggleTitle}}</span>
            {{/if}}
            {{/if}}
          </div>
          <div class="info-card-amount">
            {{#if item.hasUses }}
            <span><i class="fas fa-bolt"></i><b>{{localize 'DND5E.Charges'}}:</b> {{item.data.uses.value}}/{{item.data.uses.max}}</span>
            {{/if}}
          </div>
          <div class="description-wrap">
            <div class="info-card-description">
              <!-- item description -->
            </div>
          </div>
				  <article class="mod-roll-buttons"></article>
        </div>

        {{#if ../../owner}}
        <div class="activate-context-menu">
          <i class="fas fa-ellipsis-v"></i>
        </div>
        <div class="item-controls context-menu">
          <hr class="context-divider">
          {{#if (and section.canPrepare (ne data.preparation.mode 'always')) }}
          <a class="item-control item-toggle {{item.toggleClass}}"><i class="fas fa-book icon-on"></i><i class="fas fa-book icon-off"></i> {{#if (eq item.toggleClass 'active')}}{{localize 'TIDY5E.Unprepare'}}{{else}}{{localize 'TIDY5E.Prepare'}}{{/if}}</a>
          {{/if}}
          <hr class="context-divider">
          <a class="item-control item-edit" title="{{localize 'TIDY5E.EditSpell'}}"><i class="fas fa-pencil-alt"></i> {{localize 'TIDY5E.EditSpell'}}</a>
          <hr class="context-divider">
          <a class="item-control item-delete warning" title="{{localize 'TIDY5E.DeleteSpell'}}"><i class="fas fa-trash"></i> {{localize 'TIDY5E.DeleteSpell'}}</a>
        </div>
        {{/if}}
      </li>
      {{/each}}

      {{#if section.canCreate}}
      <li class="items-footer">
        <a class="item-create" title="{{localize 'DND5E.SpellCreate'}}" {{#each section.dataset as |v k|}}data-{{k}}="{{v}}"{{/each}}>
          <i class="fas fa-plus-circle"></i>
        </a>
        {{else}}
        <!-- add button for all spell categories -->
        <a class="item-create" title="{{localize 'DND5E.SpellCreate'}}" {{#each section.dataset as |v k|}}data-{{k}}="{{v}}"{{/each}}>
          <i class="fas fa-plus-circle"></i>
        </a>
      </li>
      {{/if}}
    </ul>
    {{else}}
    {{#if owner}}
    {{#if filters.spellbook.size}}
    <li class="notice">{{localize 'DND5E.FilterNoSpells'}}</li>
    {{else}}

    <ul class="item-list">
      <li class="notice">{{localize 'DND5E.NoSpellLevels'}}</li>
      <li class="items-footer">
        <a class="item-create" title="{{localize 'DND5E.SpellCreate'}}" data-type="spell"
        data-level="{{lvl}}"><i class="fas fa-plus-circle"></i></a>
      </li>
    </ul>
    {{/if}}
    {{/if}}
    {{/each}}
  </ul>
</div>

{{!-- Spellbook Footer --}}
{{> "modules/tidy5e-sheet/templates/actors/parts/tidy5e-spellbook-footer.html"}}