<form data-tooltip-class="pf2e">
    <header class="sheet-header">
        <h1>
            {{entry.name}}
            {{#with entry.flexibleAvailable as |available|}}
                <div class="flexible-available">
                    {{localize "PF2E.SpellFlexibleAvailable" value=available.value max=available.max}}
                </div>
            {{/with}}
        </h1>
        <p class="hint">
            {{#if entry.isFlexible}}
                {{localize "PF2E.Actor.Creature.SpellPreparation.HintFlexible"}}
            {{else}}
                {{localize "PF2E.Actor.Creature.SpellPreparation.Hint"}}
            {{/if}}
        </p>

        <div class="search">
            <input type="search" spellcheck="false" placeholder="{{localize "PF2E.Actor.Creature.SpellPreparation.Search"}}" />
        </div>
    </header>

    <section class="sheet-content">
        <ol class="spell-list{{#if entry.isFlexible}} flexible{{/if}}" data-entry-id="{{entry.id}}">
            {{#unless entry.prepList}}
                {{#if @root.editable}}
                    <li class="spellbook-header spellbook-empty">
                        <h4>{{localize "PF2E.SpellSlotEmpty"}}</h4>
                        <a
                            data-action="create-spell"
                            data-tooltip="PF2E.CreateSpellTitle"
                            data-type="spell"
                            data-location="{{entry.id}}"
                        ><i class="fa-solid fa-plus fa-fw"></i>{{localize "PF2E.AddSpellTitle"}}</a>
                        <a
                            data-action="browse-spells"
                            data-tooltip="PF2E.OpenSpellBrowserTitle"
                            data-location="{{entry.id}}"
                        ><i class="fa-solid fa-magnifying-glass fa-fw"></i>{{localize "PF2E.OpenSpellBrowserTitle"}}</a>
                    </li>
                {{/if}}
            {{/unless}}
            {{#each entry.prepList as |spells rank|}}
                {{#if (lte rank @root.maxRank)}}
                    <li class="header-row">
                        <div class="item-name">
                            {{#if (gt rank 0)}}
                                {{localize "PF2E.Item.Spell.Rank.Ordinal" rank=(ordinal rank)}}
                            {{else}}
                                {{localize "PF2E.Actor.Creature.Spellcasting.Cantrips"}}
                            {{/if}}
                        </div>

                        <div class="defense">{{localize "PF2E.Item.Spell.Defense.Label"}}</div>

                        <div class="range">{{localize "PF2E.TraitRange"}}</div>

                        <div class="item-controls">
                            {{#if @root.editable}}
                                <a
                                    data-action="create-spell"
                                    data-tooltip="PF2E.CreateSpellTitle"
                                    data-type="spell"
                                    data-group-id="{{#if (eq rank "0")}}cantrips{{else}}{{rank}}{{/if}}"
                                    data-location="{{entry.id}}"
                                ><i class="fa-solid fa-plus fa-fw"></i></a>
                                <a
                                    data-action="browse-spells"
                                    data-tooltip="PF2E.OpenSpellBrowserTitle"
                                    data-category="{{#if (eq rank "0")}}cantrip{{else}}spell{{/if}}"
                                    data-rank="{{#if (eq rank "0")}}1{{else}}{{rank}}{{/if}}"
                                    data-location="{{entry.id}}"
                                ><i class="fa-solid fa-magnifying-glass fa-fw"></i></a>
                            {{/if}}
                        </div>
                    </li>

                    {{!-- Unprepared Spells --}}
                    {{#each spells as |item i|}}
                        <li class="item spell spellbook-item" data-item-id="{{item.spell.id}}" data-item-type="spell" draggable="true">
                            <div class="item-name">
                                <a class="item-image" data-action="spell-to-chat">
                                    <img class="item-icon" src="{{spell.img}}" />
                                    <i class="fa-solid fa-message"></i>
                                </a>
                                <h4 class="name">
                                    <a data-action="toggle-summary">{{spell.name}}</a>
                                    {{{actionGlyph spell.system.time.value}}}
                                </h4>
                            </div>

                            <div class="defense">{{spell.defense.label}}</div>

                            <div class="range">{{spell.system.range.value}}</div>

                            <div class="item-controls">
                                {{#if (and @root.entry.isFlexible (not spell.isCantrip))}}
                                    <input
                                        type="checkbox"
                                        data-action="toggle-flexible-collection"
                                        {{checked signature}}
                                        data-tooltip="{{#if signature}}PF2E.SpellCollectionRemove{{else}}PF2E.SpellCollectionAdd{{/if}}"
                                    />
                                {{/if}}

                                {{#if @root.editable}}
                                    <a data-action="edit-spell" data-tooltip="PF2E.EditItemTitle"><i class="fa-solid fa-edit fa-fw"></i></a>
                                    <a data-action="delete-spell" data-tooltip="PF2E.DeleteItemTitle"><i class="fa-solid fa-trash fa-fw"></i></a>
                                {{/if}}
                            </div>

                            <div class="item-summary" hidden></div>
                        </li>
                    {{/each}}
                {{/if}}
            {{/each}}
        </ol>
    </section>
</form>
