<section class="{{cssClass}}" autocomplete="off">

  {{!-- Sheet Header --}}
  <header class="sheet-header">
    <img class="profile-img" src="{{actor.img}}" data-action="editImage" title="{{actor.name}}" />
    <div class="header-fields">
      <h1 class="charname">
        <input name="name" type="text" value="{{actor.name}}" placeholder="Nom de la créature" />
      </h1>
    </div>
  </header>

  {{!-- Sheet Tab Navigation --}}
  <nav class="tabs" data-group="primary">
    <a class="item" data-tab="stats">Attributs</a>
    <a class="item" data-tab="combat">Combat</a>
    <a class="item" data-tab="biodata">Description</a>
  </nav>

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

    {{!-- Stats Tab --}}
    <div class="sheet-body" data-group="primary" data-tab="stats">
      <div class="grid grid-2col">
        <div class="sheet-section">
          <h3>Attributs</h3>
          <ul class="item-list">
            {{#each system.attributs as |attr key|}}
            <li class="item flexrow">
              <img class="item-img" src="systems/fvtt-wasteland/assets/icons/{{attr.labelnorm}}.webp" />
              <span class="item-name">
                <a class="rollable" data-action="rollAttribut" data-attr-key="{{key}}">{{attr.label}}</a>
              </span>
              <select name="system.attributs.{{key}}.value" value="{{attr.value}}" data-dtype="Number">
                {{selectOptions @root.config.listeNiveauCreature selected=attr.value}}
              </select>
            </li>
            {{/each}}
          </ul>
        </div>

        <div class="sheet-section">
          <h3>Santé</h3>
          <div class="form-group">
            <label>Total</label>
            <input type="number" name="system.sante.base" value="{{system.sante.base}}" />
          </div>
          <div class="form-group">
            <label>Non létaux</label>
            <input type="number" name="system.sante.nonletaux" value="{{system.sante.nonletaux}}" />
            <button type="button" data-action="incDecSante" data-field="nonletaux" data-value="-1" title="Diminuer" class="btn-adjust">
              <i class="fas fa-minus"></i>
            </button>
            <button type="button" data-action="incDecSante" data-field="nonletaux" data-value="1" title="Augmenter" class="btn-adjust">
              <i class="fas fa-plus"></i>
            </button>
          </div>
          <div class="form-group">
            <label>Létaux</label>
            <input type="number" name="system.sante.letaux" value="{{system.sante.letaux}}" />
            <button type="button" data-action="incDecSante" data-field="letaux" data-value="-1" title="Diminuer" class="btn-adjust">
              <i class="fas fa-minus"></i>
            </button>
            <button type="button" data-action="incDecSante" data-field="letaux" data-value="1" title="Augmenter" class="btn-adjust">
              <i class="fas fa-plus"></i>
            </button>
          </div>

          <h3>Psyché</h3>
          <div class="form-group">
            <label>Max</label>
            <input type="number" name="system.psyche.fullmax" value="{{system.psyche.fullmax}}" />
          </div>
          <div class="form-group">
            <label>Max Actuel</label>
            <input type="number" name="system.psyche.currentmax" value="{{system.psyche.currentmax}}" />
          </div>
          <div class="form-group">
            <label>Actuelle</label>
            <input type="number" name="system.psyche.value" value="{{system.psyche.value}}" />
            <button type="button" data-action="incDecSante" data-field="psyche" data-value="-1" title="Diminuer" class="btn-adjust">
              <i class="fas fa-minus"></i>
            </button>
            <button type="button" data-action="incDecSante" data-field="psyche" data-value="1" title="Augmenter" class="btn-adjust">
              <i class="fas fa-plus"></i>
            </button>
          </div>

          <h3>Autres</h3>
          <div class="form-group">
            <label>Terreur</label>
            <input type="number" name="system.terreur.value" value="{{system.terreur.value}}" />
          </div>
          <div class="form-group">
            <label>Protection</label>
            <input type="number" name="system.protection.value" value="{{system.protection.value}}" />
          </div>
          <div class="form-group">
            <label>Ressource</label>
            <input type="number" name="system.ressource.value" value="{{system.ressource.value}}" />
          </div>
        </div>
      </div>
    </div>

    {{!-- Combat Tab --}}
    <div class="sheet-body" data-group="primary" data-tab="combat">
      <div class="combat-stats">
        <h3>Valeurs de Combat</h3>
        <div class="grid grid-2col">
          <div class="combat-stat-row">
            <label class="stat-label">Initiative</label>
            <div class="stat-values">
              <span class="stat-base">{{combat.initBase}}</span>
              <input type="number" class="input-numeric-short" name="system.combat.initbonus" value="{{system.combat.initbonus}}" data-tooltip="Bonus" />
              <span class="stat-total">= {{combat.initTotal}}</span>
            </div>
          </div>
          
          <div class="combat-stat-row">
            <label class="stat-label">Défense</label>
            <div class="stat-values">
              <span class="stat-base">{{combat.defenseBase}}</span>
              <input type="number" class="input-numeric-short" name="system.combat.defensebonus" value="{{system.combat.defensebonus}}" data-tooltip="Bonus" />
              <span class="stat-total">= {{combat.defenseTotal}}</span>
            </div>
          </div>
          
          <div class="combat-stat-row">
            <label class="stat-label">Vitesse</label>
            <div class="stat-values">
              <span class="stat-base">{{combat.vitesseBase}}</span>
              <input type="number" class="input-numeric-short" name="system.combat.vitessebonus" value="{{system.combat.vitessebonus}}" data-tooltip="Bonus" />
              <span class="stat-total">= {{combat.vitesseTotal}}</span>
            </div>
          </div>
          
          <div class="combat-stat-row">
            <label class="stat-label">Bonus Dégâts</label>
            <div class="stat-values">
              <span class="stat-base">+{{combat.bonusDegats}}</span>
              <input type="number" class="input-numeric-short" name="system.combat.bonusdegats" value="{{system.combat.bonusdegats}}" data-tooltip="Bonus" />
              <span class="stat-total">= +{{combat.bonusDegatsTotal}}</span>
            </div>
          </div>
        </div>
      </div>

      <h3>Compétences</h3>
      <ul class="item-list alternate-list">
        {{#each skills as |skill|}}
        <li class="item flexrow" data-item-id="{{skill._id}}" data-item-type="competence">
          <img class="item-img" src="{{skill.img}}" />
          <div class="competence-info">
            <span class="competence-name">
              <a data-action="editItem">{{skill.name}}</a>
            </span>
          </div>
          <select class="status-small-label color-class-common edit-item-data competence-niveau"
                  data-item-field="niveau" data-dtype="Number">
            {{selectOptions @root.config.listeNiveauSkill selected=skill.system.niveau}}
          </select>
          
          <div class="competence-buttons">
            {{#if (ne skill.system.attribut1 "none")}}
            <button class="roll-competence button-sheet-roll" data-action="rollCompetence"
                    data-attr-key="{{skill.system.attribut1}}">
              {{upper skill.system.attribut1}} : {{skill.system.attribut1total}}
            </button>
            {{/if}}
            {{#if (ne skill.system.attribut2 "none")}}
            <button class="roll-competence button-sheet-roll" data-action="rollCompetence"
                    data-attr-key="{{skill.system.attribut2}}">
              {{upper skill.system.attribut2}} : {{skill.system.attribut2total}}
            </button>
            {{/if}}
            {{#if (ne skill.system.attribut3 "none")}}
            <button class="roll-competence button-sheet-roll" data-action="rollCompetence"
                    data-attr-key="{{skill.system.attribut3}}">
              {{upper skill.system.attribut3}} : {{skill.system.attribut3total}}
            </button>
            {{/if}}
          </div>

          <div class="item-filler">&nbsp;</div>
          <div class="item-controls item-controls-fixed">
            <a class="item-control" data-action="editItem" title="Edit Item"><i class="fas fa-edit"></i></a>
            <a class="item-control" data-action="deleteItem" title="Delete Item"><i class="fas fa-trash"></i></a>
          </div>
        </li>
        {{/each}}
      </ul>
      <button type="button" data-action="createItem" data-type="competence">
        <i class="fas fa-plus"></i> Ajouter une compétence
      </button>

      <h3>Armes</h3>
      <ul class="item-list">
        {{#each armes as |arme|}}
        <li class="item flexrow" data-item-id="{{arme._id}}" data-item-type="arme">
          <img class="item-img" src="{{arme.img}}" />
          <span class="item-name">
            <a data-action="editItem">{{arme.name}}</a>
          </span>
          <span class="weapon-stats">
            <span class="stat-offensif" data-tooltip="Attaque">
              <i class="fas fa-crosshairs"></i> {{arme.system.totalOffensif}}
            </span>
            {{#if arme.system.isdefense}}
            <span class="stat-defensif" data-tooltip="Défense">
              <i class="fas fa-shield"></i> {{arme.system.totalDefensif}}
            </span>
            {{else}}
            <span class="stat-placeholder"></span>
            {{/if}}
          </span>
          <button class="button-sheet-roll" data-action="rollArmeOffensif" data-tooltip="Jet d'attaque">
            <i class="fas fa-dice-d20"></i>
          </button>
          <button class="button-sheet-roll" data-action="rollArmeDegats" data-tooltip="Jet de dégâts">
            <i class="fas fa-burst"></i>
          </button>
          <div class="item-filler">&nbsp;</div>
          <div class="item-controls">
            <a class="item-control" data-action="editItem" title="Éditer"><i class="fas fa-edit"></i></a>
            <a class="item-control" data-action="deleteItem" title="Supprimer"><i class="fas fa-trash"></i></a>
          </div>
        </li>
        {{/each}}
      </ul>
      <button type="button" data-action="createItem" data-type="arme">
        <i class="fas fa-plus"></i> Ajouter une arme
      </button>

      <h3>Capacités</h3>
      <ul class="item-list alternate-list">
        {{#each capacites as |capacite|}}
        <li class="item flexrow" data-item-id="{{capacite._id}}">
          <img class="item-img" src="{{capacite.img}}" />
          <h4 class="item-name">
            <a data-action="editItem">{{capacite.name}}</a>
          </h4>
          <div class="item-filler">&nbsp;</div>
          <div class="item-controls item-controls-fixed">
            <a class="item-control" data-action="editItem" title="Edit Item"><i class="fas fa-edit"></i></a>
            <a class="item-control" data-action="deleteItem" title="Delete Item"><i class="fas fa-trash"></i></a>
          </div>
        </li>
        {{/each}}
      </ul>
      <button type="button" data-action="createItem" data-type="capacite">
        <i class="fas fa-plus"></i> Ajouter une capacité
      </button>
    </div>

    {{!-- Biodata Tab --}}
    <div class="sheet-body" data-group="primary" data-tab="biodata">
      <div class="form-group">
        <h3>Description</h3>
        <div class="medium-editor item-text-long-line">
          {{editor enrichedDescription target="system.biodata.description" button=true editable=editable}}
        </div>
      </div>

      <div class="form-group">
        <h3>Comportement</h3>
        <div class="medium-editor item-text-long-line">
          {{editor enrichedComportement target="system.biodata.comportement" button=true editable=editable}}
        </div>
      </div>

      <div class="form-group">
        <h3>Habitat</h3>
        <div class="medium-editor item-text-long-line">
          {{editor enrichedHabitat target="system.biodata.habitat" button=true editable=editable}}
        </div>
      </div>
    </div>

  </section>

</section>
