Daggerheart-fvtt/templates/actor/actor-character-sheet.hbs

<form class="{{cssClass}} {{actor.type}} flexcol" autocomplete="off">

  {{!-- Sheet Header --}}
  <header class="sheet-header">
    <img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="100" width="100"/>
    <div class="header-fields">
      <h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name"/></h1>
      {{!-- 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">Health</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">Power</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">
          <label for="system.attributes.level.value" class="resource-label">Level</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>
        </div>

      </div>
    </div>
  </header>

  {{!-- Sheet Tab Navigation --}}
  <nav class="sheet-tabs tabs" data-group="primary">
    {{!-- Default tab is specified in actor-sheet.mjs --}}
    <a class="item" data-tab="features">Features</a>
    <a class="item" data-tab="description">Description</a>
    <a class="item" data-tab="items">Items</a>
    <a class="item" data-tab="spells">Spells</a>
    <a class="item" data-tab="effects">Effects</a>
  </nav>

  {{!-- Sheet Body --}}
  <section class="sheet-body">

    {{!-- Owned Features Tab --}}
    <div class="tab features" data-group="primary" data-tab="features">
      <section class="grid grid-3col">
        <aside class="sidebar">

          {{!-- 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="abilities flexcol">
            {{#each system.abilities as |ability key|}}
            <div class="ability flexrow flex-group-center">
              <label for="system.abilities.{{key}}.value" class="resource-label rollable flexlarge align-left" data-roll="d20+@abilities.{{key}}.mod" data-label="{{ability.label}}">{{ability.label}}</label>
              <input type="text" name="system.abilities.{{key}}.value" value="{{ability.value}}" data-dtype="Number"/>
              <span class="ability-mod rollable" data-roll="d20+@abilities.{{key}}.mod" data-label="{{ability.label}}">{{numberFormat ability.mod decimals=0 sign=true}}</span>
            </div>
            {{/each}}
          </div>
        </aside>

        {{!-- For the main features list, span the right two columns --}}
        <section class="main grid-span-2">
          {{!-- This is a Handlebars partial. They're stored in the `/parts` folder next to this sheet, and defined in module/helpers/templates.mjs --}}
          {{> "systems/boilerplate/templates/actor/parts/actor-features.hbs"}}
        </section>

      </section>
    </div>

    {{!-- Biography Tab --}}
    <div class="tab biography" data-group="primary" data-tab="description">
      {{!-- If you want TinyMCE editors to output inline rolls when rendered, you need to pass the actor's roll data to the rollData property. --}}
      {{editor system.biography target="system.biography" rollData=rollData button=true owner=owner editable=editable}}
    </div>

    {{!-- Owned Items Tab --}}
    <div class="tab items" data-group="primary" data-tab="items">
       {{> "systems/boilerplate/templates/actor/parts/actor-items.hbs"}}
    </div>

    {{!-- Owned Spells Tab --}}
    <div class="tab spells" data-group="primary" data-tab="spells">
      {{> "systems/boilerplate/templates/actor/parts/actor-spells.hbs"}}
    </div>

    {{!-- Active Effects Tab --}}
    <div class="tab effects flexcol" data-group="primary" data-tab="effects">
      {{> "systems/boilerplate/templates/actor/parts/actor-effects.hbs"}}
    </div>

  </section>
</form>

{{log system}}