<section class="npc-main npc-main-{{ifThen isPlayMode 'play' 'edit'}}">
  <fieldset>
    <legend>
      {{#if isPlayMode}}
      <span class="npc-subtype-badge npc-subtype-{{system.subtype}}">
        {{localize (lookup subtypeLabels system.subtype)}}
      </span>
      {{else}}
      <select name="system.subtype" class="npc-subtype-select">
        {{selectOptions subtypeChoices selected=system.subtype}}
      </select>
      {{/if}}
    </legend>
    <div class="npc-pc flexrow">

      <!-- LEFT: portrait only -->
      <div class="npc-left">
        <img class="actor-img" src="{{actor.img}}" data-edit="img" data-action="editImage" data-tooltip="{{actor.name}}" />
      </div>

      <!-- RIGHT: name + vitals grid + stats -->
      <div class="npc-right">
        <div class="character-name">
          {{formInput fields.name value=source.name rootId=partId disabled=isPlayMode}}
          <a class="control" data-action="toggleSheet" data-tooltip="OATHHAMMER.ToggleSheet" data-tooltip-direction="UP">
            <i class="fa-solid fa-user-{{ifThen isPlayMode 'lock' 'pen'}}"></i>
          </a>
        </div>

        <!-- Vitals: 2×2 grid -->
        <div class="npc-vitals-grid">

          <div class="npc-vital npc-vital-grit">
            <span class="vital-label">{{localize "OATHHAMMER.Label.Grit"}}</span>
            <span class="vital-value">
              <a class="grit-btn" data-action="adjustGrit" data-delta="-1" data-tooltip="−1">−</a>
              <input type="number" class="npc-num-input" name="system.grit.value" value="{{system.grit.value}}" min="0" />
              <span class="res-sep">/</span>
              {{formInput systemFields.grit.fields.max value=system.grit.max name="system.grit.max" disabled=isPlayMode}}
              <a class="grit-btn" data-action="adjustGrit" data-delta="1" data-tooltip="+1">+</a>
            </span>
          </div>

          <div class="npc-vital">
            <span class="vital-label{{#if isPlayMode}} vital-roll-label{{/if}}"
              {{#if isPlayMode}}data-action="rollArmor" data-tooltip="OATHHAMMER.Tooltip.RollArmor"{{/if}}>
              {{#if isPlayMode}}<i class="fa-solid fa-dice-d6"></i>{{/if}}
              {{localize "OATHHAMMER.Label.ArmorDice"}}
            </span>
            <span class="vital-value">
              <input type="number" class="npc-num-input" name="system.armorDice.value" value="{{system.armorDice.value}}" min="0" {{#if isPlayMode}}disabled{{/if}} />
              {{#if isPlayMode}}
              <span class="npc-color-badge">{{armorDiceEmoji}}</span>
              {{else}}
              <select name="system.armorDice.colorDiceType" class="npc-color-select">
                {{selectOptions colorChoices selected=system.armorDice.colorDiceType}}
              </select>
              {{/if}}
            </span>
          </div>

          <div class="npc-vital">
            <span class="vital-label">{{localize "OATHHAMMER.Label.Movement"}}</span>
            <span class="vital-value">
              {{formInput systemFields.movement.fields.base value=system.movement.base name="system.movement.base" disabled=isPlayMode}}
            </span>
          </div>

        </div><!-- /npc-vitals-grid -->

      </div><!-- /npc-right -->
    </div>
  </fieldset>
</section>
