<div class="dnc-sheet dnc-actor-sheet dnc-pnj-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 two-columns">
      <label>
        <span>Nom</span>
        <input type="text" name="name" value="{{actor.name}}">
      </label>
      <label>
        <span>Espece</span>
        <input type="text" name="system.espece" value="{{system.espece}}">
      </label>
      <label>
        <span>Categorie</span>
        <input type="text" name="system.categorie" value="{{system.categorie}}">
      </label>
      <label>
        <span>Role</span>
        <input type="text" name="system.role" value="{{system.role}}">
      </label>
      <label class="span-two">
        <span>Resume</span>
        <input type="text" name="system.resume" value="{{system.resume}}">
      </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>
    </div>
  </header>

  <section class="sheet-columns pnj-layout">
    <section class="sheet-column">
      <section class="sheet-card pnj-combat-card">
        <h2>Combat</h2>
        <div class="pnj-combat-grid">
          <label>
            <span>ARM</span>
            <div class="counter-field">
              <select name="system.defense.armure.delta">{{selectOptions config.usageDieOptions selected=system.defense.armure.delta localize=false}}</select>
              <button type="button" data-action="rollPnjArmor" aria-label="Lancer l'armure" title="Lancer l'armure"><i class="fa-solid fa-shield-halved"></i></button>
            </div>
          </label>
          <div class="readonly-field">
            <span>Protection stockee</span>
            <p>{{storedArmor}}</p>
          </div>
          <label>
            <span>COU</span>
            <div class="counter-field">
              <select name="system.defense.courage.delta">{{selectOptions config.usageDieOptions selected=system.defense.courage.delta localize=false}}</select>
              <button type="button" data-action="rollPnjCourage" aria-label="Lancer le courage" title="Lancer le courage"><i class="fa-solid fa-heart"></i></button>
            </div>
          </label>
          <div class="readonly-field">
            <span>Valeurs</span>
            <p>ARM {{armorDisplay}} · COU {{courageDisplay}}</p>
          </div>
          <section class="pnj-attack-list span-two">
            <header class="section-header">
              <h3>Attaques</h3>
              <button type="button" class="text-button" data-action="createPnjAttack">+ Ajouter</button>
            </header>
            <div class="pnj-attack-rows">
              {{#each pnjAttacks}}
                <article class="pnj-attack-row" data-attack-index="{{this.index}}">
                  <label>
                    <input type="text" name="system.attaques.{{this.index}}.nom" value="{{this.nom}}" aria-label="Nom de l'attaque" title="Nom de l'attaque">
                  </label>
                  <label>
                    <input type="text" name="system.attaques.{{this.index}}.degats" value="{{this.degats}}" aria-label="Dégâts" title="Dégâts">
                  </label>
                  <div class="item-actions">
                    {{#if this.degats}}
                      <button type="button" data-action="rollPnjAttackDamage" aria-label="Lancer les degats de {{this.nom}}" title="Lancer les degats"><i class="fa-solid fa-burst"></i></button>
                    {{/if}}
                    <button type="button" data-action="deletePnjAttack" aria-label="Supprimer {{this.nom}}" title="Supprimer"><i class="fa-solid fa-trash"></i></button>
                  </div>
                </article>
              {{/each}}
            </div>
          </section>
        </div>
      </section>

      <section class="sheet-card">
        <h2>Description</h2>
        <textarea name="system.description" rows="8" aria-label="Description">{{system.description}}</textarea>
      </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}}
                  </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 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}}
                  </div>
                  {{#if this.system.effet}}<p>{{this.system.effet}}</p>{{/if}}
                  {{#if this.system.description}}<p>{{this.system.description}}</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}}
                  <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 class="sheet-card">
        <h2>Notes</h2>
        <textarea name="system.notes" rows="8" aria-label="Notes">{{system.notes}}</textarea>
      </section>
    </section>
  </section>
</div>
