<form class="{{cssClass}} 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-2col">
              {{!-- "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="data.health.value" class="resource-label">Health</label>
                  <div class="resource-content flexrow flex-center flex-between">
                    <input type="text" name="data.health.value" value="{{data.health.value}}" data-dtype="Number"/>
                    <span> / </span>
                    <input type="text" name="data.health.max" value="{{data.health.max}}" data-dtype="Number"/>
                  </div>
              </div>
              <div class="resource flex-group-center">
                  <label for="data.power.value" class="resource-label">Power</label>
                  <div class="resource-content flexrow flex-center flex-between">
                    <input type="text" name="data.power.value" value="{{data.power.value}}" data-dtype="Number"/>
                    <span> / </span>
                    <input type="text" name="data.power.max" value="{{data.power.max}}" data-dtype="Number"/>
                  </div>
              </div>
          </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="abilities grid grid-3col">
            {{#each data.abilities as |ability key|}}
              <div class="ability flexrow flex-group-center">
                <label for="data.abilities.{{key}}.value" class="resource-label">{{key}}</label>
                <input type="text" name="data.abilities.{{key}}.value" value="{{ability.value}}" data-dtype="Number"/>
                <span class="ability-mod rollable" data-roll="d20+@abilities.{{key}}.mod" data-label="{{key}}">{{numberFormat ability.mod decimals=0 sign=true}}</span>
              </div>
            {{/each}}
          </div>
        </div>
    </header>

    {{!-- Sheet Tab Navigation --}}
    <nav class="sheet-tabs tabs" data-group="primary">
        <a class="item" data-tab="description">Description</a>
        <a class="item" data-tab="items">Items</a>
    </nav>

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

        {{!-- Biography Tab --}}
        <div class="tab biography" data-group="primary" data-tab="description">
            {{editor content=data.biography target="data.biography" button=true owner=owner editable=editable}}
        </div>

        {{!-- Owned Items Tab --}}
        <div class="tab items" data-group="primary" data-tab="items">
            <ol class="items-list">
                <li class="item flexrow item-header">
                  <div class="item-image"></div>
                  <div class="item-name">Name</div>
                  <div class="item-controls">
                    <a class="item-control item-create" title="Create item" data-type="item"><i class="fas fa-plus"></i> Add item</a>
                  </div>
                </li>
            {{#each actor.items as |item id|}}
                <li class="item flexrow" data-item-id="{{item._id}}">
                    <div class="item-image"><img src="{{item.img}}" title="{{item.name}}" width="24" height="24"/></div>
                    <h4 class="item-name">{{item.name}}</h4>
                    <div class="item-controls">
                        <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
                        <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
                    </div>
                </li>
            {{/each}}
            </ol>
        </div>

    </section>
</form>