kopparhavet/templates/parts/actor/talent.html

<div class="talent-tab border grid-container" style="grid-template-columns: 1fr 1fr; border-top: none;">
    <div class="talents border">
        <h1 class="item-list-header">{{localize "ITEM.TALENT"}}</h1>

        <div class="scroll-y" style="height: calc(100% - 20px);">
            <ul class="items">
                <ul class="items-list">
                    {{#each actor.talents as |talent key|}}
                    <li class="item flexrow" data-item-id="{{talent._id}}">
                        <div class="item-name">{{talent.name}}</div>
                        <div class="item-controls">
                            <a class="item-control item-edit" data-parent=".item" title="Edit Item"><i class="fas fa-edit"></i></a>
                            <a class="item-control item-delete" data-parent=".item" title="Delete Item"><i class="fas fa-trash"></i></a>
                        </div>
                    </li>
                    {{/each}}
                </ul>
            </ul>
        </div>
    </div>
    <div class="spells border">
        <h1 class="item-list-header">{{localize "ITEM.SPELL"}}</h1>

        <div class="scroll-y" style="height: calc(100% - 20px);">
            <ul class="items">
                <ul class="items-list">
                    {{#each actor.spells as |spell key|}}
                    <li class="item flexrow" data-item-id="{{spell._id}}">
                        <div class="item-name">{{spell.name}}</div>
                        <div class="cost roll-spell-cost rollable">{{spell.data.cost.value}}</div>
                        <div class="difficulty">{{rollDifficulty spell.data.difficulty.value}}</div>
                        <div class="item-controls">
                            <a class="item-control item-edit" data-parent=".item" title="Edit Item"><i class="fas fa-edit"></i></a>
                            <a class="item-control item-delete" data-parent=".item" title="Delete Item"><i class="fas fa-trash"></i></a>
                        </div>
                    </li>
                    {{/each}}
                </ul>
            </ul>
        </div>
    </div>
</div>