<form class="{{cssClass}} {{actor.type}} flexcol" autocomplete="off">

  {{!-- En-tête de la fiche --}}
  <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">
      <div class="charname-container">
        <h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="{{localize 'Name'}}" /></h1>
      </div>

      <div class="resources-container">
        {{!-- Points de Vie --}}
        <div class="resource flex-group-center health-resource">
          <label class="resource-label">{{localize "MYRIAD_SYSTEM.Usage.costTypes.health"}}</label>
          <div class="resource-content flexrow flex-center flex-between">
            <input type="text" name="system.health.value" value="{{system.health.value}}" data-dtype="Number" />
            <span class="sep">/</span>
            <span class="health-max">{{system.health.max}}</span>
          </div>
        </div>
        
        {{!-- Points d'XP --}}
        <div class="resource flex-group-center xp-resource">
          <label class="resource-label">{{localize "MYRIAD_SYSTEM.XP.label"}}</label>
          <div class="resource-content flexrow flex-center flex-between">
            <button type="button" class="xp-control xp-decrease" data-action="decrease-xp" title="Decrease Total XP">
              <i class="fas fa-minus"></i>
            </button>
            <span class="xp-unspent">{{system.xp.unspent}}</span>
            <span class="sep">/</span>
            <span class="xp-total">{{system.xp.earned}}</span>
            <button type="button" class="xp-control xp-increase" data-action="increase-xp" title="Increase Total XP">
              <i class="fas fa-plus"></i>
            </button>
          </div>
        </div>

        {{!-- Points de Magie (conditional) --}}
        {{#if hasMagic}}
        <div class="resource flex-group-center magic-resource">
          <label class="resource-label">{{localize "MYRIAD_SYSTEM.Usage.costTypes.magic"}}</label>
          <div class="resource-content flexrow flex-center flex-between">
            <input type="text" name="system.magic.points.value" value="{{system.magic.points.value}}"
              data-dtype="Number" />
            <span class="sep">/</span>
            <input type="text" name="system.magic.points.max" value="{{system.magic.points.max}}" data-dtype="Number" />
          </div>
        </div>
        {{/if}}
      </div>
    </div>
  </header>

  {{!-- Navigation --}}
  <nav class="sheet-tabs tabs" data-group="primary">
    <a class="item" data-tab="characteristics">{{localize "MYRIAD_SYSTEM.SheetLabels.Characteristics"}}</a>
    <a class="item" data-tab="magic">{{localize "MYRIAD_SYSTEM.SheetLabels.Magic"}}</a>
    <a class="item" data-tab="inventory">{{localize "MYRIAD_SYSTEM.SheetLabels.Inventory"}}</a>
    <a class="item" data-tab="effects">{{localize "MYRIAD_SYSTEM.SheetLabels.Effects"}}</a>
    <a class="item" data-tab="biography">{{localize "Biography"}}</a>
  </nav>

  {{!-- Contenu des onglets --}}
  <section class="sheet-body">
    {{!-- Caractéristiques --}}
    <div class="tab characteristics" data-group="primary" data-tab="characteristics">
      <div class="characteristics-container">
        {{!-- Caractéristiques Physiques --}}
        <div class="characteristics-column physical">
          <h3 class="column-header">Caractéristiques Physiques</h3>
          <div class="characteristic flex-group-center">
            <label class="characteristic-label">{{localize config.characteristics.puissance}}</label>
            <div class="characteristic-content">
              <input type="text" name="system.characteristics.puissance.value"
                value="{{system.characteristics.puissance.value}}" data-dtype="Number" />
              <div class="characteristic-controls">
                <button type="button" class="characteristic-roll" data-characteristic="puissance" title="Roll Puissance">
                  <i class="fas fa-dice-d20"></i>
                </button>
                <button type="button" class="characteristic-damage" data-characteristic="puissance" title="Apply Temporary Damage">
                  <i class="fas fa-tint"></i>
                </button>
                <button type="button" class="characteristic-bonus" data-characteristic="puissance" title="Apply Temporary Bonus">
                  <i class="fas fa-plus-circle"></i>
                </button>
              </div>
              <div class="characteristic-modifiers">
                {{#if system.characteristics.puissance.bonus}}
                <span class="characteristic-bonus-value">+{{system.characteristics.puissance.bonus}}</span>
                {{/if}}
                {{#if system.characteristics.puissance.malus}}
                <span class="characteristic-malus-value">-{{system.characteristics.puissance.malus}}</span>
                {{/if}}
              </div>
            </div>
          </div>
          <div class="characteristic flex-group-center">
            <label class="characteristic-label">{{localize config.characteristics.coordination}}</label>
            <div class="characteristic-content">
              <input type="text" name="system.characteristics.coordination.value"
                value="{{system.characteristics.coordination.value}}" data-dtype="Number" />
              <div class="characteristic-controls">
                <button type="button" class="characteristic-roll" data-characteristic="coordination" title="Roll Coordination">
                  <i class="fas fa-dice-d20"></i>
                </button>
                <button type="button" class="characteristic-damage" data-characteristic="coordination" title="Apply Temporary Damage">
                  <i class="fas fa-tint"></i>
                </button>
                <button type="button" class="characteristic-bonus" data-characteristic="coordination" title="Apply Temporary Bonus">
                  <i class="fas fa-plus-circle"></i>
                </button>
              </div>
              <div class="characteristic-modifiers">
                {{#if system.characteristics.coordination.bonus}}
                <span class="characteristic-bonus-value">+{{system.characteristics.coordination.bonus}}</span>
                {{/if}}
                {{#if system.characteristics.coordination.malus}}
                <span class="characteristic-malus-value">-{{system.characteristics.coordination.malus}}</span>
                {{/if}}
              </div>
            </div>
          </div>
        </div>

        {{!-- Séparateur --}}
        <div class="characteristics-separator"></div>

        {{!-- Caractéristiques Mentales --}}
        <div class="characteristics-column mental">
          <h3 class="column-header">Caractéristiques Mentales</h3>
          <div class="characteristic flex-group-center">
            <label class="characteristic-label">{{localize config.characteristics.ingeniosite}}</label>
            <div class="characteristic-content">
              <input type="text" name="system.characteristics.ingeniosite.value"
                value="{{system.characteristics.ingeniosite.value}}" data-dtype="Number" />
              <div class="characteristic-controls">
                <button type="button" class="characteristic-roll" data-characteristic="ingeniosite" title="Roll Ingéniosité">
                  <i class="fas fa-dice-d20"></i>
                </button>
                <button type="button" class="characteristic-damage" data-characteristic="ingeniosite" title="Apply Temporary Damage">
                  <i class="fas fa-tint"></i>
                </button>
                <button type="button" class="characteristic-bonus" data-characteristic="ingeniosite" title="Apply Temporary Bonus">
                  <i class="fas fa-plus-circle"></i>
                </button>
              </div>
              <div class="characteristic-modifiers">
                {{#if system.characteristics.ingeniosite.bonus}}
                <span class="characteristic-bonus-value">+{{system.characteristics.ingeniosite.bonus}}</span>
                {{/if}}
                {{#if system.characteristics.ingeniosite.malus}}
                <span class="characteristic-malus-value">-{{system.characteristics.ingeniosite.malus}}</span>
                {{/if}}
              </div>
            </div>
          </div>
          <div class="characteristic flex-group-center">
            <label class="characteristic-label">{{localize config.characteristics.perspicacite}}</label>
            <div class="characteristic-content">
              <input type="text" name="system.characteristics.perspicacite.value"
                value="{{system.characteristics.perspicacite.value}}" data-dtype="Number" />
              <div class="characteristic-controls">
                <button type="button" class="characteristic-roll" data-characteristic="perspicacite" title="Roll Perspicacité">
                  <i class="fas fa-dice-d20"></i>
                </button>
                <button type="button" class="characteristic-damage" data-characteristic="perspicacite" title="Apply Temporary Damage">
                  <i class="fas fa-tint"></i>
                </button>
                <button type="button" class="characteristic-bonus" data-characteristic="perspicacite" title="Apply Temporary Bonus">
                  <i class="fas fa-plus-circle"></i>
                </button>
              </div>
              <div class="characteristic-modifiers">
                {{#if system.characteristics.perspicacite.bonus}}
                <span class="characteristic-bonus-value">+{{system.characteristics.perspicacite.bonus}}</span>
                {{/if}}
                {{#if system.characteristics.perspicacite.malus}}
                <span class="characteristic-malus-value">-{{system.characteristics.perspicacite.malus}}</span>
                {{/if}}
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    {{!-- Magie --}}
    <div class="tab magic" data-group="primary" data-tab="magic">
      {{!-- Arts --}}
      <div class="arts">
        <header class="items-header flexrow">
          <h3 class="item-name">{{localize "MYRIAD_SYSTEM.ItemType.art"}}</h3>
          <div class="item-controls">
            <a class="item-control item-create" title="Create Art" data-type="art"><i class="fas fa-plus"></i></a>
          </div>
        </header>
        <ol class="items-list">
          {{#each arts as |item id|}}
          <li class="item flexrow" data-item-id="{{item._id}}">
            {{> "systems/myriad-system/templates/actor/parts/actor-features.hbs"}}
          </li>
          {{/each}}
        </ol>
      </div>

      {{!-- Domaines --}}
      <div class="domains">
        <header class="items-header flexrow">
          <h3 class="item-name">{{localize "MYRIAD_SYSTEM.ItemType.domain"}}</h3>
          <div class="item-controls">
            <a class="item-control item-create" title="Create Domain" data-type="domain"><i class="fas fa-plus"></i></a>
          </div>
        </header>
        <ol class="items-list">
          {{#each domains as |item id|}}
          <li class="item flexrow" data-item-id="{{item._id}}">
            {{> "systems/myriad-system/templates/actor/parts/actor-features.hbs"}}
          </li>
          {{/each}}
        </ol>
      </div>

      {{!-- Sorts --}}
      {{> "systems/myriad-system/templates/actor/parts/actor-spells.hbs"}}
    </div>

    {{!-- Inventaire --}}
    <div class="tab inventory" data-group="primary" data-tab="inventory">
      <div class="inventory-grid">
        {{#each system.inventory.grid as |row y|}}
        <div class="inventory-row">
          {{#each row as |cell x|}}
          <div class="inventory-cell" data-x="{{x}}" data-y="{{y}}" {{#if cell.item}}data-item-id="{{cell.item}}"
            {{/if}}>
            {{#if cell.item}}
            <img src="{{cell.img}}" title="{{cell.name}}" />
            {{/if}}
          </div>
          {{/each}}
        </div>
        {{/each}}
      </div>
      {{!-- Liste d'objets en vrac --}}
      <div class="overflow-items">
        <h3>{{localize "Overflow Items"}}</h3>
        <ol class="items-list">
          {{#each overflowItems as |item id|}}
          <li class="item flexrow" data-item-id="{{item._id}}">
            {{> "systems/myriad-system/templates/actor/parts/actor-items.hbs"}}
          </li>
          {{/each}}
        </ol>
      </div>
    </div>
    
    {{!-- Effets --}}
    <div class="tab effects" data-group="primary" data-tab="effects">
      <header class="effects-header">
        <h3 class="effects-title">{{localize "MYRIAD_SYSTEM.SheetLabels.Effects"}}</h3>
      </header>
      {{> "systems/myriad-system/templates/actor/parts/actor-effects.hbs"}}
    </div>

    {{!-- Biographie --}}
    <div class="tab biography" data-group="primary" data-tab="biography">
      {{editor enrichedBiography target="system.biography" button=true owner=owner editable=editable}}
    </div>
  </section>
</form>
