{{#each items as |table key|}}
  <div class="item-list table-name {{key}}">
    {{!-- Header --}}
    <div class="item-header" data-table-name='{{key}}' style="{{grid-template @root.navTab true false}}">
      <div class="column reordering-buttons">
        {{#ifCond @root.editMode '&&' table.siblings.before}}
        <a class="reorder fa-solid fa-angle-up" title="{{localize 'dc20rpg.sheet.itemTable.headerUp'}}" data-tab="{{@root.navTab}}" data-current="{{key}}" data-swapped="{{table.siblings.before}}"></a>
        {{/ifCond}}
        {{#ifCond @root.editMode '&&' table.siblings.after}}
        <a class="reorder fa-solid fa-angle-down" title="{{localize 'dc20rpg.sheet.itemTable.headerDown'}}" data-tab="{{@root.navTab}}" data-current="{{key}}" data-swapped="{{table.siblings.after}}"></a>
        {{/ifCond}}
      </div>
      <div class="column name">
        <input {{#ifCond @root.editMode '&&' table.custom}}{{else}}disabled{{/ifCond}} type="text" name="flags.dc20rpg.headersOrdering.{{@root.navTab}}.{{key}}.name" value="{{table.name}}"/>
      </div>
      <div class="column action" title="{{localize 'dc20rpg.sheet.itemTable.roll'}}"><i class="fa-solid fa-dice-d20"></i></div>
      {{!-- Inventory Only --}}
      {{#ifCond @root.navTab '===' "inventory"}}
      <div class="column weight"><i class="fa-solid fa-weight-hanging" title="{{localize 'dc20rpg.sheet.itemTable.weight'}}"></i></div>
      <div class="column quantity"><i class="fa-solid fa-boxes-stacked" title="{{localize 'dc20rpg.sheet.itemTable.quantity'}}"></i></div>
      {{/ifCond}}
      {{!-- Spells Only --}}
      {{#ifCond @root.navTab '===' "spells"}}
      <div class="column components"><i class="fa-solid fa-sack" title="{{localize 'dc20rpg.sheet.itemTable.components'}}"></i></div>
      {{/ifCond}}
      <div class="column charges" title="{{localize 'dc20rpg.sheet.itemTable.charges'}}"><i class="fa-solid fa-battery-three-quarters"></i></div>
      {{#unless (arrayIncludes @root.navTab arrayString="favorites main basic")}}
      <div class="column other-item" title="{{localize 'dc20rpg.sheet.itemTable.extraResources'}}"><i class="fa-solid fa-cookie-bite"></i></div>
      {{/unless}}
      <div class="column cost" title="{{localize 'dc20rpg.sheet.itemTable.resources'}}"><i class="fa-solid fa-bolt"></i></div>
      <div class="column config">
        <i class="fa-solid fa-gear"></i>
        {{#ifCond @root.editMode '&&' table.custom}}
          <a class="table-remove fa-lg fa-solid fa-xmark margin-left-3" title="{{localize 'dc20rpg.sheet.itemTable.removeTable'}}" data-tab="{{@root.navTab}}" data-table="{{key}}"></a>
        {{/ifCond}}
      </div>
    </div>
    
    {{!-- Row --}}
    {{#each table.items}}
    <div class="expandable-row">
      <div class="item item-row editable{{#if system.statuses.equipped}} equipped{{/if}}{{#if system.statuses.attuned}} attuned{{/if}}{{#ifCond system.toggle.toggleable '&&' system.toggle.toggledOn}} activated-effect{{/ifCond}}" data-item-id="{{_id}}" style="{{grid-template @root.navTab false false}}">
        {{!-- Name --}}
        <div class="column name item-tooltip roll-item" data-item-id="{{_id}}" title="{{localize 'dc20rpg.sheet.rollMenu.rollItem'}} {{localize "dc20rph.sheet.rollMenu.quickRoll"}}">
          <div class="item-img-wrapper">
            <a class="original"><img src="{{img}}"/></a>
            <a class="hovered">
              <i class="hover-icon fa-solid fa-dice-d20 fa-2x"></i>
            </a> 
          </div>
          <div class="item-name" data-item-id="{{_id}}">{{name}}</div>
          {{#if system.usesWeapon.weaponAttack}}
          <select class="select-other-item weapon-selector-{{_id}}" data-path="system.usesWeapon.weaponId" data-selector="weapon-selector-{{_id}}" data-item-id="{{_id}}" title="{{localize 'dc20rpg.sheet.itemTable.chooseWeapon'}}">
            {{selectOptions @root.weaponsOnActor selected=system.usesWeapon.weaponId blank=""}}
          </select>
          {{/if}}
          {{#if system.check.multiCheck.active}}
          <select class="select-other-check check-selector-{{_id}}" data-path="system.check.checkKey" data-selector="check-selector-{{_id}}" data-item-id="{{_id}}" title="{{localize 'dc20rpg.sheet.itemTable.chooseCheck'}}">
            {{selectOptions system.check.multiCheck.options selected=system.check.checkKey}}
          </select>
          {{/if}}
          {{#if system.properties.multiFaceted.active}}
          <a class="side-marker item-multi-faceted" title="{{varLocalize "dc20rpg.weaponStyles." system.properties.multiFaceted.labelKey ''}}"
            {{#if system.usesWeapon.weaponAttack}}
            data-item-id="{{system.usesWeapon.weaponId}}"
            {{else}}
            data-item-id="{{_id}}"
            {{/if}}
          >
            <i class="fa-lg fa-solid{{#ifCond system.properties.multiFaceted.selected '===' "first"}} fa-hand-point-up{{else}} fa-hand-peace{{/ifCond}}"></i>
          </a>
          {{/if}}
          {{#if this.system.isReaction}}
          <div class="side-marker" title="{{localize 'dc20rpg.sheet.itemTable.reaction'}}">
            <i class="fa-solid fa-reply fa-lg"></i>
          </div>
          {{/if}}
        </div>

        {{!-- Action Type --}}
        <div class="column action {{{should-expand this @root.navTab}}}" title="{{localize 'dc20rpg.sheet.itemTable.roll'}}">
          {{{action-type this}}}
          {{{roll-requests this}}}
          {{{formula-rolls this}}}
        </div>

        {{!-- Item Weight and Quantity (Inventory Only) --}}
        {{#ifCond @root.navTab '===' "inventory"}}
        <div class="column weight" title="{{localize 'dc20rpg.sheet.itemTable.weight'}}">
          {{system.weight}}
        </div>
        <div class="column quantity" title="{{localize 'dc20rpg.sheet.itemTable.quantity'}}">
          <input class="change-item-numeric-value" type="text" value="{{system.quantity}}" data-item-id="{{_id}}" data-path="system.quantity">
        </div>
        {{/ifCond}}

        {{!-- Spell Components (Spells Only) --}}
        {{#ifCond @root.navTab '===' "spells"}}
        <div class="column components" title="{{localize 'dc20rpg.sheet.itemTable.components'}}">
          {{{components this}}}
        </div>
        {{/ifCond}}

        {{!-- Charges --}}
        <div class="column charges" title="{{localize 'dc20rpg.sheet.itemTable.charges'}}">
          {{#if system.costs}}
          {{#ifCond system.costs.charges.max '!==' null}}
          <input class="current-charges update-charges" type="text" value="{{system.costs.charges.current}}" data-dtype="Number" data-item-id="{{_id}}" {{#ifCond system.costs.charges.reset "===" "charges"}}style="width:23px"{{/ifCond}}/>
          <span class="separator">/</span>
          <span class="max-charges">{{system.costs.charges.max}}</span>
            {{!-- Recharge button --}}
            {{#ifCond system.costs.charges.reset "===" "charges"}}
            <a class="recharge-item fa-solid fa-bolt" title="{{localize 'dc20rpg.sheet.itemTable.recharge'}}" data-item-id="{{_id}}" style="margin-left:2px;margin-top:-2px;"></a>
            {{/ifCond}}
          {{/ifCond}}
          {{/if}}
        </div>

        {{!-- Item use other item --}}
        {{#unless (arrayIncludes @root.navTab arrayString="favorites main basic")}}
        <div class="column item-use" title="{{localize 'dc20rpg.sheet.itemTable.extraResources'}}">
          {{#ifCond usageCosts.otherItem.amount '>' 0}}
          <div class="cost other-item" title="{{usageCosts.otherItem.name}}">
            <img src={{usageCosts.otherItem.image}} class="cost-img">
            <span class="margin-right-3"><b>({{usageCosts.otherItem.amount}})</b></span>
            {{#if usageCosts.otherItem.consumeCharge}}
              <i class="fa-solid fa-bolt fa-lg" title="{{localize 'dc20rpg.sheet.itemTable.consumeCharge'}}"></i>
            {{else}}
              <i class="fa-solid fa-boxes-stacked fa-lg" title="{{localize 'dc20rpg.sheet.itemTable.consumeQuantity'}}"></i>
            {{/if}}
          </div>
          {{/ifCond}}
        </div>
        {{/unless}}

        {{!-- Resource Usage --}}
        <div class="column usage" title="{{localize 'dc20rpg.sheet.itemTable.resources'}}">
          {{{cost-printer usageCosts.resources.costs usageCosts.resources.counter false}}}
        </div>

        {{!-- Config --}}
        <div class="column config">
          {{{item-config this @root.editMode @root.navTab}}}
        </div>
      </div>
    </div>
    {{/each}}
  </div>
{{/each}}