<section data-tab="combat" 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>
  <div class="initiative-bar">
    <a data-action="rollInitiative" class="initiative-roll-btn" data-tooltip="{{localize 'OATHHAMMER.Roll.InitiativeHint'}}">
      <i class="fa-solid fa-swords"></i> {{localize "OATHHAMMER.Dialog.RollInitiative"}}
    </a>
    {{#if combatantInitiative}}<span class="initiative-score" data-tooltip="{{localize 'OATHHAMMER.Label.Initiative'}}">⚔ {{combatantInitiative}}</span>{{/if}}
  </div>
  <fieldset>
    <legend>{{localize "OATHHAMMER.Label.Weapons"}}
      {{#unless isPlayMode}}<a data-action="createWeapon" class="create-btn"><i class="fa-solid fa-plus"></i></a>{{/unless}}
    </legend>
    {{#if weapons.length}}
    <ul class="item-list item-list--weapon">
      <li class="item-list-header">
        <span></span>
        <span class="col-name">{{localize "OATHHAMMER.Label.Name"}}</span>
        <span>{{localize "OATHHAMMER.Label.Group"}}</span>
        <span>{{localize "OATHHAMMER.Label.Damage"}}</span>
        <span title="Armor Penetration">AP</span>
        <span title="{{localize "OATHHAMMER.Label.Magic"}}"><i class="fa-solid fa-wand-sparkles"></i></span>
        <span title="{{localize "OATHHAMMER.Label.Equipped"}}"><i class="fa-solid fa-shield-halved"></i></span>
        <span></span>
      </li>
      {{#each weapons as |weapon|}}
      <li class="item-entry" data-item-id="{{weapon.id}}" data-item-uuid="{{weapon.uuid}}">
        <img src="{{weapon.img}}" class="item-img" />
        <span class="item-name" {{#if weapon._descTooltip}}data-tooltip="{{weapon._descTooltip}}"{{/if}}>{{weapon.name}}</span>
        <span class="item-group">{{weapon._groupLabel}}</span>
        <span class="item-detail">{{weapon.system.damageLabel}}</span>
        <span class="item-detail">{{#if weapon.system.ap}}{{weapon.system.ap}}{{else}}—{{/if}}</span>
        <span class="item-magic">{{#if weapon._isMagic}}<i class="fa-solid fa-wand-sparkles"></i>{{/if}}</span>
        <div class="item-equipped">
          <input type="checkbox" class="item-equipped-cb" data-item-id="{{weapon.id}}" {{checked weapon.system.equipped}}>
        </div>
        <div class="item-actions">
          <a data-action="attackWeapon" data-item-id="{{weapon.id}}" title="{{localize "OATHHAMMER.Dialog.Attack"}}"><i class="fa-solid fa-khanda"></i></a>
          <a data-action="defendWeapon" data-item-id="{{weapon.id}}" title="{{localize "OATHHAMMER.Dialog.RollDefense"}}"><i class="fa-solid fa-shield-halved"></i></a>
          <a data-action="damageWeapon" data-item-id="{{weapon.id}}" title="{{localize "OATHHAMMER.Dialog.Damage"}}"><i class="fa-solid fa-burst"></i></a>
          <a data-action="edit" data-item-id="{{weapon.id}}" data-item-uuid="{{weapon.uuid}}"><i class="fa-solid fa-edit"></i></a>
          <a data-action="delete" data-item-id="{{weapon.id}}" data-item-uuid="{{weapon.uuid}}"><i class="fa-solid fa-trash"></i></a>
        </div>
      </li>
      {{/each}}
    </ul>
    {{else}}
    <p class="no-items">{{localize "OATHHAMMER.Label.NoWeapons"}}</p>
    {{/if}}
  </fieldset>
  <fieldset>
    <legend>{{localize "OATHHAMMER.Label.Armor"}}
    </legend>
    {{#if armors.length}}
    <ul class="item-list item-list--armor">
      <li class="item-list-header">
        <span></span>
        <span class="col-name">{{localize "OATHHAMMER.Label.Name"}}</span>
        <span>{{localize "OATHHAMMER.Label.Type"}}</span>
        <span>AV</span>
        <span>{{localize "OATHHAMMER.Label.Penalty"}}</span>
        <span title="{{localize "OATHHAMMER.Label.Magic"}}"><i class="fa-solid fa-wand-sparkles"></i></span>
        <span title="{{localize "OATHHAMMER.Label.Equipped"}}"><i class="fa-solid fa-shield-halved"></i></span>
        <span></span>
      </li>
      {{#each armors as |armor|}}
      <li class="item-entry" data-item-id="{{armor.id}}" data-item-uuid="{{armor.uuid}}">
        <img src="{{armor.img}}" class="item-img" />
        <span class="item-name" {{#if armor._descTooltip}}data-tooltip="{{armor._descTooltip}}"{{/if}}>{{armor.name}}</span>
        <span class="item-type">{{armor._typeLabel}}</span>
        <span class="item-detail">{{armor.system.armorValue}}</span>
        <span class="item-detail">{{#if armor.system.penalty}}{{armor.system.penalty}}{{else}}—{{/if}}</span>
        <span class="item-magic">{{#if armor._isMagic}}<i class="fa-solid fa-wand-sparkles"></i>{{/if}}</span>
        <div class="item-equipped">
          <input type="checkbox" class="item-equipped-cb" data-item-id="{{armor.id}}" {{checked armor.system.equipped}}>
        </div>
        <div class="item-actions">
          <a data-action="rollArmorSave" data-item-id="{{armor.id}}" title="{{localize 'OATHHAMMER.Dialog.RollArmor'}}"><i class="fa-solid fa-shield armor-roll-icon"></i></a>
          <a data-action="edit" data-item-id="{{armor.id}}" data-item-uuid="{{armor.uuid}}"><i class="fa-solid fa-edit"></i></a>
          <a data-action="delete" data-item-id="{{armor.id}}" data-item-uuid="{{armor.uuid}}"><i class="fa-solid fa-trash"></i></a>
        </div>
      </li>
      {{/each}}
    </ul>
    {{/if}}
    {{#unless armors.length}}
    <p class="no-items">{{localize "OATHHAMMER.Label.NoArmor"}}</p>
    {{/unless}}
  </fieldset>
  {{#if ammunition.length}}
  <fieldset>
    <legend>{{localize "OATHHAMMER.Label.Ammunition"}}</legend>
    <ul class="item-list item-list--ammo">
      <li class="item-list-header">
        <span></span>
        <span class="col-name">{{localize "OATHHAMMER.Label.Name"}}</span>
        <span>{{localize "OATHHAMMER.Label.Quantity"}}</span>
        <span></span>
      </li>
      {{#each ammunition as |ammo|}}
      <li class="item-entry" data-item-id="{{ammo.id}}" data-item-uuid="{{ammo.uuid}}">
        <img src="{{ammo.img}}" class="item-img" />
        <span class="item-name">{{ammo.name}}</span>
        <span class="item-qty-stepper">
          <a data-action="adjustQty" data-item-id="{{ammo.id}}" data-delta="-1" class="qty-btn">−</a>
          <span class="qty-value">{{ammo.system.quantity}}</span>
          <a data-action="adjustQty" data-item-id="{{ammo.id}}" data-delta="1" class="qty-btn">+</a>
        </span>
        <div class="item-actions">
          <a data-action="edit" data-item-id="{{ammo.id}}" data-item-uuid="{{ammo.uuid}}"><i class="fa-solid fa-edit"></i></a>
          <a data-action="delete" data-item-id="{{ammo.id}}" data-item-uuid="{{ammo.uuid}}"><i class="fa-solid fa-trash"></i></a>
        </div>
      </li>
      {{/each}}
    </ul>
  </fieldset>
  {{/if}}
</section>
