<form class="{{cssClass}} {{actor.type}} flexcol form" 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">
      <div class="resources grid grid-4col">
        <h1 class="charname grid-span-2">
          <input name="name" type="text" value="{{actor.name}}" placeholder="{{ localize 'IDENTITY.name' }}"/>
        </h1>
        <div class="resource flex-group-center grid-span-1">
          <label for="system.pattern.value" class="resource-label">{{ localize 'ADVERSITY.pattern' }}</label>
          <div class="resource-content">
            <select name="system.pattern.value" id="system.pattern.value" data-dtype="Number">
              {{#each ../config.creaturePatternLevels}}
                <option value="{{@key}}" {{#ife @key ../system.pattern.value}}selected{{/ife}}>
                  {{localize this.label}} ({{@key}})
                </option>
              {{/each}}
            </select>
          </div>
        </div>
        <div class="resource flex-group-center grid-span-1">
          <label for="system.role.value" class="resource-label">{{ localize 'ADVERSITY.role' }}</label>
          <div class="resource-content">
            <select name="system.role.value" id="system.role.value" data-dtype="Number">
              {{#each ../config.creatureRoleLevels}}
                <option value="{{@key}}" {{#ife @key ../system.role.value}}selected{{/ife}}>
                  {{localize this.label}} ({{@key}})
                </option>
              {{/each}}
            </select>
          </div>
        </div>
      </div>
      <div class="resources grid grid-4col">
        <div class="resource flex-group-center">
          <label for="system.size.value" class="resource-label">{{ localize 'ADVERSITY.size' }}</label>
          <div class="resource-content">
            <select name="system.size.value" id="system.size.value" data-dtype="Number">
              {{#each ../config.creatureSizeLevels}}
                <option value="{{@key}}" {{#ife @key ../system.size.value}}selected{{/ife}}>
                  {{@key}}
                </option>
              {{/each}}
            </select>
          </div>
        </div>
        <div class="resource flex-group-center">
          <label for="system.pack.value" class="resource-label">{{ localize 'ADVERSITY.pack' }}</label>
          <div class="resource-content">
            <select name="system.pack.value" id="system.pack.value" data-dtype="Number">
              <option value="0">{{localize 'VERMINE.none'}}</option>
              {{#each ../config.creaturePackLevels}}
                {{#if @key}}
                  <option value="{{@key}}" {{#ife @key ../system.pack.value}}selected{{/ife}}>
                    {{@key}}
                  </option>
                {{/if}}
              {{/each}}
            </select>
          </div>
        </div>
        <div class="resource flex-group-center grid-span-2">
          <label class="resource-label">{{ localize 'VERMINE.computed_values' }}</label>
          <div class="resource-content">
            <span>{{ localize 'VERMINE.total_attack' }}: {{ system.computed.attack }}</span>
            <span style="margin-left: 10px;">{{ localize 'ADVERSITY.damage' }}: {{ system.computed.damage }}</span>
          </div>
        </div>
      </div>
    </div>
  </header>

  {{!-- Sheet Tab Navigation --}}
  <nav class="sheet-tabs tabs" data-group="primary">
    <a class="item" data-tab="description">{{ localize 'VERMINE.information' }}</a>
    <a class="item" data-tab="stats">{{ localize 'VERMINE.stats' }}</a>
    <a class="item" data-tab="combat">{{ localize 'VERMINE.combat' }}</a>
    <a class="item" data-tab="effects">{{ localize 'UI.effects.name' }}</a>
  </nav>

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

    {{!-- Information Tab --}}
    <div class="tab biography" data-group="primary" data-tab="description">
      <div class="grid grid-2col">
        <div>
          <h4>{{ localize 'IDENTITY.profile' }}</h4>
          <input type="text" name="system.identity.profile" value="{{system.identity.profile}}" 
                 placeholder="Profil..." style="width: 100%;" />
        </div>
        <div>
          <h4>{{ localize 'IDENTITY.origin' }}</h4>
          <input type="text" name="system.identity.origin" value="{{system.identity.origin}}" 
                 placeholder="Origine..." style="width: 100%;" />
        </div>
        <div>
          <h4>{{ localize 'IDENTITY.theme' }}</h4>
          <input type="text" name="system.identity.theme" value="{{system.identity.theme}}" 
                 placeholder="Concept..." style="width: 100%;" />
        </div>
        <div>
          <h4>{{ localize 'ADVERSITY.skills' }}</h4>
          <input type="text" name="system.skills" value="{{system.skills}}" 
                 placeholder="Compétences..." style="width: 100%;" />
        </div>
      </div>
      
      <div class="grid-span-2">
        <h4>{{ localize 'IDENTITY.notes' }}</h4>
        {{editor system.identity.notes target="system.identity.notes" button=true owner=owner editable=editable}}
      </div>
      
      {{!-- Modes --}}
      <div class="grid-span-2">
        <h4>{{ localize 'VERMINE.modes' }}</h4>
        <div class="grid grid-3col">
          <div>
            <label>
              <input type="checkbox" name="system.modes.survival" 
                     {{#if system.modes.survival}}checked{{/if}} data-dtype="Boolean" />
              {{ localize 'GAME_MODES.survival' }}
            </label>
          </div>
          <div>
            <label>
              <input type="checkbox" name="system.modes.nightmare" 
                     {{#if system.modes.nightmare}}checked{{/if}} data-dtype="Boolean" />
              {{ localize 'GAME_MODES.nightmare' }}
            </label>
          </div>
          <div>
            <label>
              <input type="checkbox" name="system.modes.apocalypse" 
                     {{#if system.modes.apocalypse}}checked{{/if}} data-dtype="Boolean" />
              {{ localize 'GAME_MODES.apocalypse' }}
            </label>
          </div>
        </div>
      </div>
    </div>

    {{!-- Stats Tab --}}
    <div class="tab stats" data-group="primary" data-tab="stats">
      <h3>{{ localize 'VERMINE.base_values' }}</h3>
      <section class="grid grid-3col gap-md">
        <div class="mdb">
          <h4 class="align-center">{{ localize 'ADVERSITY.pattern' }}: {{ patternLabel }}</h4>
          <ul class="unstyled">
            <li>{{ localize 'ADVERSITY.attack' }}: {{ creaturePatternLevel "attack" system.pattern.value }}</li>
            <li>{{ localize 'ADVERSITY.damage' }}: {{ creaturePatternLevel "damage" system.pattern.value }}</li>
            <li>{{ localize 'ADVERSITY.wounds' }}: 
              {{ creaturePatternLevel "minorWound" system.pattern.value }}/
              {{ creaturePatternLevel "majorWound" system.pattern.value }}/
              {{ creaturePatternLevel "deadlyWound" system.pattern.value }}
            </li>
          </ul>
        </div>
        <div class="mdb">
          <h4 class="align-center">{{ localize 'ADVERSITY.size' }}: {{ sizeLabel }}</h4>
          <ul class="unstyled">
            <li>{{ localize 'ADVERSITY.attack' }}: {{ creatureSizeLevel "attack" system.size.value }}</li>
            <li>{{ localize 'ADVERSITY.vigor' }}: {{ creatureSizeLevel "vigor" system.size.value }}</li>
            <li>{{ localize 'ADVERSITY.wounds' }}: 
              {{ creatureSizeLevel "minorWound" system.size.value }}/
              {{ creatureSizeLevel "majorWound" system.size.value }}/
              {{ creatureSizeLevel "deadlyWound" system.size.value }}
            </li>
          </ul>
        </div>
        <div class="mdb">
          <h4 class="align-center">{{ localize 'ADVERSITY.role' }}: {{ roleLabel }}</h4>
          <ul class="unstyled">
            <li>{{ localize 'ADVERSITY.reaction' }}: {{ creatureRoleLevel "reaction" system.role.value }} + {{ creatureRoleLevel "reaction_bonus" system.role.value }}</li>
            <li>{{ localize 'ADVERSITY.pools' }}: {{ creatureRoleLevel "pools" system.role.value }}</li>
            <li>{{ localize 'ADVERSITY.gear' }}: {{ creatureRoleLevel "gear" system.role.value }}</li>
            <li>{{ localize 'ADVERSITY.protection' }}: {{ creatureRoleLevel "protection" system.role.value }}</li>
          </ul>
        </div>
      </section>
      
      <section class="grid grid-2col gap-md">
        <div class="mdb">
          <h4 class="align-center">{{ localize 'ADVERSITY.pack' }}: {{ packLabel }}</h4>
          <ul class="unstyled">
            <li>{{ localize 'ADVERSITY.attack' }}: {{ creaturePackLevel "attack" system.pack.value }}</li>
            <li>{{ localize 'ADVERSITY.damage' }}: {{ creaturePackLevel "damage" system.pack.value }}</li>
            <li>{{ localize 'ADVERSITY.wounds' }}: 
              {{ creaturePackLevel "minorWound" system.pack.value }}/
              {{ creaturePackLevel "majorWound" system.pack.value }}/
              {{ creaturePackLevel "deadlyWound" system.pack.value }}
            </li>
          </ul>
        </div>
        <div class="mdb">
          <h4 class="align-center">{{ localize 'VERMINE.wound_thresholds' }}</h4>
          <ul class="unstyled">
            <li>{{ localize 'VERMINE.wounds.light' }}: {{ system.minorWound.threshold }}D</li>
            <li>{{ localize 'VERMINE.wounds.heavy' }}: {{ system.majorWound.threshold }}D</li>
            <li>{{ localize 'VERMINE.wounds.deadly' }}: {{ system.deadlyWound.threshold }}D</li>
          </ul>
        </div>
      </section>
    </div>

    {{!-- Combat Tab --}}
    <div class="tab effects" data-group="primary" data-tab="combat">
      <h3>{{ localize 'VERMINE.combat' }}</h3>
      {{> "systems/vermine2047/templates/actor/creature/creature-combat.hbs"}}
    </div>

    {{!-- Effects Tab --}}
    <div class="tab effects" data-group="primary" data-tab="effects">
      <h3>{{ localize 'UI.effects.name' }}</h3>
      {{> "systems/vermine2047/templates/actor/parts/actor-effects.hbs"}}
    </div>

  </section>
</form>
