<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">
      <h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="{{ localize 'NAME' }}"/></h1>

      {{!-- Niveaux de Menace, Experience, Role --}}
      <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">
            <select name="system.threat.value" id="system.threat.value" data-dtype="Number">
              {{#each ../config.npcThreatLevels}}
                <option value="{{@key}}" {{#ife @key ../system.threat.value}}selected{{/ife}}>
                  {{localize this.label}} ({{@key}})
                </option>
              {{/each}}
            </select>
          </div>
        </div>

        <div class="resource flex-group-center">
          <label for="system.experience.value" class="resource-label">{{ localize 'ADVERSITY.experience' }}</label>
          <div class="resource-content">
            <select name="system.experience.value" id="system.experience.value" data-dtype="Number">
              {{#each ../config.npcExperienceLevels}}
                <option value="{{@key}}" {{#ife @key ../system.experience.value}}selected{{/ife}}>
                  {{localize this.label}} ({{@key}})
                </option>
              {{/each}}
            </select>
          </div>
        </div>

        <div class="resource flex-group-center">
          <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.npcRoleLevels}}
                <option value="{{@key}}" {{#ife @key ../system.role.value}}selected{{/ife}}>
                  {{localize this.label}} ({{@key}})
                </option>
              {{/each}}
            </select>
          </div>
        </div>
      </div>

      {{!-- Totem et Origine --}}
      <div class="resources grid grid-2col">
        <div class="resource flex-group-center">
          <label for="system.identity.totem" class="resource-label">{{ localize 'TOTEM' }}</label>
          <div class="resource-content">
            <select name="system.identity.totem" id="system.identity.totem" data-dtype="String">
              <option value="">{{ localize 'NONE' }}</option>
              {{#each ../config.totems}}
                <option value="{{@key}}" {{#ife @key ../system.identity.totem}}selected{{/ife}}>
                  {{localize this}}
                </option>
              {{/each}}
            </select>
          </div>
        </div>
        <div class="resource flex-group-center">
          <label for="system.identity.origin" class="resource-label">{{ localize 'ORIGIN' }}</label>
          <div class="resource-content">
            <select name="system.identity.origin" id="system.identity.origin" data-dtype="String">
              <option value="">{{ localize 'NONE' }}</option>
              {{#each ../config.origins}}
                <option value="{{@key}}" {{#ife @key ../system.identity.origin}}selected{{/ife}}>
                  {{this}}
                </option>
              {{/each}}
            </select>
          </div>
        </div>
      </div>
    </div>
  </header>

  {{!-- Navigation --}}
  <nav class="sheet-tabs tabs" data-group="primary">
    <a class="item" data-tab="characteristics"><i class="fas fa-dice"></i> {{ localize 'VERMINE.abilities' }}</a>
    <a class="item" data-tab="skills"><i class="fas fa-brain"></i> {{ localize 'VERMINE.skills' }}</a>
    <a class="item" data-tab="threat"><i class="fas fa-exclamation-triangle"></i> {{ localize 'ADVERSITY.threat' }}</a>
    <a class="item" data-tab="equipment"><i class="fas fa-backpack"></i> {{ localize 'VERMINE.equipment' }}</a>
    <a class="item" data-tab="combat"><i class="fas fa-sword"></i> {{ localize 'VERMINE.combat' }}</a>
    <a class="item" data-tab="notes"><i class="fas fa-sticky-note"></i> {{ localize 'IDENTITY.notes' }}</a>
  </nav>

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

    {{!-- Characteristics Tab --}}
    <div class="tab characteristics" data-group="primary" data-tab="characteristics">
      <h3>{{ localize 'VERMINE.abilities' }}</h3>
      
      {{!-- Caracteristiques physiques --}}
      <div class="ability-section">
        <h4 class="ability-category-header">{{ localize 'VERMINE.ability_category.physical' }}</h4>
        <div class="grid grid-2col">
          <div class="ability-item">
            <label for="system.abilities.vigor.value">{{ localize 'ABILITIES.vigor.name' }}</label>
            <div class="ability-control">
              <input type="range" name="system.abilities.vigor.value" value="{{system.abilities.vigor.value}}" min="{{system.abilities.vigor.min}}" max="{{system.abilities.vigor.max}}" data-dtype="Number"/>
              <span class="ability-value">{{system.abilities.vigor.value}}D</span>
            </div>
          </div>
          <div class="ability-item">
            <label for="system.abilities.health.value">{{ localize 'ABILITIES.health.name' }}</label>
            <div class="ability-control">
              <input type="range" name="system.abilities.health.value" value="{{system.abilities.health.value}}" min="{{system.abilities.health.min}}" max="{{system.abilities.health.max}}" data-dtype="Number"/>
              <span class="ability-value">{{system.abilities.health.value}}D</span>
            </div>
          </div>
        </div>
      </div>

      {{!-- Caracteristiques manuelles --}}
      <div class="ability-section">
        <h4 class="ability-category-header">{{ localize 'VERMINE.ability_category.manual' }}</h4>
        <div class="grid grid-2col">
          <div class="ability-item">
            <label for="system.abilities.precision.value">{{ localize 'ABILITIES.precision.name' }}</label>
            <div class="ability-control">
              <input type="range" name="system.abilities.precision.value" value="{{system.abilities.precision.value}}" min="{{system.abilities.precision.min}}" max="{{system.abilities.precision.max}}" data-dtype="Number"/>
              <span class="ability-value">{{system.abilities.precision.value}}D</span>
            </div>
          </div>
          <div class="ability-item">
            <label for="system.abilities.reflexes.value">{{ localize 'ABILITIES.reflexes.name' }}</label>
            <div class="ability-control">
              <input type="range" name="system.abilities.reflexes.value" value="{{system.abilities.reflexes.value}}" min="{{system.abilities.reflexes.min}}" max="{{system.abilities.reflexes.max}}" data-dtype="Number"/>
              <span class="ability-value">{{system.abilities.reflexes.value}}D</span>
            </div>
          </div>
        </div>
      </div>

      {{!-- Caracteristiques mentales --}}
      <div class="ability-section">
        <h4 class="ability-category-header">{{ localize 'VERMINE.ability_category.mental' }}</h4>
        <div class="grid grid-2col">
          <div class="ability-item">
            <label for="system.abilities.knowledge.value">{{ localize 'ABILITIES.knowledge.name' }}</label>
            <div class="ability-control">
              <input type="range" name="system.abilities.knowledge.value" value="{{system.abilities.knowledge.value}}" min="{{system.abilities.knowledge.min}}" max="{{system.abilities.knowledge.max}}" data-dtype="Number"/>
              <span class="ability-value">{{system.abilities.knowledge.value}}D</span>
            </div>
          </div>
          <div class="ability-item">
            <label for="system.abilities.perception.value">{{ localize 'ABILITIES.perception.name' }}</label>
            <div class="ability-control">
              <input type="range" name="system.abilities.perception.value" value="{{system.abilities.perception.value}}" min="{{system.abilities.perception.min}}" max="{{system.abilities.perception.max}}" data-dtype="Number"/>
              <span class="ability-value">{{system.abilities.perception.value}}D</span>
            </div>
          </div>
        </div>
      </div>

      {{!-- Caracteristiques sociales --}}
      <div class="ability-section">
        <h4 class="ability-category-header">{{ localize 'VERMINE.ability_category.social' }}</h4>
        <div class="grid grid-2col">
          <div class="ability-item">
            <label for="system.abilities.will.value">{{ localize 'ABILITIES.will.name' }}</label>
            <div class="ability-control">
              <input type="range" name="system.abilities.will.value" value="{{system.abilities.will.value}}" min="{{system.abilities.will.min}}" max="{{system.abilities.will.max}}" data-dtype="Number"/>
              <span class="ability-value">{{system.abilities.will.value}}D</span>
            </div>
          </div>
          <div class="ability-item">
            <label for="system.abilities.empathy.value">{{ localize 'ABILITIES.empathy.name' }}</label>
            <div class="ability-control">
              <input type="range" name="system.abilities.empathy.value" value="{{system.abilities.empathy.value}}" min="{{system.abilities.empathy.min}}" max="{{system.abilities.empathy.max}}" data-dtype="Number"/>
              <span class="ability-value">{{system.abilities.empathy.value}}D</span>
            </div>
          </div>
        </div>
      </div>

      {{!-- Reserves --}}
      <div class="ability-section">
        <h4 class="ability-category-header">{{ localize 'VERMINE.reserves' }}</h4>
        <div class="grid grid-2col">
          <div class="ability-item">
            <span>{{ localize 'VERMINE.effort' }} : {{system.attributes.effort.value}}/{{system.attributes.effort.max}}D</span>
          </div>
          <div class="ability-item">
            <span>{{ localize 'VERMINE.self_control' }} : {{system.attributes.self_control.value}}/{{system.attributes.self_control.max}}D</span>
          </div>
        </div>
      </div>
    </div>

    {{!-- Skills Tab --}}
    <div class="tab skills" data-group="primary" data-tab="skills">
      <h3>{{ localize 'VERMINE.skills' }}</h3>
      
      {{!-- Category Selector --}}
      <div class="skill-category-selector">
        <label>{{ localize 'VERMINE.preferred_category' }}:</label>
        <select name="system.skill_categories.preferred" data-dtype="String">
          <option value="">{{ localize 'NONE' }}</option>
          {{#each system.skill_categories as |category key|}}
            {{#ife key "preferred"}}{{else}}
              <option value="{{key}}" {{#ife key ../system.skill_categories.preferred}}selected{{/ife}}>
                {{localize category.label}}
              </option>
            {{/ife}}
          {{/each}}
        </select>
      </div>

      {{!-- Skills Grid by Category --}}
      <div class="skills-container">
        {{#each config.skillCategories as |category key|}}
          {{#if (ne key "preferred")}}
            {{> "systems/vermine2047/templates/actor/parts/npc-skill-category.hbs" 
              categoryKey=key 
              categoryLabel=(concat "VERMINE.skill_category." key)
              skills=@root.system.skills
            }}
          {{/if}}
        {{/each}}
      </div>
    </div>

    {{!-- Threat/Experience/Role Details Tab --}}
    <div class="tab threat-details" data-group="primary" data-tab="threat">
      <h3>{{ localize 'ADVERSITY.threat_details' }}</h3>
      <div class="grid grid-3col">
        {{!-- Menace --}}
        <div class="card npc-card">
          <h4 class="align-center"><i class="fas fa-exclamation-triangle"></i> {{ localize 'ADVERSITY.threat' }}</h4>
          <ul class="unstyled">
            <li>
              <strong>{{ localize 'ADVERSITY.attack' }}:</strong>
              {{ npcThreatLevel "attack" system.threat.value }}
            </li>
            <li>
              <strong>{{ localize 'ADVERSITY.vigor' }}:</strong>
              {{ npcThreatLevel "vigor" system.threat.value }}
            </li>
            <li>
              <strong>{{ localize 'ADVERSITY.wounds' }}:</strong>
              {{ npcThreatLevel "minorWound" system.threat.value }} /
              {{ npcThreatLevel "majorWound" system.threat.value }} /
              {{ npcThreatLevel "deadlyWound" system.threat.value }}
            </li>
          </ul>
        </div>

        {{!-- Experience --}}
        <div class="card npc-card">
          <h4 class="align-center"><i class="fas fa-star"></i> {{ localize 'ADVERSITY.experience' }}</h4>
          <ul class="unstyled">
            <li>
              <label for="system.freeSkills">{{ localize 'ADVERSITY.skills' }}</label>
              <input type="text" name="system.freeSkills" value="{{system.freeSkills}}" data-dtype="String" placeholder="{{ localize 'ADVERSITY.skills_placeholder' }}"/>
            </li>
            <li>
              <strong>{{ localize 'ADVERSITY.action' }}:</strong>
              {{ npcExperienceLevel "action" system.experience.value }}D
            </li>
            <li>
              <strong>{{ localize 'ADVERSITY.specialties' }}:</strong>
              {{ npcExperienceLevel "specialties" system.experience.value }}
            </li>
            <li>
              <strong>{{ localize 'ADVERSITY.rerolls' }}:</strong>
              {{ npcExperienceLevel "rerolls" system.experience.value }}D
            </li>
            <li>
              <strong>{{ localize 'ADVERSITY.contact' }}:</strong>
              {{ npcExperienceLevel "contact" system.experience.value }}
            </li>
          </ul>
        </div>

        {{!-- Role --}}
        <div class="card npc-card">
          <h4 class="align-center"><i class="fas fa-users"></i> {{ localize 'ADVERSITY.role' }}</h4>
          <ul class="unstyled">
            <li>
              <strong>{{ localize 'ADVERSITY.reaction' }}:</strong>
              {{ npcRoleLevel "reaction" system.role.value }} + {{ npcRoleLevel "reaction_bonus" system.role.value }}
            </li>
            <li>
              <strong>{{ localize 'ADVERSITY.pools' }}:</strong>
              {{ npcRoleLevel "pools" system.role.value }}D
            </li>
            <li>
              <strong>{{ localize 'ADVERSITY.gear' }}:</strong>
              {{ npcRoleLevel "gear" system.role.value }}
            </li>
            <li>
              <strong>{{ localize 'ADVERSITY.gear_hindrance' }}:</strong>
              {{ npcRoleLevel "gear_hindrance" system.role.value }}
            </li>
            <li>
              <strong>{{ localize 'ADVERSITY.protection' }}:</strong>
              {{ npcRoleLevel "protection" system.role.value }}
            </li>
          </ul>
        </div>
      </div>

    </div>

    {{!-- Equipment Tab --}}
    <div class="tab equipment" data-group="primary" data-tab="equipment">
      <h3>{{ localize 'VERMINE.equipment' }}</h3>
      {{editor system.equipment.description target="system.equipment.description" button=true owner=owner editable=editable}}
    </div>

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

    {{!-- Notes Tab --}}
    <div class="tab notes" data-group="primary" data-tab="notes">
      <h3>{{ localize 'IDENTITY.notes' }}</h3>
      <div class="grid grid-1col">
        <div class="form-group">
          <label for="system.identity.profile">{{ localize 'IDENTITY.profile' }}</label>
          <input type="text" name="system.identity.profile" value="{{system.identity.profile}}" data-dtype="String" placeholder="{{ localize 'PROFILE' }}"/>
        </div>
        <div class="form-group">
          <label for="system.identity.theme">{{ localize 'IDENTITY.theme' }}</label>
          <input type="text" name="system.identity.theme" value="{{system.identity.theme}}" data-dtype="String" placeholder="{{ localize 'THEME' }}"/>
        </div>
      </div>
      {{editor system.identity.notes target="system.identity.notes" button=true owner=owner editable=editable}}
    </div>

  </section>
</form>
