<section class="tab monster-{{tab.id}} {{tab.cssClass}}" data-tab="{{tab.id}}" data-group="{{tab.group}}">

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

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

        <button class="action" data-action="rollInitiative">
          {{localize "PRISMRPG.Label.rollInitiative"}}
        </button>
      </div>
    </div>
  </fieldset>

  <fieldset>
    <legend>{{localize "PRISMRPG.Label.attacks"}}</legend>
    <div class="attacks">
      {{#each system.attacks as |item key|}}
      <div class="attack" data-attack-key="{{key}}" >
        <div class="">
          <input type="checkbox" name="system.attacks.{{item.key}}.enabled" value="{{item.enabled}}" data-tooltip="Attack enabled/disabled" />
        </div>
        <div class="name">
          <input type="text" name="system.attacks.{{item.key}}.name" value="{{item.name}}" data-tooltip="Attack name" />
        </div>
        <div class="numeric">
          <input type="number" name="system.attacks.{{item.key}}.attackScore" value="{{item.attackScore}}" data-tooltip="Progression number" />
        </div>
        <div class="numeric">
          <input type="number" name="system.attacks.{{item.key}}.attackModifier" value="{{item.attackModifier}}" data-tooltip="Attack modifier" />
        </div>
        <div class="numeric">
          <input type="number" name="system.attacks.{{item.key}}.defenseModifier" value="{{item.defenseModifier}}" data-tooltip="Defense modifier"/>
        </div>
        <div class="damage-dice">
          <input type="text" name="system.attacks.{{item.key}}.damageDice" value="{{item.damageDice}}" data-tooltip="Damage dice"/>
        </div>
        <div class="numeric">
          <input type="number" name="system.attacks.{{item.key}}.damageModifier" value="{{item.damageModifier}}" data-tooltip="Damage modifier"/>
        </div>

        <div class="attack-icons">

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

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

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

        </div>

      </div>
      {{/each}}
    </div>
  </fieldset>
</section>