foundry-sw5e/templates/actors/parts/actor-spellbook.html

<div class="inventory-filters powerbook-filters flexrow">
    <div class="form-group powercasting-ability">
        {{#unless isNPC}}
        <label>{{localize "SW5E.Powercasting"}}</label>
        {{else}}
        <label>{{localize "SW5E.Level"}}</label>
        <input class="powercasting-level" type="text" name="data.details.powerLevel"
               value="{{data.details.powerLevel}}" data-dtype="Number" placeholder="0"/>
        {{/unless}}
        <select name="data.attributes.powercasting" data-type="String">
            {{#select data.attributes.powercasting}}
            <option value="">{{localize "SW5E.None"}}</option>
            {{#each data.abilities as |abl a|}}
            <option value="{{a}}">{{abl.label}}</option>
            {{/each}}
            {{/select}}
        </select>
        <span>{{localize "SW5E.AbbreviationDC"}} {{data.attributes.powerdc}}</span>
    </div>

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

<ol class="items-list inventory-list">
{{#each powerbook as |section|}}
    <li class="items-header powerbook-header flexrow">
        <div class="item-name flexrow">
            <h3>{{section.label}}</h3>
            <div class="power-slots">
                {{#if section.usesSlots}}
                <input type="text" name="data.powers.{{section.prop}}.value" value="{{section.uses}}" placeholder="0"
                       data-dtype="Number"/>
                <span class="sep"> / </span>
                <span class="power-max" data-level="{{section.prop}}" data-slots="{{section.slots}}">
                    {{{section.slots}}}
                    {{#if ../editable}}
                    <a class="slot-max-override" title="{{localize 'SW5E.PowerProgOverride'}}">
                        <i class="fas fa-edit"></i>
                    </a>
                    {{/if}}
                </span>
                {{ else }}
                <span>{{{section.uses}}}</span>
                <span class="sep"> / </span>
                <span class="power-max">{{{section.slots}}}</span>
                {{/if}}
            </div>
        </div>
        <div class="power-school">{{localize "SW5E.PowerSchool"}}</div>
        <div class="power-action">{{localize "SW5E.PowerUsage"}}</div>
        <div class="power-target">{{localize "SW5E.PowerTarget"}}</div>

        <div class="item-controls flexrow">
            {{#if section.canCreate}}
            <a class="item-control item-create" title="{{localize 'SW5E.PowerCreate'}}" {{#each section.dataset as |v k|}}data-{{k}}="{{v}}"{{/each}}>
                <i class="fas fa-plus"></i> {{localize "SW5E.Add"}}
            </a>
            {{/if}}
        </div>
    </li>

    <ol class="item-list">
    {{#each section.powers as |item i|}}
        <li class="item flexrow" data-item-id="{{item._id}}">
            <div class="item-name flexrow rollable">
                <div class="item-image" style="background-image: url('{{item.img}}')"></div>
                <h4>{{item.name}}</h4>
                {{#if item.data.uses.per }}
                <div class="item-detail power-uses">Uses {{item.data.uses.value}} / {{item.data.uses.max}}</div>
                {{/if}}
                <div class="power-comps">
                    {{#each labels.components}}
                    <span class="power-component {{this}}">{{this}}</span>
                    {{/each}}
                </div>
            </div>
            <div class="power-school">{{labels.school}}</div>
            <div class="power-action">{{labels.activation}}</div>
            <div class="power-target" title="{{localize 'SW5E.Range'}}: {{labels.range}}">
                {{#if labels.target}}
                {{labels.target}}
                {{else}}{{localize 'SW5E.None'}}
                {{/if}}
            </div>

            {{#if ../../owner}}
            <div class="item-controls flexrow">
                {{#if section.canPrepare}}
                <a class="item-control item-toggle {{item.toggleClass}}" title="{{item.toggleTitle}}"><i class="fas fa-sun"></i></a>
                {{/if}}
                <a class="item-control item-edit" title="{{localize 'SW5E.ItemEdit'}}"><i class="fas fa-edit"></i></a>
                <a class="item-control item-delete" title="{{localize 'SW5E.ItemDelete'}}"><i class="fas fa-trash"></i></a>
            </div>
            {{/if}}
        </li>
    {{/each}}
    </ol>
{{else}}
    {{#if owner}}
    {{#if filters.powerbook.size}}
    <li class="item flexrow"><p class="notes">{{localize "SW5E.FilterNoPowers"}}</p></li>
    {{else}}
    <li class="item flexrow inventory-header powerbook-header powerbook-empty">
        <div class="item-controls flexrow">
            <a class="item-control item-create" title="{{localize 'SW5E.PowerCreate'}}" data-type="power"
               data-level="{{lvl}}"><i class="fas fa-plus"></i> {{localize "SW5E.PowerAdd"}}</a>
        </div>
    </li>
    <li class="item flexrow"><p class="notes">{{localize "SW5E.NoPowerLevels"}}</p></li>
    {{/if}}
    {{/if}}
{{/each}}
</ol>