ds4/src/templates/actor/partials/items.hbs

{{!-- TODO: For items list: only show header, if list is not empty --}}
{{!-- TODO: Reduce code duplications --}}
{{!-- TODO: Change from flex layout to grid layout --}}
{{!-- Tab with overview and quick-actions on owned items --}}
<div class="tab items" data-group="primary" data-tab="items">

    {{!-- WEAPONS --}}
    <h4 class="items-list-title">{{localize 'DS4.ItemTypeWeapon'}}</h4> {{!-- SPECIFIC --}}
    <ol class="items-list">
        <li class="item flexrow item-header">
            <div class="flexrow flex15">
                <div title="{{localize 'DS4.ItemEquipped'}}">E</div> {{!-- equipped --}} {{!-- SPECIFIC --}}
                <div class="item-image"></div>
                <div class="item-num-val" title="{{localize 'DS4.Quantity'}}">#</div> {{!-- amount --}}
            </div>
            <div class="item-name flex3">{{localize 'DS4.ItemName'}}</div>
            <div title="{{localize 'DS4.AttackType'}}">{{localize 'DS4.AttackTypeAbbr'}}</div> {{!-- SPECIFIC --}}
            <div class="flexrow flex15">
                <div class="item-num-val" title="{{localize 'DS4.WeaponBonus'}}">{{localize 'DS4.WeaponBonusAbbr'}}
                </div> {{!-- SPECIFIC --}}
                <div class="item-num-val" title="{{localize 'DS4.OpponentDefense'}}">{{localize
                    'DS4.OpponentDefenseAbbr'}}</div> {{!-- SPECIFIC --}}
            </div>
            <div class="flex4">{{localize 'DS4.Description'}}</div>
            {{!-- add button --}}
            <div class="item-controls"> {{!-- SPECIFIC --}}
                <a class="item-control item-create" title="Create item" data-type="weapon" {{!-- SPECIFIC --}}>
                    <i class="fas fa-plus"></i>
                    {{localize 'DS4.UserInteractionAddItem'}}</a>
            </div>
        </li>
        {{#each itemsByType.weapon as |item id|}} {{!-- SPECIFIC --}}
        {{#with item.data.data as |itemData|}}
        <li class="item flexrow" data-item-id="{{item._id}}">
            <div class="flexrow flex15">
                {{!-- equipped? --}}
                {{#if itemData.equipped}}<i class="fas fa-check-square"></i>
                {{else}}<i class="far fa-square"></i>
                {{/if}} {{!--SPECIFIC --}}
                {{!-- image --}}
                <div class="item-image">
                    <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
                </div>
                {{!-- amount --}}
                <div class="item-num-val">{{itemData.quantity}}</div>
            </div>
            {{!-- name --}}
            <h4 class="item-name flex3">{{item.name}}</h4>
            {{!-- item specifics --}}
            <div>
                <img src="{{lookup ../../config.attackTypesIcons itemData.attackType}}"
                    title="{{lookup ../../config.attackTypes itemData.attackType}}" width="24" height="24" />
            </div> {{!-- SPECIFIC --}}
            <div class="flexrow flex15">
                <div class="item-num-val">{{itemData.weaponBonus}}</div> {{!-- SPECIFIC --}}
                <div class="item-num-val">{{itemData.opponentDefense}}</div> {{!-- SPECIFIC --}}
            </div>
            {{!-- description --}}
            <div class="flex4 item-description">{{{itemData.description}}}</div>
            {{!-- edit & delete buttons --}}
            <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>
        {{/with}}
        {{/each}}
    </ol>

    {{!-- ARMOR --}}
    <h4 class="items-list-title">{{localize 'DS4.ItemTypeArmor'}}</h4> {{!-- SPECIFIC --}}
    <ol class="items-list">
        <li class="item flexrow item-header">
            <div class="flexrow flex15">
                <div title="{{localize 'DS4.ItemEquipped'}}">E</div> {{!-- equipped --}} {{!-- SPECIFIC --}}
                <div class="item-image"></div>
                <div class="item-num-val" title="{{localize 'DS4.Quantity'}}">#</div> {{!-- amount --}}
            </div>
            <div class="item-name flex3">{{localize 'DS4.ItemName'}}</div>
            <div title="{{localize 'DS4.ArmorMaterialType'}}">{{localize 'DS4.ArmorMaterialTypeAbbr'}}</div> {{!--
            SPECIFIC --}}
            <div title="{{localize 'DS4.ArmorType'}}">{{localize 'DS4.ArmorTypeAbbr'}}</div> {{!-- SPECIFIC --}}
            <div class="flex05 item-num-val" title="{{localize 'DS4.ArmorValue'}}">
                {{localize 'DS4.ArmorValueAbbr'}}
            </div> {{!-- SPECIFIC --}}
            <div class="flex3">{{localize 'DS4.Description'}}</div>
            {{!-- add button --}}
            <div class="item-controls"> {{!-- SPECIFIC --}}
                <a class="item-control item-create" title="Create item" data-type="armor" {{!-- SPECIFIC --}}>
                    <i class="fas fa-plus"></i>
                    {{localize 'DS4.UserInteractionAddItem'}}</a>
            </div>
        </li>
        {{#each itemsByType.armor as |item id|}} {{!-- SPECIFIC --}}
        {{#with item.data.data as |itemData|}}
        <li class="item flexrow" data-item-id="{{item._id}}">
            <div class="flexrow flex15">
                {{!-- equipped? --}}
                {{#if itemData.equipped}}<i class="fas fa-check-square"></i>
                {{else}}<i class="far fa-square"></i>
                {{/if}} {{!--SPECIFIC --}}
                {{!-- image --}}
                <div class="item-image">
                    <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
                </div>
                {{!-- amount --}}
                <div class="item-num-val">{{itemData.quantity}}</div>
            </div>
            {{!-- name --}}
            <h4 class="item-name flex3">{{item.name}}</h4>
            {{!-- item specifics --}}
            <div title="{{lookup ../../config.armorMaterialTypes itemData.armorMaterialType}}">
                {{lookup ../../config.armorMaterialTypesAbbr itemData.armorMaterialType}}
            </div> {{!-- SPECIFIC --}}
            <div title="{{lookup ../../config.armorTypes itemData.armorType}}">
                {{lookup ../../config.armorTypesAbbr itemData.armorType}}
            </div> {{!-- SPECIFIC --}}
            <div class="flex05 item-num-val">{{itemData.armorValue}}</div> {{!-- SPECIFIC --}}
            {{!-- description --}}
            <div class="flex3 item-description">{{{itemData.description}}}</div>
            {{!-- edit & delete buttons --}}
            <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>
        {{/with}}
        {{/each}}
    </ol>


    {{!-- SHIELD --}}
    <h4 class="items-list-title">{{localize 'DS4.ItemTypeShield'}}</h4> {{!-- SPECIFIC --}}
    <ol class="items-list">
        <li class="item flexrow item-header">
            <div class="flexrow flex15">
                <div title="{{localize 'DS4.ItemEquipped'}}">E</div> {{!-- equipped --}} {{!-- SPECIFIC --}}
                <div class="item-image"></div>
                <div class="item-num-val" title="{{localize 'DS4.Quantity'}}">#</div> {{!-- amount --}}
            </div>
            <div class="item-name flex3">{{localize 'DS4.ItemName'}}</div>
            <div class="flex05 item-num-val" title="{{localize 'DS4.ArmorValue'}}">{{localize 'DS4.ArmorValueAbbr'}}
            </div> {{!-- SPECIFIC --}}
            <div class="flex4">{{localize 'DS4.Description'}}</div>
            {{!-- add button --}}
            <div class="item-controls"> {{!-- SPECIFIC --}}
                <a class="item-control item-create" title="Create item" data-type="shield" {{!-- SPECIFIC --}}>
                    <i class="fas fa-plus"></i>
                    {{localize 'DS4.UserInteractionAddItem'}}</a>
            </div>
        </li>
        {{#each itemsByType.shield as |item id|}} {{!-- SPECIFIC --}}
        {{#with item.data.data as |itemData|}}
        <li class="item flexrow" data-item-id="{{item._id}}">
            <div class="flexrow flex15">
                {{!-- equipped? --}}
                {{#if itemData.equipped}}<i class="fas fa-check-square"></i>
                {{else}}<i class="far fa-square"></i>
                {{/if}} {{!--SPECIFIC --}}
                {{!-- image --}}
                <div class="item-image">
                    <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
                </div>
                {{!-- amount --}}
                <div class="item-num-val">{{itemData.quantity}}</div>
            </div>
            {{!-- name --}}
            <h4 class="item-name flex3">{{item.name}}</h4>
            {{!-- item specifics --}}
            <div class="flex05 item-num-val">{{itemData.armorValue}}</div> {{!-- SPECIFIC --}}
            {{!-- description --}}
            <div class="flex4 item-description">{{{itemData.description}}}</div>
            {{!-- edit & delete buttons --}}
            <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>
        {{/with}}
        {{/each}}
    </ol>

    {{!-- TRINKET --}}
    <h4 class="items-list-title">{{localize 'DS4.ItemTypeTrinket'}}</h4> {{!-- SPECIFIC --}}
    <ol class="items-list">
        <li class="item flexrow item-header">
            <div class="flexrow flex15">
                <div title="{{localize 'DS4.ItemEquipped'}}">E</div> {{!-- equipped --}} {{!-- SPECIFIC --}}
                <div class="item-image"></div>
                <div class="item-num-val" title="{{localize 'DS4.Quantity'}}">#</div> {{!-- amount --}}
            </div>
            <div class="item-name flex3">{{localize 'DS4.ItemName'}}</div>
            <div class="flex2">{{localize 'DS4.StorageLocation'}}</div> {{!-- SPECIFIC --}}
            <div class="flex4">{{localize 'DS4.Description'}}</div>
            {{!-- add button --}}
            <div class="item-controls"> {{!-- SPECIFIC --}}
                <a class="item-control item-create" title="Create item" data-type="trinket" {{!-- SPECIFIC --}}>
                    <i class="fas fa-plus"></i>
                    {{localize 'DS4.UserInteractionAddItem'}}</a>
            </div>
        </li>
        {{#each itemsByType.trinket as |item id|}} {{!-- SPECIFIC --}}
        {{#with item.data.data as |itemData|}}
        <li class="item flexrow" data-item-id="{{item._id}}">
            <div class="flexrow flex15">
                {{!-- equipped? --}}
                {{#if itemData.equipped}}<i class="fas fa-check-square"></i>
                {{else}}<i class="far fa-square"></i>
                {{/if}} {{!--SPECIFIC --}}
                {{!-- image --}}
                <div class="item-image">
                    <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
                </div>
                {{!-- amount --}}
                <div class="item-num-val">{{itemData.quantity}}</div>
            </div>
            {{!-- name --}}
            <h4 class="item-name flex3">{{item.name}}</h4>
            {{!-- storage location --}}
            <div class="flex2">{{{itemData.storageLocation}}}</div> {{!-- SPECIFIC --}}
            {{!-- description --}}
            <div class="flex4 item-description">{{{itemData.description}}}</div>
            {{!-- edit & delete buttons --}}
            <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>
        {{/with}}
        {{/each}}
    </ol>

    {{!-- EQUIPMENT --}}
    <h4 class="items-list-title">{{localize 'DS4.ItemTypeEquipment'}}</h4> {{!-- SPECIFIC --}}
    <ol class="items-list">
        <li class="item flexrow item-header">
            <div class="flexrow flex15">
                <div class="item-image"></div>
                <div class="item-num-val" title="{{localize 'DS4.Quantity'}}">#</div> {{!-- amount --}}
            </div>
            <div class="item-name flex3">{{localize 'DS4.ItemName'}}</div>
            <div class="flex2">{{localize 'DS4.StorageLocation'}}</div> {{!-- SPECIFIC --}}
            <div class="flex4">{{localize 'DS4.Description'}}</div>
            {{!-- add button --}}
            <div class="item-controls"> {{!-- SPECIFIC --}}
                <a class="item-control item-create" title="Create item" data-type="equipment" {{!-- SPECIFIC --}}>
                    <i class="fas fa-plus"></i>
                    {{localize 'DS4.UserInteractionAddItem'}}</a>
            </div>
        </li>
        {{#each itemsByType.equipment as |item id|}} {{!-- SPECIFIC --}}
        {{#with item.data.data as |itemData|}}
        <li class="item flexrow" data-item-id="{{item._id}}">
            <div class="flexrow flex15">
                {{!-- image --}}
                <div class="item-image">
                    <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
                </div>
                {{!-- amount --}}
                <div class="item-num-val">{{itemData.quantity}}</div>
            </div>
            {{!-- name --}}
            <h4 class="item-name flex3">{{item.name}}</h4>
            {{!-- storage location --}}
            <div class="flex2">{{{itemData.storageLocation}}}</div> {{!-- SPECIFIC --}}
            {{!-- description --}}
            <div class="flex4 item-description">{{{itemData.description}}}</div>
            {{!-- edit & delete buttons --}}
            <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>
        {{/with}}
        {{/each}}
    </ol>
</div>