{{!-- Spellcasting --}}
<section class="top">
    {{#each spellcasting}}
    <div class="spellcasting card {{#if primary}}primary{{/if}}" data-ability="{{ ability.ability }}">
        <div class="header">
            <h3>{{ label }}</h3>
            {{#if @root.isNPC}}
            {{#if (and @root.editable noSpellcaster)}}
            <select name="system.attributes.spellcasting">
                {{ selectOptions @root.abilities selected=ability.ability labelAttr="label" valueAttr="key"
                                 valueAttr="key" }}
            </select>
            {{else}}
            <span class="spellcasting-ability roboto-upper">{{ ability.label }}</span>
            {{/if}}
            {{else}}
            <button type="button" class="radio-button" data-action="spellcasting"
                    data-tooltip="DND5E.SpellAbilitySet" aria-pressed="{{#if primary}}true{{else}}false{{/if}}"
                    aria-label="{{ localize "DND5E.SpellAbilitySet" }}"></button>
            {{/if}}
        </div>
        <div class="info">
            <div class="ability">
                <span class="label">{{ localize "DND5E.Ability" }}</span>
                <span class="value">{{ dnd5e-formatModifier ability.mod }}</span>
            </div>
            <div class="attack">
                <span class="label">{{ localize "DND5E.Attack" }}</span>
                <span class="value">{{ dnd5e-formatModifier attack }}</span>
            </div>
            <div class="save">
                <span class="label">{{ localize "DND5E.SpellDC" }}</span>
                <span class="value">{{ save }}</span>
            </div>
            {{#if (or preparation.value preparation.max)}}
            <div class="prepared">
                <span class="label">{{ localize "DND5E.Prepared" }}</span>
                <span class="value {{#if preparation.max}}max-preparations{{/if}}">
                    <span class="count">{{ preparation.value }}</span>
                    {{#if preparation.max}}
                    <span class="separator">&sol;</span>
                    <span class="max">{{ preparation.max }}</span>
                    {{/if}}
                </span>
            </div>
            {{/if}}
            {{#if @root.isNPC}}
            <div class="level">
                <span class="label">{{ localize "DND5E.Level" }}</span>
                {{#if (and @root.editable noSpellcaster)}}
                {{ numberInput @root.system.attributes.spell.level name="system.attributes.spell.level" min=0 step=1
                               placeholder="—" }}
                {{else}}
                <span class="value">{{ level }}</span>
                {{/if}}
            </div>
            <div class="concentration" data-ability="concentration">
                <a class="label saving-throw {{ @root.rollableClass }}">{{ localize "DND5E.Concentration" }}</a>
                {{#if @root.editable}}
                <a class="config-button" data-action="ability" data-tooltip="{{ tooltip }}" aria-label="{{ tooltip }}">
                    <i class="fas fa-cog"></i>
                </a>
                {{else}}
                <span class="value">{{ dnd5e-formatModifier concentration.mod }}</span>
                {{/if}}
            </div>
            {{/if}}
        </div>
    </div>
    {{/each}}
</section>

{{!-- Spells --}}
<{{ elements.inventory }} class="inventory-element" v2>

    {{!-- Searching & Filtering --}}
    <item-list-controls for="spellbook" label="{{ localize "DND5E.SpellsSearch" }}" sort="multi" sort-modes="apm"
                        collection="items" keep-empty>
        <datalist>
            <option value="action">{{ localize "DND5E.Action" }}</option>
            <option value="bonus">{{ localize "DND5E.BonusAction" }}</option>
            <option value="reaction">{{ localize "DND5E.Reaction" }}</option>
            <option value="concentration">{{ localize "DND5E.Concentration" }}</option>
            <option value="ritual">{{ localize "DND5E.Ritual" }}</option>
            <option value="prepared">{{ localize "DND5E.Prepared" }}</option>
            {{#each config.spellSchools}}
            <option value="{{ @key }}">{{ label }}</option>
            {{/each}}
            {{#each actor.spellcastingClasses}}
            <option value="{{ @key }}">{{ name }}</option>
            {{/each}}
        </datalist>
    </item-list-controls>

    {{!-- Spells List --}}
    <section class="items-list spells-list" data-item-list="spellbook">

        {{!-- Sections --}}
        {{#each spellbook}}
        <div class="items-section card" {{ dnd5e-dataset dataset }}>

            {{!-- Section Header --}}
            <div class="items-header header">
                <h3 class="item-name spell-header">{{ localize label }}</h3>
                <div class="item-header item-school">{{ localize "DND5E.SpellHeader.School" }}</div>
                <div class="item-header item-usage">{{ localize "DND5E.SpellHeader.Time" }}</div>
                <div class="item-header item-range">{{ localize "DND5E.SpellHeader.Range" }}</div>
                <div class="item-header item-target">{{ localize "DND5E.SpellHeader.Target" }}</div>
                <div class="item-header item-roll">{{ localize "DND5E.SpellHeader.Roll" }}</div>
                <div class="item-header item-uses spell-uses">{{ localize "DND5E.Uses" }}</div>
                <div class="item-header item-formula spell-formula">{{ localize "DND5E.SpellHeader.Formula" }}</div>
                <div class="item-header item-controls"></div>
                {{#if (and usesSlots @root.editable)}}
                <a class="config-button" data-action="spellSlots" data-tooltip="DND5E.SpellSlotsConfig"
                   aria-label="{{ localize "DND5E.SpellSlotsConfig" }}">
                    <i class="fas fa-cog"></i>
                </a>
                {{/if}}
            </div>

            {{!-- Spell Slots --}}
            {{#if usesSlots}}
            <div class="pips" data-prop="system.spells.{{ prop }}.value">
                {{#each pips}}
                <button type="button" class="{{ classes }}" data-n="{{ n }}" data-tooltip="{{ tooltip }}"
                        aria-label="{{ label }}" aria-pressed="{{ filled }}">
                    <dnd5e-icon src="systems/dnd5e/icons/svg/spell-slot.svg"></dnd5e-icon>
                </button>
                {{/each}}
            </div>
            {{/if}}

            {{!-- Section Contents --}}
            <ol class="item-list unlist">
                {{#each spells as |item|}}
                {{#dnd5e-itemContext item as |ctx|}}

                {{!-- Spells --}}
                <li class="item collapsible {{#unless ctx.isExpanded}}collapsed{{/unless}}" data-item-id="{{ item.id }}"
                    data-entry-id="{{ item.id }}" data-uuid="{{ item.uuid }}" {{ dnd5e-dataset ctx.dataset }}>

                    <div class="item-row">

                        {{!-- Spell Name --}}
                        <div class="item-name item-action item-tooltip {{ @root.rollableClass }}" role="button"
                             data-action="use" aria-label="{{ item.name }}">
                            {{#if ctx.concentration}}
                            <i class="concentration fas fa-arrow-rotate-left fa-spin fa-spin-reverse"
                               aria-label="{{ localize "DND5E.Concentration" }}"></i>
                            {{/if}}
                            <img class="item-image gold-icon" src="{{ item.img }}" alt="{{ item.name }}"
                                 draggable="false">
                            <div class="name name-stacked">
                                <span class="title">{{ item.name }}</span>
                                <span class="subtitle">
                                    {{{ ctx.subtitle }}}
                                    {{#if ctx.hasUses}}
                                    <span class="subtitle-uses">
                                        — {{ item.system.uses.value }} &sol; {{ item.system.uses.max }}
                                    </span>
                                    {{/if}}
                                </span>
                            </div>
                            <div class="tags">
                                {{#each item.labels.components.all}}
                                {{#if tag}}
                                <span aria-label="{{ label }}">
                                    <dnd5e-icon src="{{ icon }}"></dnd5e-icon>
                                </span>
                                {{/if}}
                                {{/each}}
                            </div>
                        </div>

                        {{!-- Spell School --}}
                        <div class="item-detail item-school" data-tooltip="{{ item.labels.school }}"
                             aria-label="{{ item.labels.school }}">
                            {{#with (lookup @root.config.spellSchools item.system.school) as |schoolConfig|}}
                            <dnd5e-icon src="{{ schoolConfig.icon }}"></dnd5e-icon>
                            {{/with}}
                        </div>

                        {{!-- Cast Time --}}
                        <div class="item-detail item-usage">
                            <span class="condensed">{{ ctx.activation }}</span>
                        </div>

                        {{!-- Spell Range --}}
                        <div class="item-detail item-range {{#unless ctx.range}}empty{{/unless}}">
                            {{#if ctx.range}}
                            {{#if ctx.range.distance}}
                            {{{ ctx.range.parts }}}
                            {{else}}
                            <span class="condensed">{{ item.labels.range }}</span>
                            {{/if}}
                            {{/if}}
                        </div>

                        {{!-- Spell Target --}}
                        <div class="item-detail item-target {{#unless item.labels.target}}empty{{/unless}}">
                            {{#if item.labels.target}}
                            <span class="condensed">{{ item.labels.target }}</span>
                            {{/if}}
                        </div>

                        {{!-- Spell Attack / DC --}}
                        <div class="item-detail item-roll {{#if (and (not ctx.save.ability) (eq ctx.toHit null))}}empty{{/if}}">
                            {{#if ctx.toHit}}
                            <span class="value">{{ dnd5e-formatModifier ctx.toHit }}</span>
                            {{else if ctx.save.ability}}
                            <div class="stacked">
                                <span class="ability">{{ ctx.save.ability }}</span>
                                <span class="value">{{ ctx.save.dc.value }}</span>
                            </div>
                            {{/if}}
                        </div>

                        {{!-- Spell Uses --}}
                        <div class="item-detail item-uses spell-uses
                             {{#unless (or ctx.hasUses ctx.linkedUses)}}empty{{/unless}}">
                            {{#if ctx.hasUses}}
                            <input type="text" value="{{ item.system.uses.value }}" placeholder="0" data-dtype="Number"
                                   data-name="system.uses.value" inputmode="numeric" pattern="[+=\-]?\d*">
                            <span class="separator">&sol;</span>
                            <span class="max">{{ item.system.uses.max }}</span>
                            {{else if ctx.linkedUses}}
                            <span class="value">{{ ctx.linkedUses.value }}</span>
                            <span class="separator">&sol;</span>
                            <span class="max">{{ ctx.linkedUses.max }}</span>
                            {{/if}}
                        </div>

                        {{!-- Spell Formula --}}
                        <div class="item-detail item-formula spell-formula {{#unless item.labels.damages}}empty{{/unless}}">
                            {{#each item.labels.damages}}
                            <div class="row">
                                <span class="formula">{{ formula }}</span>
                                {{#with (lookup @root.labels.damageAndHealing damageType)}}
                                <span data-tooltip="{{ label }}" aria-label="{{ label }}">
                                    <dnd5e-icon src="{{ icon }}"></dnd5e-icon>
                                </span>
                                {{/with}}
                            </div>
                            {{/each}}
                        </div>

                        {{!-- Spell Status --}}
                        <div class="item-detail item-controls">

                            {{#if @root.editable}}
                            {{!-- Editing --}}
                            <a class="item-control item-action" data-action="edit" data-tooltip="DND5E.ItemEdit"
                               aria-label="{{ localize "DND5E.ItemEdit" }}">
                                <i class="fas fa-pen-to-square"></i>
                            </a>

                            {{!-- Deleting --}}
                            {{#if item.canDelete}}
                            <a class="item-control item-action" data-action="delete" data-tooltip="DND5E.ItemDelete"
                               aria-label="{{ localize "DND5E.ItemDelete" }}">
                                <i class="fas fa-trash"></i>
                            </a>
                            {{/if}}
                            {{else if @root.owner}}
                            {{!-- Preparing --}}
                            {{#with ctx.preparation}}
                            {{#if applicable}}
                            <a class="item-control item-action {{ cls }}" data-action="prepare"
                               data-tooltip="{{ title }}" aria-label="{{ title }}" aria-disabled="{{ this.disabled }}">
                                {{{ icon }}}
                            </a>
                            {{/if}}
                            {{/with}}
                            {{/if}}

                            {{!-- Expand/Collapse --}}
                            <a class="item-control interface-only" data-toggle-description
                               aria-label="{{ localize "DND5E.ToggleDescription" }}">
                                {{#if ctx.isExpanded}}
                                <i class="fas fa-compress"></i>
                                {{else}}
                                <i class="fas fa-expand"></i>
                                {{/if}}
                            </a>

                            {{!-- Context Menu --}}
                            <a class="item-control interface-only" data-context-menu
                               aria-label="{{ localize "DND5E.AdditionalControls" }}">
                                <i class="fas fa-ellipsis-vertical"></i>
                            </a>

                        </div>

                    </div>

                    <div class="item-description collapsible-content">
                        <div class="wrapper">

                            {{!-- Activities --}}
                            {{#if ctx.activities.length}}
                            <div class="activities">
                                {{#each ctx.activities}}
                                {{> "dnd5e.activity-row-summary" categories=../../categories }}
                                {{/each}}
                            </div>
                            {{/if}}

                            {{!-- Item Description --}}
                            {{#if ctx.isExpanded}}
                            {{> "dnd5e.item-summary" ctx.expanded }}
                            {{/if}}
                        </div>
                    </div>

                </li>

                {{/dnd5e-itemContext}}
                {{/each}}
            </ol>

        </div>
        {{/each}}

    </section>

</{{ elements.inventory }}>
