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

  {{!-- Sheet Header --}}
  <header class="sheet-header">
    <div class="actor-header-left">
      <div class="role">{{ system.role.name }}</div>
      <img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="100" width="100"/>
      <div class="specialty">{{ system.specialty.name }}</div>
    </div>
    <div class="header-fields">
      <div class="name">
      <h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name"/></h1>
      <h4 class="pronouns"><input name="system.pronouns" type="text" value="{{system.pronouns}}" placeholder="pronouns"/></h4>
      </div>
      <a class="content-link circle-link" data-uuid='{{ system.circle.uuid }}' data-type="Actor"><h4 class="circle">{{ system.circle.name }}</h4></a>
      {{!-- 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. --}}

        {{#each system.marks as |mark key|}}
        <div class="mark flex-group-center">
          <span for="system.marks.{{key}}.value" class="resource-label">{{ localize (concat "CANDELAFVTT." key
            )}}</span>
          <div class="mark-content flexrow flex-center flex-between">
            <input type="number" min=0 max={{mark.max}} name="system.marks.{{key}}.value" value="{{mark.value}}" data-dtype="Number" />
            <span> / </span>
            <span class=" flexrow" name="system.marks.{{key}}.max">{{mark.max}}</span>
          </div>
        </div>
        {{/each}}

      </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="actions">{{ localize "CANDELAFVTT.actions" }}</a>
    <a class="item" data-tab="abilities">{{ localize "CANDELAFVTT.abilities" }}</a>
    <a class="item character-biography" data-tab="biography">{{ localize "CANDELAFVTT.biography" }}</a>
    <a class="item" data-tab="gear">{{ localize "CANDELAFVTT.gear" }}</a>
  </nav>

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

    {{!-- Action --}}
    <div class="tab actions" data-group="primary" data-tab="actions">
      {{> "systems/candelafvtt/templates/actor/parts/actor-actions.hbs"}}
    </div>

    {{!-- Abilities --}}
    <div class="tab abilities" data-group="primary" data-tab="abilities">
      {{> "systems/candelafvtt/templates/actor/parts/actor-abilities.hbs"}}
    </div>

    {{!-- Biography Tab --}}
    <div class="tab biography" data-group="primary" data-tab="biography">
      {{> "systems/candelafvtt/templates/actor/parts/actor-biography.hbs"}}
    </div>

    {{!-- Owned Gear Tab --}}
    <div class="tab gear" data-group="primary" data-tab="gear">
       {{> "systems/candelafvtt/templates/actor/parts/actor-gear.hbs"}}
    </div>

  </section>
</form>

