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

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

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

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

  <fieldset>
    <legend>{{localize "LETHALFANTASY.Label.attacks"}}</legend>
    <div class="attack-mode-selector">
      <label>{{localize "LETHALFANTASY.Label.attackMode"}}</label>
      <select name="system.attackMode">
        <option value="melee" {{#if (eq system.attackMode "melee")}}selected{{/if}}>{{localize "LETHALFANTASY.Label.meleeModeLabel"}}</option>
        <option value="ranged" {{#if (eq system.attackMode "ranged")}}selected{{/if}}>{{localize "LETHALFANTASY.Label.rangedModeLabel"}}</option>
      </select>
    </div>

    {{#if (eq system.attackMode "melee")}}
    <div class="attacks melee-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" {{checked 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="">
          <input type="checkbox" name="system.attacks.{{item.key}}.noExplode" {{checked item.noExplode}} data-tooltip="No exploding dice on damage" />
        </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>
    {{else}}
    <div class="attacks ranged-attacks">
      {{#each system.rangedAttacks as |item key|}}
      <div class="attack" data-attack-key="{{key}}" >
        <div class="">
          <input type="checkbox" name="system.rangedAttacks.{{item.key}}.enabled" {{checked item.enabled}} data-tooltip="Attack enabled/disabled" />
        </div>
        <div class="name">
          <input type="text" name="system.rangedAttacks.{{item.key}}.name" value="{{item.name}}" data-tooltip="Attack name" />
        </div>
        <div class="numeric">
          <input type="number" name="system.rangedAttacks.{{item.key}}.attackScore" value="{{item.attackScore}}" data-tooltip="Progression number" />
        </div>
        <div class="numeric">
          <input type="number" name="system.rangedAttacks.{{item.key}}.attackModifier" value="{{item.attackModifier}}" data-tooltip="Attack modifier" />
        </div>
        <div class="numeric">
          <input type="number" name="system.rangedAttacks.{{item.key}}.defenseModifier" value="{{item.defenseModifier}}" data-tooltip="Defense modifier"/>
        </div>
        <div class="damage-dice">
          <input type="text" name="system.rangedAttacks.{{item.key}}.damageDice" value="{{item.damageDice}}" data-tooltip="Damage dice"/>
        </div>
        <div class="numeric">
          <input type="number" name="system.rangedAttacks.{{item.key}}.damageModifier" value="{{item.damageModifier}}" data-tooltip="Damage modifier"/>
        </div>
        <div class="">
          <input type="checkbox" name="system.rangedAttacks.{{item.key}}.noExplode" {{checked item.noExplode}} data-tooltip="No exploding dice on damage" />
        </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-bow-arrow" 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 class="ranged-weapon-range">
        <label>{{localize "LETHALFANTASY.Label.range"}}</label>
        <div class="range-fields">
          <div class="range-field">
            <label>{{localize "LETHALFANTASY.Label.pointBlank"}}</label>
            <input type="number" name="system.rangedWeaponRange.pointBlank" value="{{system.rangedWeaponRange.pointBlank}}" />
          </div>
          <div class="range-field">
            <label>{{localize "LETHALFANTASY.Label.short"}}</label>
            <input type="number" name="system.rangedWeaponRange.short" value="{{system.rangedWeaponRange.short}}" />
          </div>
          <div class="range-field">
            <label>{{localize "LETHALFANTASY.Label.medium"}}</label>
            <input type="number" name="system.rangedWeaponRange.medium" value="{{system.rangedWeaponRange.medium}}" />
          </div>
          <div class="range-field">
            <label>{{localize "LETHALFANTASY.Label.long"}}</label>
            <input type="number" name="system.rangedWeaponRange.long" value="{{system.rangedWeaponRange.long}}" />
          </div>
          <div class="range-field">
            <label>{{localize "LETHALFANTASY.Label.extreme"}}</label>
            <input type="number" name="system.rangedWeaponRange.extreme" value="{{system.rangedWeaponRange.extreme}}" />
          </div>
          <div class="range-field">
            <label>{{localize "LETHALFANTASY.Label.outOfSkill"}}</label>
            <input type="number" name="system.rangedWeaponRange.outOfSkill" value="{{system.rangedWeaponRange.outOfSkill}}" />
          </div>
        </div>
      </div>
    </div>
    {{/if}}
  </fieldset>

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

        <div class="attack-icons">

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

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

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

        </div>

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