<div class="header {{#if editable}}with-editor minor-heading{{/if}}">
  {{#if label}}
    {{localize label}}
  {{else}}
    {{localize "GURPS.resource"}}{{@index}}
  {{/if}}{{#if editable}}<span class='edit'><i class='fas fa-pencil-alt'></i></span>{{/if}}
</div>
<div class="spinner">
  <button data-operation="resource-dec">
    <i class="fas fa-minus"></i>
  </button>
  <details>
    <summary>
      <input class="gcs-attr-input" type="text" value="{{resource.value}}" placeholder="{{resource.max}}"
        data-dtype="Number" />
    </summary>
    <div class="popup button-ribbon">
      <button data-operation="resource-update" data-value="-10">{{{displayNumber "-10"}}}</button>
      <button data-operation="resource-update" data-value="-5">{{{displayNumber "-5"}}}</button>
      <button data-operation="resource-update" data-value="-1">{{{displayNumber "-1"}}}</button>
      <button data-operation="resource-update" data-value="0">{{{displayNumber "0"}}}</button>
      <button data-operation="resource-update" data-value="" class="restore"></button>
      <button data-operation="resource-update" data-value="+1">{{{displayNumber "+1"}}}</button>
      <button data-operation="resource-update" data-value="+5">{{{displayNumber "+5"}}}</button>
      <button data-operation="resource-update" data-value="+10">{{{displayNumber "+10"}}}</button>
    </div>
  </details>
  <button data-operation="resource-inc"><i class="fas fa-plus"></i></button>
  <button data-operation="resource-reset"><i class="fas fa-undo"></i></button>
</div>