<section class="tab character-{{tab.id}} {{tab.cssClass}}" data-tab="combat" data-group="sheet">
  <div class="main-div">

    <fieldset>
      <legend>{{localize "LETHALFANTASY.Label.combatDetails"}}</legend>
      <div class="combat-details">
        <div class="combat-detail">

          <button class="action ranged-attack-button" data-action="rangedAttackDefense">
            {{localize "LETHALFANTASY.Label.rangedAttackDefense"}}
          </button>

          <button class="action ranged-attack-button" data-action="rollInitiative">
            {{localize "LETHALFANTASY.Label.rollInitiative"}}
          </button>

          <div class="flexrow armor-hp">
            <span class="name">{{localize "LETHALFANTASY.Label.armorHitPoints"}}</span>
            {{formInput systemFields.combat.fields.armorHitPoints value=system.combat.armorHitPoints localize=true }}
            <a data-action="armorHitPointsPlus"><i class="fa-solid fa-hexagon-plus"></i></a>
            <a data-action="armorHitPointsMinus"><i class="fa-solid fa-hexagon-minus"></i></a>
          </div>

          <div class="flexrow armor-hp">
            <span class="name" data-tooltip="{{localize 'LETHALFANTASY.Tooltip.combatProgressionStart'}}">{{localize "LETHALFANTASY.Label.combatProgressionStart"}}</span>
            {{formInput systemFields.combat.fields.combatProgressionStart value=system.combat.combatProgressionStart disabled=isPlayMode }}
          </div>

          <div class="flexrow granted">
            <span class="">{{localize
              "LETHALFANTASY.Label.grantedAttackDice"}}</a></span>
            {{formInput systemFields.granted.fields.attackDice value=system.granted.attackDice disabled=isPlayMode }}
          </div>

          <div class="flexrow granted ">
            <span class="">{{localize
              "LETHALFANTASY.Label.grantedDefenseDice"}}</a></span>
            {{formInput systemFields.granted.fields.defenseDice value=system.granted.defenseDice disabled=isPlayMode }}
          </div>

          <div class="flexrow granted">
            <span class="">{{localize
              "LETHALFANTASY.Label.grantedDamageDice"}}</a></span>
            {{formInput systemFields.granted.fields.damageDice value=system.granted.damageDice disabled=isPlayMode }}
          </div>

        </div>
      </div>
    </fieldset>

    <fieldset>
      <legend>{{localize "LETHALFANTASY.Label.wounds"}}</legend>
      <div class="wounds">
        {{#each system.hp.wounds as |wound idx|}}
        <div class="wound">
          Name:<input class="wound-description wound-data" type="text" data-type="String" data-index="{{@index}}"
            value="{{wound.description}}" data-name="description">
          Duration:<input class="wound-duration wound-data" type="text" data-type="Number" data-index="{{@index}}"
            value="{{wound.duration}}" data-name="duration">
          HP:<input class="wound-value wound-data" type="text" data-type="Number" data-index="{{@index}}"
            value="{{wound.value}}" data-name="value">
        </div>
        {{/each}}
      </div>
    </fieldset>

    <fieldset>
      <legend>{{localize "LETHALFANTASY.Label.weapons"}}</legend>
      <div class="weapons">
        {{#each weapons as |item|}}
        <div class="weapon" data-item-id="{{item.id}}" data-item-uuid="{{item.uuid}}" data-drag="true"
          data-drag-type="damage">
          {{#if (ne item.img "icons/svg/item-bag.svg")}}
          <img class="item-img" src="{{item.img}}" data-tooltip="{{item.name}}" />
          {{/if}}
          <div class="name" data-tooltip="{{item.system.description}}">
            {{item.name}}
          </div>
          <div class="attack-icons">

            <a class="rollable" data-roll-type="weapon-attack" data-roll-key="{{item.id}}" data-tooltip="Roll Attack">
              <i class="lf-roll-small fa-solid fa-swords" data-roll-type="weapon-attack"
                data-roll-key="{{item.id}}"></i>
            </a>

            <a class="rollable" data-roll-type="weapon-defense" data-roll-key="{{item.id}}" data-tooltip="Roll Defense">
              <i class="fa-solid fa-shield-halved" data-roll-type="weapon-defense" data-roll-key="{{item.id}}"></i>
            </a>

            <a class="rollable" data-roll-type="weapon-damage" data-roll-key="{{item.id}}"
              data-tooltip="Roll Damage">
              <i class="fa-regular fa-face-head-bandage" data-roll-type="weapon-damage"
                data-roll-key="{{item.id}}"></i>
            </a>

          </div>

          <div class="controls">
            <a data-tooltip="{{localize 'LETHALFANTASY.Edit'}}" data-action="edit" data-item-id="{{item.id}}"
              data-item-uuid="{{item.uuid}}"><i class="fas fa-edit"></i></a>
            <a data-tooltip="{{localize 'LETHALFANTASY.Delete'}}" data-action="delete" data-item-id="{{item.id}}"
              data-item-uuid="{{item.uuid}}"><i class="fas fa-trash"></i></a>
          </div>
        </div>
        {{/each}}
      </div>
    </fieldset>

    <fieldset>
      <legend>{{localize "LETHALFANTASY.Label.armors"}}</legend>
      <div class="armors">
        {{#each armors as |item|}}
        <div class="armor" data-item-id="{{item.id}}" data-item-uuid="{{item.uuid}}">
          <img class="item-img" src="{{item.img}}" data-tooltip="{{item.name}}" />
          <div class="name" data-tooltip="{{item.system.description}}">
            {{item.name}}
          </div>
          <div class="item-detail" data-tooltip="Defense">{{item.system.defense}}</div>
          <div class="item-detail" data-tooltip="Maximum movement">{{item.system.maximumMovement}}</div>
          <div class="item-detail" data-tooltip="HP">{{item.system.hp}}</div>
          <div class="item-detail" data-tooltip="Damage Reduction">{{item.system.damageReduction}}</div>
          <div class="item-detail" data-tooltip={{#if item.system.equipped}}"Equipped"{{else}}"Not Equipped"{{/if}}>{{#if item.system.equipped}}<i class="fas fa-check"></i>{{else}}<i class="fas fa-times"></i>{{/if}}</div>
          <div class="controls">
            <a data-tooltip="{{localize 'LETHALFANTASY.Edit'}}" data-action="edit" data-item-id="{{item.id}}"
              data-item-uuid="{{item.uuid}}"><i class="fas fa-edit"></i></a>
            <a data-tooltip="{{localize 'LETHALFANTASY.Delete'}}" data-action="delete" data-item-id="{{item.id}}"
              data-item-uuid="{{item.uuid}}"><i class="fas fa-trash"></i></a>
          </div>
        </div>
        {{/each}}
      </div>
    </fieldset>

    <fieldset>
      <legend>{{localize "LETHALFANTASY.Label.shields"}}</legend>
      <div class="shields">
        {{#each shields as |item|}}
        <div class="shield" data-item-id="{{item.id}}" data-item-uuid="{{item.uuid}}">
          <img class="item-img" src="{{item.img}}" data-tooltip="{{item.name}}" />
          <div class="name" data-tooltip="{{item.system.description}}">
            {{item.name}}
          </div>
          <div class="item-detail" data-tooltip="Defense">
            <a class="rollable" data-roll-type="shield-roll" data-roll-key="{{item.id}}" data-tooltip="Shield Defense">
              <i class="lf-roll-small fa-solid fa-shield" data-roll-type="shield-roll" data-roll-key="{{item.id}}"></i>
              {{upperFirst item.system.defense}}
            </a>

          </div>
          <div class="item-detail" data-tooltip="Movement reduction">{{item.system.movementreduction}}</div>
          <div class="item-detail" data-tooltip="Has cover">{{#if item.system.hascover}}Cover{{/if}}</div>
          <div class="item-detail" data-tooltip={{#if item.system.equipped}}"Equipped"{{else}}"Not Equipped"{{/if}}>{{#if item.system.equipped}}<i class="fas fa-check"></i>{{else}}<i class="fas fa-times"></i>{{/if}}</div>
          <div class="controls">
            <a data-tooltip="{{localize 'LETHALFANTASY.Edit'}}" data-action="edit" data-item-id="{{item.id}}"
              data-item-uuid="{{item.uuid}}"><i class="fas fa-edit"></i></a>
            <a data-tooltip="{{localize 'LETHALFANTASY.Delete'}}" data-action="delete" data-item-id="{{item.id}}"
              data-item-uuid="{{item.uuid}}"><i class="fas fa-trash"></i></a>
          </div>
        </div>
        {{/each}}
      </div>
    </fieldset>
  </div>
</section>