<form class="{{cssClass}}" autocomplete="off">
  {{> systems/fvtt-les-heritiers/templates/partial-item-header.html}}

  {{> systems/fvtt-les-heritiers/templates/partial-item-nav.html}}

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

    {{> systems/fvtt-les-heritiers/templates/partial-item-description.html}}

    <div class="tab details" data-group="primary" data-tab="details">

      <ul class="item-list alternate-list">
        <li class="flexrow item">
          <label class="generic-label item-field-label-long">Niveau </label>
          <input type="text" class="padd-right status-small-label color-class-common item-field-label-short"
            name="system.niveau" value="{{system.niveau}}" data-dtype="Number" />
        </li>
        <li class="flexrow item">
          <label class="generic-label item-field-label-long">Attribut 1 </label>
          <select class="status-small-label color-class-common item-field-label-long" type="text"
            name="system.attribut1" value="{{system.attribut1}}" data-dtype="string">
            {{#select system.attribut1}}
            {{#each attributs as |attrLabel attrKey|}}
            <option value="{{attrKey}}">{{attrLabel}}</option>
            {{/each}}
            {{/select}}
          </select>
        </li>
        <li class="flexrow item">
          <label class="generic-label item-field-label-long">Attribut 2 </label>
          <select class="status-small-label color-class-common item-field-label-long" type="text"
            name="system.attribut2" value="{{system.attribut2}}" data-dtype="string">
            <option value="none">Aucun</option>
            {{#select system.attribut2}}
            {{#each attributs as |attrLabel attrKey|}}
            <option value="{{attrKey}}">{{attrLabel}}</option>
            {{/each}}
            {{/select}}
          </select>
        </li>
        <li class="flexrow item">
          <label class="generic-label item-field-label-long">Attribut 3 </label>
          <select class="status-small-label color-class-common item-field-label-long" type="text"
            name="system.attribut3" value="{{system.attribut3}}" data-dtype="string">
            <option value="none">Aucun</option>
            {{#select system.attribut3}}
            {{#each attributs as |attrLabel attrKey|}}
            <option value="{{attrKey}}">{{attrLabel}}</option>
            {{/each}}
            {{/select}}
          </select>
        </li>

        <li class="flexrow item">
          <h3>Prédilections</h3>
        </li>
        <li class="flexrow item">
          <ul>
            {{#each system.predilections as |predilection key|}}
            <li class="prediction-item item flexrow" data-prediction-index="{{key}}">
              <input type="text" class="padd-right color-class-common edit-predilection" value="{{predilection.name}}"
                data-dtype="String" />
            </li>
            <li class="prediction-item item flexrow" data-prediction-index="{{key}}">
              <textarea row="4" type="text" class="padd-right color-class-common edit-predilection-description"
                data-dtype="String">{{predilection.description}}</textarea>
            </li>
            <li class="prediction-item item flexrow" data-prediction-index="{{key}}">
              <label class="generic-label">Acquise ? <input class="predilection-acquise" type="checkbox" {{checked
                  predilection.acquise}} /></label>

              <label class="generic-label">Maitrise ? <input class="predilection-maitrise" type="checkbox" {{checked
                  predilection.maitrise}} /></label>

              <label class="generic-label">Utilisée ? <input class="predilection-used" type="checkbox" {{checked
                  predilection.used}} /></label>
              <a class="item-control delete-prediction" title="Supprimer une predilection"><i
                  class="fas fa-trash"></i></a>
            </li>
            <hr>
            {{/each}}
          </ul>
        <li class="flexrow item">
          <button id="add-predilection" class="chat-card-button">Ajouter une prédilection</button>
        </li>
      </ul>
    </div>

  </section>
</form>