<div class="tab main sheet-part" data-group="sheet" data-tab="main">
  {{!-- Toggle Edit/Play --}}
  <div class="sheet-header-toggle">
    {{#if isEditMode}}
      <button type="button" data-action="toggleSheet">{{localize "VERMINE.playMode"}}</button>
    {{else}}
      <button type="button" data-action="toggleSheet">{{localize "VERMINE.editMode"}}</button>
    {{/if}}
  </div>

  {{!-- Sheet Header --}}
  <header class="sheet-header">
    <img class="profile-img" src="{{actor.img}}" data-action="editImage" data-edit="img" title="{{actor.name}}" height="100" width="100"/>
    <div class="header-fields">
      <h1 class="charname">
        {{#if isEditMode}}
        <input name="name" type="text" value="{{actor.name}}" placeholder="{{ localize 'NAME' }}"/>
        {{else}}
        <span>{{actor.name}}</span>
        {{/if}}
      </h1>

      {{!-- Critères : Menace, Expérience, Rôle --}}
      <div class="resources grid grid-3col">
        <div class="resource flex-group-center">
          <label for="system.threat.value" class="resource-label">{{ localize 'ADVERSITY.threat' }}</label>
          <div class="resource-content">
            {{#if isEditMode}}
            <select name="system.threat.value" id="system.threat.value" data-dtype="Number">
              {{#each npcThreatOptions}}
                <option value="{{@key}}" {{#ife @key @root.system.threat.value}}selected{{/ife}}>
                  {{localize label}}
                </option>
              {{/each}}
            </select>
            {{else}}
            <span>{{ system.threat.value }}</span>
            {{/if}}
          </div>
        </div>

        <div class="resource flex-group-center">
          <label for="system.experience.value" class="resource-label">{{ localize 'ADVERSITY.experience' }}</label>
          <div class="resource-content">
            {{#if isEditMode}}
            <select name="system.experience.value" id="system.experience.value" data-dtype="Number">
              {{#each npcExperienceOptions}}
                <option value="{{@key}}" {{#ife @key @root.system.experience.value}}selected{{/ife}}>
                  {{localize label}}
                </option>
              {{/each}}
            </select>
            {{else}}
            <span>{{ system.experience.value }}</span>
            {{/if}}
          </div>
        </div>

        <div class="resource flex-group-center">
          <label for="system.role.value" class="resource-label">{{ localize 'ADVERSITY.role' }}</label>
          <div class="resource-content">
            {{#if isEditMode}}
            <select name="system.role.value" id="system.role.value" data-dtype="Number">
              {{#each npcRoleOptions}}
                <option value="{{@key}}" {{#ife @key @root.system.role.value}}selected{{/ife}}>
                  {{localize label}}
                </option>
              {{/each}}
            </select>
            {{else}}
            <span>{{ system.role.value }}</span>
            {{/if}}
          </div>
        </div>
      </div>

      {{!-- Profil : âge, activité, totem, origine --}}
      <div class="resources grid grid-4col npc-profile-grid">
        <div class="resource flex-group-center">
          <label for="system.identity.age" class="resource-label">{{ localize 'IDENTITY.age' }}</label>
          <div class="resource-content">
            {{#if isEditMode}}
            <input type="text" name="system.identity.age" id="system.identity.age" value="{{system.identity.age}}" data-dtype="String"/>
            {{else}}
            <span>{{system.identity.age}}</span>
            {{/if}}
          </div>
        </div>
        <div class="resource flex-group-center">
          <label for="system.identity.profile" class="resource-label">{{ localize 'IDENTITY.profile' }}</label>
          <div class="resource-content">
            {{#if isEditMode}}
            <input type="text" name="system.identity.profile" id="system.identity.profile" value="{{system.identity.profile}}" data-dtype="String" placeholder="{{ localize 'PROFILE' }}"/>
            {{else}}
            <span>{{system.identity.profile}}</span>
            {{/if}}
          </div>
        </div>
        <div class="resource flex-group-center">
          <label for="system.identity.totem" class="resource-label">{{ localize 'TOTEM' }}</label>
          <div class="resource-content">
            {{#if isEditMode}}
            <select name="system.identity.totem" id="system.identity.totem" data-dtype="String">
              <option value="">{{ localize 'NONE' }}</option>
              {{#each totemOptions}}
                <option value="{{@key}}" {{#ife @key @root.system.identity.totem}}selected{{/ife}}>
                  {{localize this}}
                </option>
              {{/each}}
            </select>
            {{else}}
            <span>{{system.identity.totem}}</span>
            {{/if}}
          </div>
        </div>
        <div class="resource flex-group-center">
          <label for="system.identity.origin" class="resource-label">{{ localize 'ORIGIN' }}</label>
          <div class="resource-content">
            {{#if isEditMode}}
            <input type="text" name="system.identity.origin" id="system.identity.origin" value="{{system.identity.origin}}" data-dtype="String" placeholder="{{ localize 'ORIGIN' }}"/>
            {{else}}
            <span>{{system.identity.origin}}</span>
            {{/if}}
          </div>
        </div>
      </div>
    </div>
  </header>
</div>
