<div class='ms-hp-fp-row'>
  <div class='ms-resource ms-hp'>
    <div class='ms-resource-display' data-edit-target='hp' title='{{localize "GURPS.attributesHPNAME"}}'>
      <div class='ms-resource-bar'>
        <div class='ms-resource-fill' style='width: {{percent system.HP.value system.HP.max}}%;'></div>
      </div>
      <span class='ms-resource-text {{#if (isNegative system.HP.value)}}ms-hp-negative{{/if}}'>{{system.HP.value}}/{{system.HP.max}}</span>
    </div>
    <div class='ms-resource-edit'>
      <input type='number' name='system.HP.value' value='{{system.HP.value}}' class='ms-resource-input'/>
      <span class='ms-resource-separator'>/</span>
      <input type='number' name='system.HP.max' value='{{system.HP.max}}' class='ms-resource-input'/>
    </div>
    <button type='button' class='ms-resource-reset' data-action='reset-hp' title='Reset to max'>
      <i class='fas fa-rotate-left'></i>
    </button>
    {{#if system.conditions.reeling}}<span class='ms-condition-badge' title='{{localize "GURPS.HP.reeling"}}'>R</span>{{/if}}
  </div>
  <div class='ms-resource ms-fp'>
    <div class='ms-resource-display' data-edit-target='fp' title='{{localize "GURPS.attributesFPNAME"}}'>
      <div class='ms-resource-bar'>
        <div class='ms-resource-fill' style='width: {{percent system.FP.value system.FP.max}}%;'></div>
      </div>
      <span class='ms-resource-text'>{{system.FP.value}}/{{system.FP.max}}</span>
    </div>
    <div class='ms-resource-edit'>
      <input type='number' name='system.FP.value' value='{{system.FP.value}}' class='ms-resource-input'/>
      <span class='ms-resource-separator'>/</span>
      <input type='number' name='system.FP.max' value='{{system.FP.max}}' class='ms-resource-input'/>
    </div>
    <button type='button' class='ms-resource-reset' data-action='reset-fp' title='Reset to max'>
      <i class='fas fa-rotate-left'></i>
    </button>
    {{#if system.conditions.exhausted}}<span class='ms-condition-badge' title='{{localize "GURPS.FP.tired"}}'>T</span>{{/if}}
  </div>
</div>
