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

  {{!-- Sheet Header --}}
  <header class="sheet-header">
    <div class="header-portrait">
      <img class="profile-img" src="{{actor.img}}" data-action="editImage" title="{{actor.name}}" />
    </div>

    <div class="header-main">
      <div class="header-identity">
        <h1 class="charname">
          <input name="name" type="text" value="{{actor.name}}" placeholder="Nom du personnage" />
        </h1>
      </div>

      <div class="header-resources">
        <div class="resource-group bonne-aventure">
          <label>Bonne Aventure</label>
          <div class="resource-values">
            <div class="resource-field">
              <span class="resource-label">Base</span>
              <input type="number" name="system.bonneaventure.base" value="{{system.bonneaventure.base}}" />
            </div>
            <div class="resource-field">
              <span class="resource-label">Actuelle</span>
              <input type="number" name="system.bonneaventure.actuelle" value="{{system.bonneaventure.actuelle}}" />
            </div>
          </div>
        </div>

        <div class="resource-group">
          <label>Éclat</label>
          <div class="resource-values">
            <input type="number" name="system.eclat.value" value="{{system.eclat.value}}" />
          </div>
        </div>

        <div class="resource-group">
          <label>Expérience</label>
          <div class="resource-values">
            <input type="number" name="system.experience.value" value="{{system.experience.value}}" />
          </div>
        </div>
      </div>
    </div>
  </header>

  {{!-- Sheet Tab Navigation --}}
  <nav class="tabs" data-group="primary">
    <a class="item" data-tab="stats">Attributs</a>
    <a class="item" data-tab="competences">Compétences</a>
    <a class="item" data-tab="combat">Combat</a>
    <a class="item" data-tab="pouvoirs">Pouvoirs</a>
    <a class="item" data-tab="equipement">Équipement</a>
    <a class="item" data-tab="biodata">Bio</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.listeNiveauAttribut selected=attr.value}}
              </select>
            </li>
            {{/each}}
          </ul>
        </div>

        <div class="sheet-section">
          <h3>Santé</h3>
          <div class="form-group">
            <label>Bonus</label>
            <input type="number" name="system.sante.bonus" value="{{system.sante.bonus}}" />
          </div>
          <div class="form-group">
            <label>Total</label>
            <span class="value-display">{{system.sante.base}}</span>
          </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>
        </div>
      </div>
    </div>

    {{!-- Compétences Tab --}}
    <div class="sheet-body scrollable" data-group="primary" data-tab="competences">
      <div class="competences-header">
        <h3>Compétences</h3>
        {{#if @root.isGM}}
        <button class="reset-predilections-button" data-action="resetPredilections" data-tooltip="Réinitialiser toutes les prédilections">
          <i class="fas fa-sync-alt"></i> Init prédilections
        </button>
        {{/if}}
      </div>
      <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 class="roll-competence" data-action="rollCompetence" data-attr-key="tochoose">{{skill.name}}</a>
            </span>
            {{#if skill.system.predilections}}
            <span class="predilection-text">
              {{#each skill.system.predilections as |pred key|}}
                {{#if pred.name}}{{pred.name}}{{#unless @last}}, {{/unless}}{{/if}}
              {{/each}}
            </span>
            {{/if}}
          </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>
    </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-4col">
          <div class="stat">
            <label>Init. Base</label>
            <span>{{combat.initBase}}</span>
          </div>
          <div class="stat">
            <label>Init. Total</label>
            <span>{{combat.initTotal}}</span>
          </div>
          <div class="stat">
            <label>Défense</label>
            <span>{{combat.defenseTotal}}</span>
          </div>
          <div class="stat">
            <label>Vitesse</label>
            <span>{{combat.vitesseTotal}}</span>
          </div>
        </div>
      </div>

      <h3>Actions Spéciales</h3>
      <div class="action-buttons-row">
        <button class="button-sheet-roll button-sheet-roll-large" data-action="rollAssommer">Assommer</button>
        <button class="button-sheet-roll button-sheet-roll-large" data-action="rollFuir">Fuir</button>
        <button class="button-sheet-roll button-sheet-roll-large" data-action="rollImmobiliser">Immobiliser</button>
        <div class="mounted-checkbox">
          <label class="label-name">Monté ?</label>
          <input type="checkbox" name="system.combat.monte" {{checked system.combat.monte}} />
        </div>
      </div>

      <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>Protections</h3>
      <ul class="item-list">
        {{#each protections as |prot|}}
        <li class="item flexrow" data-item-id="{{prot._id}}" data-item-type="protection">
          <img class="item-img" src="{{prot.img}}" />
          <span class="item-name">
            <a data-action="editItem">{{prot.name}}</a>
          </span>
          <span class="item-detail">Protection: {{prot.system.protection}}</span>
          <input type="checkbox" name="equipped" {{checked prot.system.equipped}} data-action="equipItem" title="Équipé" />
          <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="protection">
        <i class="fas fa-plus"></i> Ajouter une protection
      </button>
    </div>

    {{!-- Pouvoirs Tab --}}
    <div class="sheet-body" data-group="primary" data-tab="pouvoirs">
      <h3>Pouvoirs</h3>
      <ul class="item-list">
        {{#each pouvoirs as |pouvoir|}}
        <li class="item flexrow" data-item-id="{{pouvoir._id}}" data-item-type="pouvoir">
          <img class="item-img" src="{{pouvoir.img}}" />
          <span class="item-name">
            <a data-action="editItem">{{pouvoir.name}}</a>
          </span>
          <span class="item-detail">Chemin: {{pouvoir.system.chemin}}</span>
          <button class="button-sheet-roll" data-action="rollPouvoir" data-tooltip="Jet de pouvoir">
            <i class="fas fa-dice-d20"></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="pouvoir">
        <i class="fas fa-plus"></i> Ajouter un pouvoir
      </button>

      <h3>Charmes & Tours</h3>
      <ul class="item-list">
        {{#each charmes as |charme|}}
        <li class="item flexrow" data-item-id="{{charme._id}}" data-item-type="charme">
          <img class="item-img" src="{{charme.img}}" />
          <span class="item-name">
            <a data-action="editItem">{{charme.name}}</a>
          </span>
          <span class="item-detail">Type: {{charme.system.charmetype}}</span>
          <button class="button-sheet-roll" data-action="rollCharme" data-tooltip="Jet de charme">
            <i class="fas fa-dice-d20"></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}}
        {{#each tours as |tour|}}
        <li class="item flexrow" data-item-id="{{tour._id}}" data-item-type="tour">
          <img class="item-img" src="{{tour.img}}" />
          <span class="item-name">
            <a data-action="editItem">{{tour.name}}</a>
          </span>
          <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="charme">
        <i class="fas fa-plus"></i> Ajouter un charme/tour
      </button>
    </div>

    {{!-- Équipement Tab --}}
    <div class="sheet-body" data-group="primary" data-tab="equipement">
      <h3>Équipements</h3>
      <ul class="item-list">
        {{#each equipements as |equip|}}
        <li class="item flexrow" data-item-id="{{equip._id}}" data-item-type="equipement">
          <img class="item-img" src="{{equip.img}}" />
          <span class="item-name">
            <a data-action="editItem">{{equip.name}}</a>
          </span>
          <div class="item-quantity-controls">
            <button type="button" data-action="modifyQuantity" data-qty="-1" title="Diminuer">
              <i class="fas fa-minus"></i>
            </button>
            <span class="quantity-value">{{equip.system.quantite}}</span>
            <button type="button" data-action="modifyQuantity" data-qty="1" title="Augmenter">
              <i class="fas fa-plus"></i>
            </button>
          </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="equipement">
        <i class="fas fa-plus"></i> Ajouter un équipement
      </button>

      <h3>Monnaies</h3>
      <ul class="item-list">
        {{#each monnaies as |monnaie|}}
        <li class="item flexrow" data-item-id="{{monnaie._id}}" data-item-type="monnaie">
          <img class="item-img" src="{{monnaie.img}}" />
          <span class="item-name">
            <a data-action="editItem">{{monnaie.name}}</a>
          </span>
          <div class="item-quantity-controls">
            <button type="button" data-action="modifyQuantity" data-qty="-1" title="Diminuer">
              <i class="fas fa-minus"></i>
            </button>
            <span class="quantity-value">{{monnaie.system.quantite}}</span>
            <button type="button" data-action="modifyQuantity" data-qty="1" title="Augmenter">
              <i class="fas fa-plus"></i>
            </button>
          </div>
          <span class="item-detail">{{monnaie.system.unite}}</span>
          <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="monnaie">
        <i class="fas fa-plus"></i> Ajouter une monnaie
      </button>
    </div>

    {{!-- Biodata Tab --}}
    <div class="sheet-body" data-group="primary" data-tab="biodata">
      <div class="biodata-info">
        <div class="biodata-section">
          <h3>Identité</h3>
          <ul class="item-list">
            {{#if peuple}}
            <li class="item flexrow" data-item-id="{{peuple._id}}">
              <label>Peuple</label>
              <span class="value">{{peuple.name}}</span>
              <div class="item-controls-fixed">
                <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>
            {{/if}}
            {{#if origine}}
            <li class="item flexrow" data-item-id="{{origine._id}}">
              <label>Origine</label>
              <span class="value">{{origine.name}}</span>
              <div class="item-controls-fixed">
                <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>
            {{/if}}
            {{#if heritage}}
            <li class="item flexrow" data-item-id="{{heritage._id}}">
              <label>Héritage</label>
              <span class="value">{{heritage.name}}</span>
              <div class="item-controls-fixed">
                <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>
            {{/if}}
            {{#if metier}}
            <li class="item flexrow" data-item-id="{{metier._id}}">
              <label>Métier</label>
              <span class="value">{{metier.name}}</span>
              <div class="item-controls-fixed">
                <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>
            {{/if}}
          </ul>
        </div>

        <div class="biodata-section">
          <h3>Caractéristiques</h3>
          <div class="biodata-fields">
            <div class="biodata-field">
              <label>Sexe</label>
              <input type="text" name="system.biodata.sex" value="{{system.biodata.sex}}" />
            </div>
            <div class="biodata-field">
              <label>Age</label>
              <input type="text" name="system.biodata.age" value="{{system.biodata.age}}" />
            </div>
            <div class="biodata-field">
              <label>Taille</label>
              <input type="text" name="system.biodata.size" value="{{system.biodata.size}}" />
            </div>
            <div class="biodata-field">
              <label>Poids</label>
              <input type="text" name="system.biodata.weight" value="{{system.biodata.weight}}" />
            </div>
            <div class="biodata-field">
              <label>Cheveux</label>
              <input type="text" name="system.biodata.hair" value="{{system.biodata.hair}}" />
            </div>
            <div class="biodata-field">
              <label>Yeux</label>
              <input type="text" name="system.biodata.eyes" value="{{system.biodata.eyes}}" />
            </div>
            <div class="biodata-field">
              <label>Main préférée</label>
              <input type="text" name="system.biodata.preferredhand" value="{{system.biodata.preferredhand}}" />
            </div>
          </div>
        </div>
      </div>

      <div class="editor-section">
        <h3>Description</h3>
        {{formInput systemFields.biodata.fields.description enriched=enrichedDescription value=system.biodata.description name="system.biodata.description" toggled=true}}
      </div>

      <div class="editor-section">
        <h3>Notes</h3>
        {{formInput systemFields.biodata.fields.notes enriched=enrichedNotes value=system.biodata.notes name="system.biodata.notes" toggled=true}}
      </div>

      <div class="editor-section">
        <h3>Notes MJ</h3>
        {{formInput systemFields.biodata.fields.gmnotes enriched=enrichedGMNotes value=system.biodata.gmnotes name="system.biodata.gmnotes" toggled=true}}
      </div>

      <div class="textarea-grid">
        <div class="form-group">
          <label>Séquelles</label>
          <textarea name="system.sante.sequelles" rows="3">{{system.sante.sequelles}}</textarea>
        </div>

        <div class="form-group">
          <label>Traumatismes</label>
          <textarea name="system.psyche.traumatismes" rows="3">{{system.psyche.traumatismes}}</textarea>
        </div>
      </div>
    </div>

  </section>

</section>
