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

  {{!-- Sheet Header --}}
  <header class="sheet-header">
    <div class="header-fields">
      <div class="flexrow">
        <img class="profile-img" src="{{img}}" data-edit="img" data-tooltip="{{name}}" />
        <div class="flexcol">
          <h1 class="charname"><input name="name" type="text" value="{{name}}" placeholder="Name" /></h1>
          <div class="flexrow">
            <div class="flex-group-left header-compteurs">
              <ul>
                <li data-attribute="resistance" class="flexrow">
                  <span class="carac-label">Résistance</span>
                  <a class="resistance-moins"><i class="fa-solid fa-square-minus"></i></a>
                  <input type="number" data-dtype="Number" name="system.etat.resistance.value" value="{{system.etat.resistance.value}}" min="0" max="{{system.etat.resistance.max}}"/>
                  /
                  <input type="number" data-dtype="Number" name="system.etat.resistance.max" value="{{system.etat.resistance.max}}" min="0" {{#unless @root.options.vueDetaillee}}disabled{{/unless}}/>
                  <a class="resistance-plus"><i class="fa-solid fa-square-plus"></i></a>
                </li>
                <li data-attribute="structure" class="flexrow">
                  <span class="carac-label">Structure</span>
                  <a class="structure-moins"><i class="fa-solid fa-square-minus"></i></a>
                  <input type="number" data-dtype="Number" name="system.etat.structure.value" value="{{system.etat.structure.value}}" min="0" max="{{system.etat.structure.max}}"/>
                  /
                  <input type="number" data-dtype="Number" name="system.etat.structure.max" value="{{system.etat.structure.max}}" min="0" {{#unless @root.options.vueDetaillee}}disabled{{/unless}} />
                  <a class="structure-plus"><i class="fa-solid fa-square-plus"></i></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>

  {{!-- Sheet Tab Navigation --}}
  <nav class="sheet-tabs tabs" data-group="primary">
    <a class="item" data-action="tab" data-group="primary" data-tab="description">Description</a>
    <a class="item" data-action="tab" data-group="primary" data-tab="items">Chargement</a>
  </nav>

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

    {{!-- Carac Tab --}}
    <div class="tab" data-group="primary" data-tab="description">
      <div class="flexrow">
        {{>"systems/foundryvtt-reve-de-dragon/templates/actor/vue-detaillee.hbs"}}
      </div>
      <div class="grid grid-2col">
        <div class="flex-group-left flexcol">
          <ol>
            <li class="caracteristique flexrow list-item">
              <span class="carac-label">Catégorie</span>
              <select name="system.categorie" class="categorie" data-dtype="String" {{#unless @root.options.vueDetaillee}}disabled{{/unless}}>
                {{#select system.categorie}}
                {{>"systems/foundryvtt-reve-de-dragon/templates/enum-categorie-vehicule.hbs"}}
                {{/select}}
              </select>
            </li>
            <li class="caracteristique flexrow list-item">
              <span class="carac-label">Vitesse</span>
              <input class="caracteristique streched" type="text" data-dtype="String" name="system.vitesse" value="{{system.vitesse}}" {{#unless @root.options.vueDetaillee}}disabled{{/unless}} />
            </li>
            <li class="caracteristique flexrow list-item">
              <span class="carac-label">Bonus rames</span>
              <input class="caracteristique streched" type="text" data-dtype="String" name="system.bonus" value="{{system.bonus}}" {{#unless @root.options.vueDetaillee}}disabled{{/unless}} />
            </li>
            <li class="caracteristique flexrow list-item">
              <span class="carac-label">Manoeuvrabilité</span>
              <input class="caracteristique streched" type="text" data-dtype="String" name="system.manoeuvrabilite" value="{{system.manoeuvrabilite}}" {{#unless @root.options.vueDetaillee}}disabled{{/unless}} />
            </li>
            <li class="caracteristique flexrow list-item">
              <span class="carac-label">Equipage</span>
              <input class="caracteristique streched" type="number" data-dtype="Number" name="system.equipage" value="{{system.equipage}}" min="0" {{#unless @root.options.vueDetaillee}}disabled{{/unless}} />
            </li>
            <li class="caracteristique flexrow list-item">
              <span class="carac-label">Capacité d'Encombrement</span>
              <input class="caracteristique streched" type="number" data-dtype="Number" name="system.capacite_encombrement" value="{{system.capacite_encombrement}}" min="0" {{#unless @root.options.vueDetaillee}}disabled{{/unless}} />
            </li>
          </ol>
        </div>
      </div>

      <h3>Description</h3>
      <fieldset>
        <div>
          {{formInput systemFields.description enriched=description value=system.description name="system.description" toggled=true}}
        </div>
      </fieldset>
      {{>"systems/foundryvtt-reve-de-dragon/templates/actor/editor-notes-mj.hbs"}}
    </div>

    {{!-- Equipment Tab --}}
    <div class="tab items" data-group="primary" data-tab="items">
      {{> "systems/foundryvtt-reve-de-dragon/templates/actor/inventaire-monnaie.hbs"}}
      {{> "systems/foundryvtt-reve-de-dragon/templates/actor/inventaire.hbs"}}
    </div>

  </section>
</section>