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

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

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

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

    {{!-- Principal Tab --}}
    <div class="sheet-body" data-group="primary" data-tab="principal">
      <div class="tab-content">
        <div class="flexcol">
          
          <div class="grid grid-2col">
            {{!-- Attributs --}}
            <div class="sheet-section">
              <h3>Attributs</h3>
              {{#each system.attributs as |attribut keyattribut|}}
                <div class="attribut-section">
                  <h4>{{attribut.label}}</h4>
                  {{#each attribut.values as |value keyvalue|}}
                    <div class="flexrow">
                      <label>{{#if value.label}}{{value.label}}{{else}}{{keyvalue}}{{/if}}</label>
                      <input type="number" name="system.attributs.{{keyattribut}}.values.{{keyvalue}}.value" value="{{value.value}}" data-dtype="Number"/>
                    </div>
                  {{/each}}
                </div>
              {{/each}}
            </div>

            {{!-- Biodata --}}
            <div class="sheet-section">
              <h3>Informations</h3>
              <div class="flexrow">
                <label>Age</label>
                <input type="number" name="system.biodata.age" value="{{system.biodata.age}}" data-dtype="Number"/>
              </div>
              <div class="flexrow">
                <label>Taille</label>
                <input type="text" name="system.biodata.taille" value="{{system.biodata.taille}}" data-dtype="String"/>
              </div>
              <div class="flexrow">
                <label>Poids</label>
                <input type="number" name="system.biodata.poids" value="{{system.biodata.poids}}" data-dtype="Number"/>
              </div>
              <div class="flexrow">
                <label>État</label>
                <input type="text" name="system.etat.etat" value="{{system.etat.etat}}" data-dtype="String"/>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

    {{!-- Description Tab --}}
    <div class="sheet-body" data-group="primary" data-tab="description">
      <div class="tab-content">
        
        {{!-- Description --}}
        <div class="sheet-section">
          <h3>Description</h3>
          <div class="description-content">
            {{formInput systemFields.biodata.fields.description enriched=enrichedDescription value=system.biodata.description name="system.biodata.description" toggled=true}}
          </div>
        </div>

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

      </div>
    </div>

  </section>
</section>
