{{! Sheet Header }}
<header class='sheet-header'>
  <img
    class='profile-img'
    src='{{actor.img}}'
    data-edit='img'
    data-action='onEditImage'
    title='{{actor.name}}'
    height='100'
    width='100'
  />
  <div class='header-fields'>
    <div class='document-name'>
      <input
        name='name'
        type='text'
        value='{{actor.name}}'
        placeholder='Name'
      />
    </div>
    {{! The grid classes are defined in scss/global/_grid.scss. To use,
      use both the "grid" and "grid-Ncol" class where "N" can be any number
      from 1 to 12 and will create that number of columns.  }}
    <div class='resources grid grid-3col'>

      {{! "flex-group-center" is also defined in the _grid.scss file
        and it will add a small amount of padding, a border, and will
        center all of its child elements content and text. }}
      <div class='resource flex-group-center'>
        <label for='system.health.value' class='resource-label'>
          {{label 'health.value'}}
        </label>
        <div class='resource-content flexrow flex-center flex-between'>
          <input
            type='text'
            name='system.health.value'
            value='{{system.health.value}}'
            data-dtype='Number'
          />
          <span> / </span>
          <input
            type='text'
            name='system.health.max'
            value='{{system.health.max}}'
            data-dtype='Number'
          />
        </div>
      </div>

      <div class='resource flex-group-center'>
        <label for='system.power.value' class='resource-label'>
           {{label 'power.value'}}
        </label>
        <div class='resource-content flexrow flex-center flex-between'>
          <input
            type='text'
            name='system.power.value'
            value='{{system.power.value}}'
            data-dtype='Number'
          />
          <span> / </span>
          <input
            type='text'
            name='system.power.max'
            value='{{system.power.max}}'
            data-dtype='Number'
          />
        </div>
      </div>

      <div class='resource flex-group-center'>
        {{#if (eq actor.type 'character')}}
          <label class='resource-label'>
            {{label 'attributes.level.value'}}
          </label>
          <div class='resource-content flexrow flex-center flex-between'>
            <input
              type='text'
              name='system.attributes.level.value'
              value='{{system.attributes.level.value}}'
              data-dtype='Number'
            />
          </div>
        {{/if}}
        {{#if (eq actor.type 'npc')}}
          <label class='resource-label'>
            {{label 'cr'}} / {{label 'xp'}}
          </label>
          <div class='resource-content flexrow flex-center flex-between'>
            <input
              type='text'
              name='system.cr'
              value='{{system.cr}}'
              data-dtype='Number'
            />
            <span></span>
            <input
              type='text'
              disabled='true'
              name='system.xp'
              value='{{system.xp}}'
              data-dtype='Number'
            />
          </div>
        {{/if}}
      </div>
    </div>
  </div>
</header>