<div class='ms-resource ms-{{type}}'>
  <div class='ms-resource-display' data-edit-target='{{type}}' title='{{localize titleKey}}'>
    <div class='ms-resource-bar'>
      <div class='ms-resource-fill' style='width: {{percent resource.value resource.max}}%;'></div>
    </div>
    <span class='ms-resource-text'>{{resource.value}}/{{resource.max}}</span>
  </div>
  <div class='ms-resource-edit'>
    <input type='number' name='{{valuePath}}' value='{{resource.value}}' class='ms-resource-input'/>
    <span class='ms-resource-separator'>/</span>
    <input type='number' name='{{maxPath}}' value='{{resource.max}}' class='ms-resource-input'/>
  </div>
  <button type='button' class='ms-resource-reset' data-action='reset-{{type}}' title='Reset to max'>
    <i class='fas fa-rotate-left'></i>
  </button>
  {{#if showCondition}}<span class='ms-condition-badge' title='{{localize conditionTitleKey}}'>{{conditionBadge}}</span>{{/if}}
</div>
