kopparhavet/templates/parts/actor/gear.html

<div class="gear-tab border grid-container" style="grid-template-rows: auto 1fr; height: 100%; border-top: none;">
    <div class="currencies border">
        <div class="header grid-container" style="grid-template-columns: auto 1fr auto 1fr;">
            <h1 style="margin-bottom: 0; grid-column: 1/5;">{{localize "CURRENCY.TITLE"}}</h1>
            <label style="margin: auto;">{{localize data.currency.shekel.label}}:</label>
            <input class="center-text" name="data.currency.shekel.value" type="number" value="{{data.currency.shekel.value}}" />
            <label style="margin: auto;">{{localize data.currency.quarter.label}}:</label>
            <input class="center-text" name="data.currency.quarter.value" type="number" value="{{data.currency.quarter.value}}" />
        </div>
    </div>
    <div class="gear border scroll-y">
        {{!-- Weapons List --}}
        <ul class="items">
            <li class="items-header flexrow">
                <div class="header-name">{{localize "ITEM.WEAPON"}}</div>
                <div>{{localize "ITEM.EQUIPPED"}}</div>
                <div class="">{{localize "ITEM.SKILL"}}</div>
                <div>{{localize "ITEM.DAMAGE"}}</div>
                <div></div>
            </li>
            <ul class="items-list">
                {{#each actor.weapons as |item id|}}
                <li class="item flexrow" data-item-id="{{item._id}}" data-ability="{{item.data.skill.value}}">
                    <div class="item-name">{{item.name}}</div>
                    <div>
                        {{#if item.data.equipable.equipped}}
                        <a class="toggle-equipped active" data-item-id="{{item._id}}" title="Equipped"><i class="fas fa-fist-raised"></i></a>
                        {{else}}
                        <a class="toggle-equipped" data-item-id="{{item._id}}" title="Equipped"><i class="fas fa-fist-raised"></i></a>
                        {{/if}}
                    </div>
                    <div class="skill-roll">
                        <div class="roll-button">
                            <div class="roll-weapon-skill rollable">{{item.data.skill.value}}</div>
                        </div>
                    </div>
                    <div class="skill-roll">
                        <div class="roll-button">
                            <div class="roll-damage rollable">{{item.data.damage.value}}</div>
                        </div>
                    </div>
                    <div class="item-controls">
                        <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
                        <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
                    </div>
                </li>
                {{/each}}
            </ul>
        </ul>

        {{!-- Armour List --}}
        <ul class="items">
            <li class="items-header flexrow">
                <div class="header-name">{{localize "ITEM.ARMOR"}}</div>
                <div>{{localize "ITEM.EQUIPPED"}}</div>
                <div>{{localize "ITEM.DEFENCE"}}</div>
                <div></div>
            </li>
            <ul class="items-list">
                {{#each actor.armor as |item id|}}
                <li class="item flexrow" data-item-id="{{item._id}}">
                    <div class="item-name">{{item.name}}</div>
                    <div>
                        {{#if item.data.equipable.equipped}}
                        <a class="toggle-equipped active" data-item-id="{{item._id}}" title="Equipped"><i class="fas fa-shield-alt"></i></a>
                        {{else}}
                        <a class="toggle-equipped" data-item-id="{{item._id}}" title="Equipped"><i class="fas fa-shield-alt"></i></a>
                        {{/if}}
                    </div>
                    {{#if item.data.helmet.value}}
                    <div>
                        {{localize item.data.helmet.label}}
                    </div>
                    {{else}}
                    <div class="skill-roll">
                        <div class="roll-button">
                            <div class="roll-armor rollable">{{item.data.defence.value}}</div>
                        </div>
                    </div>
                    {{/if}}
                    <div class="item-controls">
                        <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
                        <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
                    </div>
                </li>
                {{/each}}
            </ul>
        </ul>

        {{!-- Gear List --}}
        <ul class="items">
            <li class="items-header flexrow">
                <div class="header-name">{{localize "ITEM.GEAR"}}</div>
                <div>{{localize "ITEM.QUANTITY"}}</div>
                <div></div>
            </li>

            <ul class="items-list">
                {{#each actor.gear as |item id|}}
                <li class="item flexrow" data-item-id="{{item._id}}">
                    <div class="item-name">{{item.name}}</div>
                    <div class="item-quantity">
                        <div class="quantity increase"><i class="far fa-plus-square"></i></div>
                        {{item.data.quantity.value}}
                        <div class="quantity decrease"><i class="far fa-minus-square"></i></div>
                    </div>
                    <div class="item-controls">
                        <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
                        <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
                    </div>
                </li>
                {{/each}}
            </ul>
        </ul>
    </div>
</div>