foundryvtt-frostgrave/templates/actor/partials/actor-tab-spells.html

<div class="tab spells container is-fluid" data-group="primary" data-tab="spells">

    <div class="field is-horizontal">
        <div class="field-body">
          <div class="field is-expanded">
            <div class="field has-addons">
              <p class="control">
                <a class="button is-static">
                    Empowerment
                </a>
              </p>
              <p class="control is-expanded">
                <input class="input" type="text" name="data.empowerment" value="{{data.data.empowerment}}"
                data-dtype="Number">
              </p>
            </div>      
          </div>
        </div>
      </div>
      

    {{#each spells as |item id|}}
    <div class="box item-card my-2 py-2" data-item-id="{{item._id}}">
        <div class="media">
            <div class="media-left">
                <figure class="image is-square">
                    <img class="is-cover" src="{{item.img}}" title="{{item.name}}">
                </figure>


                <nav class="media-center">
                    <div class="field has-addons">
                        <p class="control">
                            <button class="button is-small item-edit">
                                <span class="icon is-small">
                                    <i class="fas fa-edit"></i>
                                </span>
                            </button>
                        </p>
                        <p class="control">
                            <button class="button is-small item-delete">
                                <span class="icon is-small">
                                    <i class="fas fa-times"></i>
                                </span>
                            </button>
                        </p>
                    </div>
                </nav>

            </div>
            <div class="media-content">
                <div class="is-capitalized is-size-5 has-text-weight-bold">{{item.name}}</div>

                <div class="field is-grouped is-grouped-multiline">

                    <div class="control">
                        <div class="tags has-addons">
                            <span class="tag is-dark">{{item.data.data.school}}</span>
                            <span class="tag is-light">{{item.data.data.category}}</span>
                        </div>
                    </div>

                    <div class="control">
                            <span class="tag is-primary is-light">{{item.data.data.alignment}}</span>
                    </div>

                    <div class="control">
                        <div class="tags has-addons">
                            <span class="tag is-info">BCN</span>
                            <span class="tag is-info is-light">{{item.data.data.bcn}}</span>
                        </div>
                    </div>

                    {{#if (ne item.data.data.improved 0)}}
                    <div class="control">
                        <div class="tags has-addons">
                            <span class="tag is-info">Improved</span>
                            <span class="tag is-info is-light">{{item.data.data.improved}}</span>
                        </div>
                    </div>
                    {{/if}}


                </div>
                <div class="media-content">{{{item.data.data.description}}}</div>

                <button class="button is-info is-outlined is-fullwidth rollable is-capitalized mt-2"
                    data-spell="1d20" data-label="{{name}}" data-bcn="{{item.data.data.bcn}}"
                    data-improved="{{item.data.improved}}" data-alignment="{{item.data.data.alignment}}"
                    data-empowerment="{{data.empowerment}}" data-description="{{item.data.data.description}}">
                    <span class="icon">
                        <i class="fas fa-dice-d20"></i>
                    </span>
                    <span>
                        Cast {{name}}
                    </span>
                </button>


            </div>

        </div>

    </div>
    {{/each}}

    <button class="button is-outlined is-fullwidth item-create mb-4" data-type="spell">
        <span class="icon is-small">
            <i class="fas fa-plus"></i>
        </span>
        <span>Add Spell</span>
    </button>
</div>