<div class="dnc-sheet dnc-actor-sheet dnc-employe-sheet">
  <header class="sheet-header compact">
    <div class="portrait">
      <img src="{{actor.img}}" alt="{{actor.name}}">
      <button type="button" class="icon-button" data-action="editImage" aria-label="Modifier l'image" title="Modifier l'image"><i class="fa-solid fa-image"></i></button>
    </div>
    <div class="identity-grid">
      <label>
        <span>Nom</span>
        <input type="text" name="name" value="{{actor.name}}">
      </label>
      <label>
        <span>Concept</span>
        <input type="text" name="system.concept" value="{{system.concept}}">
      </label>
      <label>
        <span>Anciennete</span>
        <input type="number" name="system.anciennete.rang" value="{{system.anciennete.rang}}">
      </label>
      <label>
        <span>Libelle</span>
        <input type="text" name="system.anciennete.libelle" value="{{system.anciennete.libelle}}">
      </label>
      <label>
        <span>DV</span>
        <div class="counter-field">
          <input type="text" name="system.sante.dv" value="{{system.sante.dv}}">
          <button type="button" data-action="rollHitDice" aria-label="Lancer le de de vie" title="Lancer le de de vie"><i class="fa-solid fa-dice-d20"></i></button>
        </div>
      </label>
      <label class="with-controls hp-field" style="grid-column: span 2;">
        <span>PV</span>
        <div class="counter-field">
          <button type="button" data-action="adjustCounter" data-path="system.sante.pv.value" data-delta="-1">-</button>
          <input type="number" name="system.sante.pv.value" value="{{system.sante.pv.value}}">
          <span>/</span>
          <input type="number" name="system.sante.pv.max" value="{{system.sante.pv.max}}">
          <button type="button" data-action="adjustCounter" data-path="system.sante.pv.value" data-delta="1">+</button>
        </div>
      </label>
      <label>
        <span>Attaques melee</span>
        <input type="number" name="system.combat.attaquesCorpsACorps" value="{{system.combat.attaquesCorpsACorps}}">
      </label>
      <label>
        <span>Attaques distance</span>
        <input type="number" name="system.combat.attaquesDistance" value="{{system.combat.attaquesDistance}}">
      </label>
    </div>
  </header>

  <nav class="sheet-tabs" aria-label="Onglets de la fiche">
    <button type="button" class="sheet-tab" data-action="setTab" data-tab="combat" data-tab-button>Combat & materiel</button>
    <button type="button" class="sheet-tab" data-action="setTab" data-tab="magie" data-tab-button>Magie & capacites</button>
    <button type="button" class="sheet-tab" data-action="setTab" data-tab="profil" data-tab-button>Profil & langues</button>
  </nav>

  <section class="sheet-tab-panel" data-tab-panel="combat">
    <section class="sheet-columns">
      <section class="sheet-card characteristics-card">
        <h2>Caracteristiques</h2>
        <div class="characteristic-list">
          {{#each characteristics}}
            <div class="characteristic-row">
              <button type="button" class="roll-button" data-action="rollCharacteristic" data-characteristic="{{this.key}}" aria-label="Lancer {{this.label}}" title="Lancer {{this.label}}">
                <i class="fa-solid fa-dice-d20"></i>
              </button>
              <span class="characteristic-label">{{this.label}}</span>
              <input type="number" name="system.caracteristiques.{{this.key}}.value" value="{{this.value}}" aria-label="{{this.label}}">
            </div>
          {{/each}}
        </div>
      </section>

      <section class="sheet-card item-section traits-card">
        <header class="section-header">
          <h2>{{traitsSection.label}}</h2>
          <button type="button" class="text-button" data-action="createItem" data-type="{{traitsSection.createType}}">+ Ajouter</button>
        </header>
        <div class="item-list">
          {{#if traitsSection.items.length}}
            {{#each traitsSection.items}}
              <article class="item" data-item-id="{{this.id}}">
                <img src="{{this.img}}" alt="{{this.name}}">
                  <div class="item-main">
                    <div class="item-title-row">
                    <strong>{{this.name}}</strong>
                    {{#if this.usageLabel}}<span class="item-meta">{{this.usageLabel}}</span>{{/if}}
                    {{#if this.protectionLabel}}<span class="item-meta">{{this.protectionLabel}}</span>{{/if}}
                  </div>
                  {{#if this.system.effet}}<p>{{this.system.effet}}</p>{{/if}}
                  {{#if this.damageLabel}}<p>Degats : {{this.damageLabel}}</p>{{/if}}
                  {{#if this.ammunitionUsageLabel}}<p>Munitions : {{this.ammunitionUsageLabel}}</p>{{/if}}
                </div>
                <div class="item-actions">
                  {{#if this.canRoll}}
                    <button type="button" data-action="{{this.rollAction}}" aria-label="Lancer {{this.name}}" title="Lancer {{this.name}}"><i class="fa-solid fa-dice-d20"></i></button>
                  {{/if}}
                  {{#if this.canRollDamage}}
                    <button type="button" data-action="rollDamage" aria-label="Lancer les degats de {{this.name}}" title="Lancer les degats"><i class="fa-solid fa-burst"></i></button>
                  {{/if}}
                  {{#if this.canUse}}
                    <button type="button" data-action="rollUsage" aria-label="Utiliser {{this.name}}" title="Utiliser {{this.name}}"><i class="fa-solid fa-hourglass-half"></i></button>
                  {{/if}}
                  <button type="button" data-action="postItem" aria-label="Poster {{this.name}} dans le chat" title="Poster dans le chat"><i class="fa-solid fa-message"></i></button>
                  <button type="button" data-action="editItem" aria-label="Editer {{this.name}}" title="Editer"><i class="fa-solid fa-pen"></i></button>
                  <button type="button" data-action="deleteItem" aria-label="Supprimer {{this.name}}" title="Supprimer"><i class="fa-solid fa-trash"></i></button>
                </div>
              </article>
            {{/each}}
          {{/if}}
          <div class="item-dropzone {{#if traitsSection.items.length}}has-items{{/if}}" data-item-type="{{traitsSection.createType}}">
            Glissez-deposez ici les {{traitsSection.label}}.
          </div>
        </div>
      </section>
    </section>

    <section class="sheet-sections">
      {{#each combatSections}}
        <section class="sheet-card item-section">
          <header class="section-header">
            <h2>{{this.label}}</h2>
            <button type="button" class="text-button" data-action="createItem" data-type="{{this.createType}}">+ Ajouter</button>
          </header>
          <div class="item-list">
            {{#if this.items.length}}
              {{#each this.items}}
                <article class="item" data-item-id="{{this.id}}">
                  <img src="{{this.img}}" alt="{{this.name}}">
                  <div class="item-main">
                    <div class="item-title-row">
                      <strong>{{this.name}}</strong>
                      {{#if this.usageLabel}}<span class="item-meta">{{this.usageLabel}}</span>{{/if}}
                      {{#if this.protectionLabel}}<span class="item-meta">{{this.protectionLabel}}</span>{{/if}}
                    </div>
                    {{#if this.system.effet}}<p>{{this.system.effet}}</p>{{/if}}
                    {{#if this.damageLabel}}<p>Degats : {{this.damageLabel}}</p>{{/if}}
                    {{#if this.ammunitionUsageLabel}}<p>Munitions : {{this.ammunitionUsageLabel}}</p>{{/if}}
                  </div>
                  <div class="item-actions">
                    {{#if this.canRoll}}
                      <button type="button" data-action="{{this.rollAction}}" aria-label="Lancer {{this.name}}" title="Lancer {{this.name}}"><i class="fa-solid fa-dice-d20"></i></button>
                    {{/if}}
                    {{#if this.canRollDamage}}
                      <button type="button" data-action="rollDamage" aria-label="Lancer les degats de {{this.name}}" title="Lancer les degats"><i class="fa-solid fa-burst"></i></button>
                    {{/if}}
                    {{#if this.canUse}}
                      <button type="button" data-action="rollUsage" aria-label="Utiliser {{this.name}}" title="Utiliser {{this.name}}"><i class="fa-solid fa-hourglass-half"></i></button>
                    {{/if}}
                    {{#if this.canReset}}
                      <button type="button" data-action="resetUsage" aria-label="Reinitialiser {{this.name}}" title="Reinitialiser"><i class="fa-solid fa-arrow-rotate-left"></i></button>
                    {{/if}}
                    <button type="button" data-action="postItem" aria-label="Poster {{this.name}} dans le chat" title="Poster dans le chat"><i class="fa-solid fa-message"></i></button>
                    <button type="button" data-action="editItem" aria-label="Editer {{this.name}}" title="Editer"><i class="fa-solid fa-pen"></i></button>
                    <button type="button" data-action="deleteItem" aria-label="Supprimer {{this.name}}" title="Supprimer"><i class="fa-solid fa-trash"></i></button>
                  </div>
                </article>
              {{/each}}
            {{/if}}
            <div class="item-dropzone {{#if this.items.length}}has-items{{/if}}" data-item-type="{{this.createType}}">
              Glissez-deposez ici les {{this.label}}.
            </div>
          </div>
        </section>
      {{/each}}
    </section>
  </section>

  <section class="sheet-tab-panel" data-tab-panel="magie">
    <section class="sheet-columns magic-layout">
      <section class="sheet-column">
        <section class="sheet-card magic-resource-card">
        <h2>Ressources magiques</h2>
        <div class="magic-resource-grid">
          <div class="readonly-field">
            <span>Rang</span>
            <p>{{magicResources.rank}}</p>
          </div>
          <label>
            <span>Focus</span>
            <select name="system.magie.focus.delta">{{selectOptions config.usageDieOptions selected=system.magie.focus.delta localize=false}}</select>
          </label>
          <div class="readonly-field">
            <span>Focus actif</span>
            <p>{{magicResources.focusDisplay}}</p>
          </div>
          <label>
            <span>Chaos</span>
            <select name="system.magie.chaos.delta">{{selectOptions config.usageDieOptions selected=system.magie.chaos.delta localize=false}}</select>
          </label>
        </div>
        <div class="chaos-table-wrapper">
          <h3>Table du Chaos</h3>
          <p class="chaos-table-caption">Aberration magique</p>
          <table class="chaos-table">
            <thead>
              <tr>
                <th>Δ</th>
                <th>Resultat</th>
                <th>Effet</th>
              </tr>
            </thead>
            <tbody>
              {{#each chaosTable}}
                <tr>
                  <td>{{this.value}}</td>
                  <td>{{this.title}}</td>
                  <td>{{this.effect}}</td>
                </tr>
              {{/each}}
            </tbody>
          </table>
        </div>
      </section>
      </section>
      <section class="sheet-column">
        <section class="sheet-card item-section">
          <header class="section-header">
            <h2>{{spellSection.label}}</h2>
            <button type="button" class="text-button" data-action="createItem" data-type="{{spellSection.createType}}">+ Ajouter</button>
          </header>
          <div class="item-list">
            {{#if spellSection.items.length}}
              {{#each spellSection.items}}
                <article class="item" data-item-id="{{this.id}}">
                  <img src="{{this.img}}" alt="{{this.name}}">
                  <div class="item-main">
                    <div class="item-title-row">
                      <strong>{{this.name}}</strong>
                      {{#if this.usageLabel}}<span class="item-meta">{{this.usageLabel}}</span>{{/if}}
                      {{#if this.protectionLabel}}<span class="item-meta">{{this.protectionLabel}}</span>{{/if}}
                    </div>
                    {{#if this.system.effet}}<p>{{this.system.effet}}</p>{{/if}}
                    {{#if this.damageLabel}}<p>Degats : {{this.damageLabel}}</p>{{/if}}
                    {{#if this.ammunitionUsageLabel}}<p>Munitions : {{this.ammunitionUsageLabel}}</p>{{/if}}
                  </div>
                  <div class="item-actions">
                    {{#if this.canRoll}}
                      <button type="button" data-action="{{this.rollAction}}" aria-label="Lancer {{this.name}}" title="Lancer {{this.name}}"><i class="fa-solid fa-dice-d20"></i></button>
                    {{/if}}
                    {{#if this.canRollDamage}}
                      <button type="button" data-action="rollDamage" aria-label="Lancer les degats de {{this.name}}" title="Lancer les degats"><i class="fa-solid fa-burst"></i></button>
                    {{/if}}
                    {{#if this.canUse}}
                      <button type="button" data-action="rollUsage" aria-label="Utiliser {{this.name}}" title="Utiliser {{this.name}}"><i class="fa-solid fa-hourglass-half"></i></button>
                    {{/if}}
                    {{#if this.canReset}}
                      <button type="button" data-action="resetUsage" aria-label="Reinitialiser {{this.name}}" title="Reinitialiser"><i class="fa-solid fa-arrow-rotate-left"></i></button>
                    {{/if}}
                    <button type="button" data-action="postItem" aria-label="Poster {{this.name}} dans le chat" title="Poster dans le chat"><i class="fa-solid fa-message"></i></button>
                    <button type="button" data-action="editItem" aria-label="Editer {{this.name}}" title="Editer"><i class="fa-solid fa-pen"></i></button>
                    <button type="button" data-action="deleteItem" aria-label="Supprimer {{this.name}}" title="Supprimer"><i class="fa-solid fa-trash"></i></button>
                  </div>
                </article>
              {{/each}}
            {{/if}}
            <div class="item-dropzone {{#if spellSection.items.length}}has-items{{/if}}" data-item-type="{{spellSection.createType}}">
              Glissez-deposez ici les {{spellSection.label}}.
            </div>
          </div>
        </section>
        <section class="sheet-card item-section">
          <header class="section-header">
            <h2>{{capacitySection.label}}</h2>
            <button type="button" class="text-button" data-action="createItem" data-type="{{capacitySection.createType}}">+ Ajouter</button>
          </header>
          <div class="item-list">
            {{#if capacitySection.items.length}}
              {{#each capacitySection.items}}
                <article class="item" data-item-id="{{this.id}}">
                  <img src="{{this.img}}" alt="{{this.name}}">
                  <div class="item-main">
                    <div class="item-title-row">
                      <strong>{{this.name}}</strong>
                      {{#if this.usageLabel}}<span class="item-meta">{{this.usageLabel}}</span>{{/if}}
                      {{#if this.protectionLabel}}<span class="item-meta">{{this.protectionLabel}}</span>{{/if}}
                    </div>
                    {{#if this.system.effet}}<p>{{this.system.effet}}</p>{{/if}}
                    {{#if this.damageLabel}}<p>Degats : {{this.damageLabel}}</p>{{/if}}
                    {{#if this.ammunitionUsageLabel}}<p>Munitions : {{this.ammunitionUsageLabel}}</p>{{/if}}
                  </div>
                  <div class="item-actions">
                    {{#if this.canRoll}}
                      <button type="button" data-action="{{this.rollAction}}" aria-label="Lancer {{this.name}}" title="Lancer {{this.name}}"><i class="fa-solid fa-dice-d20"></i></button>
                    {{/if}}
                    {{#if this.canRollDamage}}
                      <button type="button" data-action="rollDamage" aria-label="Lancer les degats de {{this.name}}" title="Lancer les degats"><i class="fa-solid fa-burst"></i></button>
                    {{/if}}
                    {{#if this.canUse}}
                      <button type="button" data-action="rollUsage" aria-label="Utiliser {{this.name}}" title="Utiliser {{this.name}}"><i class="fa-solid fa-hourglass-half"></i></button>
                    {{/if}}
                    {{#if this.canReset}}
                      <button type="button" data-action="resetUsage" aria-label="Reinitialiser {{this.name}}" title="Reinitialiser"><i class="fa-solid fa-arrow-rotate-left"></i></button>
                    {{/if}}
                    <button type="button" data-action="postItem" aria-label="Poster {{this.name}} dans le chat" title="Poster dans le chat"><i class="fa-solid fa-message"></i></button>
                    <button type="button" data-action="editItem" aria-label="Editer {{this.name}}" title="Editer"><i class="fa-solid fa-pen"></i></button>
                    <button type="button" data-action="deleteItem" aria-label="Supprimer {{this.name}}" title="Supprimer"><i class="fa-solid fa-trash"></i></button>
                  </div>
                </article>
              {{/each}}
            {{/if}}
            <div class="item-dropzone {{#if capacitySection.items.length}}has-items{{/if}}" data-item-type="{{capacitySection.createType}}">
              Glissez-deposez ici les {{capacitySection.label}}.
            </div>
          </div>
        </section>
      </section>
    </section>
  </section>

  <section class="sheet-tab-panel" data-tab-panel="profil">
      <section class="sheet-card profile-card profile-card-wide">
        <h2>Profil</h2>
        <div class="profile-layout">
          <div class="profile-column">
            <label>
              <span>Objectif personnel</span>
              <textarea name="system.profil.objectifPersonnel" rows="5">{{system.profil.objectifPersonnel}}</textarea>
            </label>
            <label>
              <span>Notes</span>
              <textarea name="system.notes" rows="10">{{system.notes}}</textarea>
            </label>
          </div>
          <div class="profile-column">
            <div class="profile-counters">
              <label class="with-controls">
                <span>Suspicion</span>
                <div class="counter-field">
                  <button type="button" data-action="adjustCounter" data-path="system.profil.suspicion" data-delta="-1">-</button>
                  <input type="number" name="system.profil.suspicion" value="{{system.profil.suspicion}}">
                  <button type="button" data-action="adjustCounter" data-path="system.profil.suspicion" data-delta="1">+</button>
                </div>
              </label>
              <label class="with-controls">
                <span>Avertissements</span>
                <div class="counter-field">
                  <button type="button" data-action="adjustCounter" data-path="system.profil.avertissements" data-delta="-1">-</button>
                  <input type="number" name="system.profil.avertissements" value="{{system.profil.avertissements}}">
                  <button type="button" data-action="adjustCounter" data-path="system.profil.avertissements" data-delta="1">+</button>
                </div>
              </label>
              <label class="with-controls">
                <span>Missions reussies</span>
                <div class="counter-field">
                  <button type="button" data-action="adjustCounter" data-path="system.profil.missionsReussies" data-delta="-1">-</button>
                  <input type="number" name="system.profil.missionsReussies" value="{{system.profil.missionsReussies}}">
                  <button type="button" data-action="adjustCounter" data-path="system.profil.missionsReussies" data-delta="1">+</button>
                </div>
              </label>
            </div>
            <section class="favor-card">
              <div class="section-header favor-header">
                <h2>Faveurs</h2>
              </div>
              <p class="favor-help">Les coups de pouce se choisissent dans les fenetres de jet. Les services brulent automatiquement une faveur.</p>
              <div class="favor-list">
                {{#each favorEntries}}
                  <div class="favor-row">
                    <label>
                      <span>{{this.label}}</span>
                      <select name="system.faveurs.{{this.key}}.delta">{{selectOptions ../config.usageDieOptions selected=this.delta localize=false}}</select>
                    </label>
                    <div class="favor-meta">{{this.deltaLabel}}</div>
                    <button type="button" class="text-button" data-action="useFavorService" data-department="{{this.key}}" {{#unless this.hasFavor}}disabled{{/unless}}>Service</button>
                  </div>
                {{/each}}
              </div>
            </section>
            <label>
              <span>Notes MJ</span>
              <textarea name="system.gmnotes" rows="6">{{system.gmnotes}}</textarea>
            </label>
          </div>
        </div>
      </section>

    <section class="sheet-sections compact-sections">
      {{#each profileSections}}
        <section class="sheet-card item-section">
          <header class="section-header">
            <h2>{{this.label}}</h2>
            <button type="button" class="text-button" data-action="createItem" data-type="{{this.createType}}">+ Ajouter</button>
          </header>
          <div class="item-list">
            {{#if this.items.length}}
              {{#each this.items}}
                <article class="item" data-item-id="{{this.id}}">
                  <img src="{{this.img}}" alt="{{this.name}}">
                  <div class="item-main">
                    <div class="item-title-row">
                      <strong>{{this.name}}</strong>
                      {{#if this.usageLabel}}<span class="item-meta">{{this.usageLabel}}</span>{{/if}}
                      {{#if this.protectionLabel}}<span class="item-meta">{{this.protectionLabel}}</span>{{/if}}
                    </div>
                    {{#if this.system.effet}}<p>{{this.system.effet}}</p>{{/if}}
                    {{#if this.damageLabel}}<p>Degats : {{this.damageLabel}}</p>{{/if}}
                    {{#if this.ammunitionUsageLabel}}<p>Munitions : {{this.ammunitionUsageLabel}}</p>{{/if}}
                  </div>
                  <div class="item-actions">
                    {{#if this.canRoll}}
                      <button type="button" data-action="{{this.rollAction}}" aria-label="Lancer {{this.name}}" title="Lancer {{this.name}}"><i class="fa-solid fa-dice-d20"></i></button>
                    {{/if}}
                    {{#if this.canRollDamage}}
                      <button type="button" data-action="rollDamage" aria-label="Lancer les degats de {{this.name}}" title="Lancer les degats"><i class="fa-solid fa-burst"></i></button>
                    {{/if}}
                    {{#if this.canUse}}
                      <button type="button" data-action="rollUsage" aria-label="Utiliser {{this.name}}" title="Utiliser {{this.name}}"><i class="fa-solid fa-hourglass-half"></i></button>
                    {{/if}}
                    {{#if this.canReset}}
                      <button type="button" data-action="resetUsage" aria-label="Reinitialiser {{this.name}}" title="Reinitialiser"><i class="fa-solid fa-arrow-rotate-left"></i></button>
                    {{/if}}
                    <button type="button" data-action="postItem" aria-label="Poster {{this.name}} dans le chat" title="Poster dans le chat"><i class="fa-solid fa-message"></i></button>
                    <button type="button" data-action="editItem" aria-label="Editer {{this.name}}" title="Editer"><i class="fa-solid fa-pen"></i></button>
                    <button type="button" data-action="deleteItem" aria-label="Supprimer {{this.name}}" title="Supprimer"><i class="fa-solid fa-trash"></i></button>
                  </div>
                </article>
              {{/each}}
            {{/if}}
            <div class="item-dropzone {{#if this.items.length}}has-items{{/if}}" data-item-type="{{this.createType}}">
              Glissez-deposez ici les {{this.label}}.
            </div>
          </div>
        </section>
      {{/each}}
    </section>
  </section>
</div>
