<section data-tab="equipment" data-group="{{tab.group}}" class="tab {{tab.cssClass}}">
  <div class="slots-counter">
    <span class="slots-label">{{localize "OATHHAMMER.Label.ItemSlots"}}</span>
    <span class="slots-value {{#if slotsOver}}slots-over{{/if}}">{{slotsUsed}} / {{slotsMax}}</span>
  </div>
  <fieldset class="currency-bar">
    <legend>{{localize "OATHHAMMER.Label.Currency"}}</legend>
    <div class="flexrow">
      <div class="currency-item">
        <label>{{localize "OATHHAMMER.Currency.GP"}}</label>
        <div class="currency-stepper">
          <a data-action="adjustCurrency" data-field="system.currency.gold" data-delta="-1" class="qty-btn">−</a>
          {{formInput systemFields.currency.fields.gold value=system.currency.gold name="system.currency.gold"}}
          <a data-action="adjustCurrency" data-field="system.currency.gold" data-delta="1" class="qty-btn">+</a>
        </div>
      </div>
      <div class="currency-item">
        <label>{{localize "OATHHAMMER.Currency.SP"}}</label>
        <div class="currency-stepper">
          <a data-action="adjustCurrency" data-field="system.currency.silver" data-delta="-1" class="qty-btn">−</a>
          {{formInput systemFields.currency.fields.silver value=system.currency.silver name="system.currency.silver"}}
          <a data-action="adjustCurrency" data-field="system.currency.silver" data-delta="1" class="qty-btn">+</a>
        </div>
      </div>
      <div class="currency-item">
        <label>{{localize "OATHHAMMER.Currency.CP"}}</label>
        <div class="currency-stepper">
          <a data-action="adjustCurrency" data-field="system.currency.copper" data-delta="-1" class="qty-btn">−</a>
          {{formInput systemFields.currency.fields.copper value=system.currency.copper name="system.currency.copper"}}
          <a data-action="adjustCurrency" data-field="system.currency.copper" data-delta="1" class="qty-btn">+</a>
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <legend>{{localize "OATHHAMMER.Label.Equipment"}}
      {{#unless isPlayMode}}<a data-action="createEquipment" class="create-btn"><i class="fa-solid fa-plus"></i></a>{{/unless}}
    </legend>
    {{#if equipment.length}}
    <ul class="item-list item-list--equipment">
      <li class="item-list-header">
        <span></span>
        <span class="col-name">{{localize "OATHHAMMER.Label.Name"}}</span>
        <span>{{localize "OATHHAMMER.Label.Type"}}</span>
        <span>{{localize "OATHHAMMER.Label.Quantity"}}</span>
        <span></span>
      </li>
      {{#each equipment as |equip|}}
      <li class="item-entry" data-item-id="{{equip.id}}" data-item-uuid="{{equip.uuid}}">
        <img src="{{equip.img}}" class="item-img" />
        <span class="item-name" {{#if equip._descTooltip}}data-tooltip="{{equip._descTooltip}}"{{/if}}>{{equip.name}}</span>
        <span class="item-type">{{localize equip.system.itemType}}</span>
        <span class="item-qty-stepper">
          <a data-action="adjustQty" data-item-id="{{equip.id}}" data-delta="-1" class="qty-btn">−</a>
          <span class="qty-value">{{equip.system.quantity}}</span>
          <a data-action="adjustQty" data-item-id="{{equip.id}}" data-delta="1" class="qty-btn">+</a>
        </span>
        <div class="item-actions">
          <a data-action="edit" data-item-id="{{equip.id}}" data-item-uuid="{{equip.uuid}}"><i class="fa-solid fa-edit"></i></a>
          <a data-action="delete" data-item-id="{{equip.id}}" data-item-uuid="{{equip.uuid}}"><i class="fa-solid fa-trash"></i></a>
        </div>
      </li>
      {{/each}}
    </ul>
    {{else}}
    <p class="no-items">{{localize "OATHHAMMER.Label.NoEquipment"}}</p>
    {{/if}}
  </fieldset>
  {{#if magicItems.length}}

  <fieldset>
    <legend>{{localize "OATHHAMMER.Label.MagicItems"}}</legend>
    <ul class="item-list item-list--magic-item">
      <li class="item-list-header">
        <span></span>
        <span class="col-name">{{localize "OATHHAMMER.Label.Name"}}</span>
        <span>{{localize "OATHHAMMER.Label.Rarity"}}</span>
        <span></span>
      </li>
      {{#each magicItems as |mi|}}
      <li class="item-entry" data-item-id="{{mi.id}}" data-item-uuid="{{mi.uuid}}">
        <img src="{{mi.img}}" class="item-img" />
        <span class="item-name" {{#if mi._descTooltip}}data-tooltip="{{mi._descTooltip}}"{{/if}}>{{mi.name}}</span>
        <span class="item-type">{{localize mi.system.rarity}}</span>
        <div class="item-actions">
          <a data-action="edit" data-item-id="{{mi.id}}" data-item-uuid="{{mi.uuid}}"><i class="fa-solid fa-edit"></i></a>
          <a data-action="delete" data-item-id="{{mi.id}}" data-item-uuid="{{mi.uuid}}"><i class="fa-solid fa-trash"></i></a>
        </div>
      </li>
      {{/each}}
    </ul>
  </fieldset>
  {{/if}}
  {{#if conditions.length}}
  <fieldset>
    <legend>{{localize "OATHHAMMER.Label.Conditions"}}</legend>
    <ul class="item-list item-list--condition">
      <li class="item-list-header">
        <span></span>
        <span class="col-name">{{localize "OATHHAMMER.Label.Name"}}</span>
        <span>{{localize "OATHHAMMER.Label.Type"}}</span>
        <span></span>
      </li>
      {{#each conditions as |cond|}}
      <li class="item-entry" data-item-id="{{cond.id}}" data-item-uuid="{{cond.uuid}}">
        <img src="{{cond.img}}" class="item-img" />
        <span class="item-name">{{cond.name}}</span>
        <span class="item-type">{{localize cond.system.conditionType}}</span>
        <div class="item-actions">
          <a data-action="edit" data-item-id="{{cond.id}}" data-item-uuid="{{cond.uuid}}"><i class="fa-solid fa-edit"></i></a>
          <a data-action="delete" data-item-id="{{cond.id}}" data-item-uuid="{{cond.uuid}}"><i class="fa-solid fa-trash"></i></a>
        </div>
      </li>
      {{/each}}
    </ul>
  </fieldset>
  {{/if}}
</section>
