<section class="tab {{tabs.spells.id}} {{tabs.spells.cssClass}}"
         data-tab="{{tabs.spells.id}}"
         data-group="{{tabs.spells.group}}">

    <div>
    <div class="tab-resources">

        <div class="astralpoints">
            <label>AsP:</label>
            <input type="number" name="system.asp.aktuell" value="{{system.asp.aktuell}}"/>
            <span class="inline">von</span>
            <input type="number" disabled value="{{derived.asp.max}}"/>
        </div>
        <div class="mr">
            <label>MR: </label>
            <input type="number" disabled value="{{derived.mr.aktuell}}"/>
        </div>
    </div>

    <table>
        <thead>
        <tr>
            <th class="die-column"></th>
            <th>Zaubername</th>
            <th colspan="3">Probe</th>
            <th>ZfW</th>
            <th>Merkmale</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        {{#each this.spells}}
            <tr>
                <td class="spell rollable" data-action="castSpell" data-item-id="{{this.id}}">
                    {{> 'systems/DSA_4-1/templates/ui/partial-die.hbs' }}
                </td>
                <td class="clickable" data-item-id="{{this.id}}" data-action="openSpellDialog">
                    <span>{{this.name}}</span></td>
                <td>{{this.eigenschaft1}}</td>
                <td>{{this.eigenschaft2}}</td>
                <td>{{this.eigenschaft3}}</td>
                <td>{{this.zfw}}</td>
                <td>
                    <ul class="merkmal-list">{{#each this.merkmal}}
                        <li>{{this}}</li>{{/each}}</ul>
                </td>
                <td>
                    <div data-action="toggleFav" data-item-id="{{this.id}}">
                        {{#if this.fav}}
                            <i class="fa-solid fa-star"></i>
                        {{else}}
                            <i class="fa-regular fa-star"></i>
                        {{/if}}
                    </div>
                </td>
            </tr>
        {{/each}}
        </tbody>
    </table>
    </div>
</section>