<section class='tab {{tabs.inventory.cssClass}} {{tabs.inventory.id}}' data-tab='{{tabs.inventory.id}}'
    data-group='{{tabs.inventory.group}}'>
    <div class="search-section">
        <div class="search-bar">
            <div class="icon">
                <i class="fa-solid fa-magnifying-glass"></i>
            </div>
            <input type="search" name="search" class="search-inventory" placeholder="Search...">
        </div>
        <a class="filter-button">
            <i class="fa-solid fa-filter"></i>
        </a>
    </div>

    <div class="currency-section">
        {{#each this.inventory.currencies as | currency |}}
            {{#if currency.enabled}}
                <div class="input">
                    <span>{{localize currency.label}}</span>
                    {{formInput currency.field value=currency.value enriched=currency.value toggled=true}}
                </div>
            {{/if}}
        {{/each}}
    </div>

    <div class="items-section">
        {{> 'daggerheart.inventory-items'
        title='TYPES.Item.weapon'
        type='weapon'
        collection=@root.inventory.weapons
        isGlassy=true
        canCreate=true
        hideResources=true
        }}
        {{> 'daggerheart.inventory-items'
        title='TYPES.Item.armor'
        type='armor'
        collection=@root.inventory.armor
        isGlassy=true
        canCreate=true
        hideResources=true
        }}
        {{> 'daggerheart.inventory-items'
        title='TYPES.Item.consumable'
        type='consumable'
        collection=@root.inventory.consumables
        isGlassy=true
        canCreate=true
        }}
        {{> 'daggerheart.inventory-items'
        title='TYPES.Item.loot'
        type='loot'
        collection=@root.inventory.loot
        isGlassy=true
        canCreate=true
        showActions=true
        }}
    </div>
</section>