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

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

    {{#each gear 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.category}}</span>
                            {{#if (ne item.data.subcategory "None")}}
                            <span class="tag is-light">{{item.data.data.subcategory}}</span>
                            {{/if}}
                        </div>
                    </div>

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

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

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

                    {{#if (and (ne item.data.data.effect "") (ne item.data.data.effect null))}}
                    <div class="control">
                        <div class="tags has-addons">
                            <span class="tag is-primary">Effect</span>
                            <span class="tag is-primary is-light">{{item.data.effect}}</span>
                        </div>
                    </div>
                    {{/if}}

                    {{#if (ne item.data.data.price null)}}
                    <div class="control">
                        <div class="tags has-addons">
                            <span class="tag is-warning">Price</span>
                            <span class="tag is-warning is-light">{{item.data.data.price}}</span>
                        </div>
                    </div>
                    {{/if}}

                    {{#if (ne item.data.data.sale null)}}
                    <div class="control">
                        <div class="tags has-addons">
                            <span class="tag is-warning">Sale</span>
                            <span class="tag is-warning is-light">{{item.data.data.sale}}</span>
                        </div>
                    </div>
                    {{/if}}

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

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

</div>