<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-long2">Catégorie </label>
          <select class="status-small-label color-class-common item-field-label-long" type="text"
            name="system.categorie" value="{{system.categorie}}" data-dtype="string">
            {{#select system.categorie}}
            {{#each config.competenceCategorie as |categ cKey|}}
            <option value="{{cKey}}">{{categ}}</option>
            {{/each}}
            {{/select}}
          </select>
        </li>

        <li class="flexrow item">
          <label class="generic-label item-field-label-long2">Profil </label>
          <select class="status-small-label color-class-common item-field-label-long" type="text"
            name="system.profil" value="{{system.profil}}" data-dtype="string">
            {{#select system.profil}}
            {{#each config.competenceProfil as |profil pKey|}}
            <option value="{{pKey}}">{{profil.name}}</option>
            {{/each}}
            {{/select}}
          </select>
        </li>

        <li class="flexrow item">
          <label class="generic-label item-field-label-long2">Compétence de Prédilection ? </label>
          <input type="checkbox" class="padd-right status-small-label color-class-common item-field-label-short"
            name="system.predilection" {{checked system.predilection}}/>
        </li>

        <li class="flexrow item">
          <label class="generic-label item-field-label-long2">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">
          <h3>Spécialités</h3>
        </li>
        <li class="flexrow item">
          <ul>
            {{#each system.specialites as |specialite key|}}
            <li class="specialite-item item flexrow" data-specialite-index="{{key}}">
              <input type="text" class="padd-right color-class-common edit-specialite" value="{{specialite.name}}"
                data-dtype="String" />
              <a class="item-control delete-specialite" title="Supprimer une specialité"><i
                  class="fas fa-trash"></i></a>
            </li>
            <li class="specialite-item item flexrow" data-specialite-index="{{key}}">
              <textarea row="4" type="text" class="padd-right color-class-common edit-specialite-description"
                data-dtype="String">{{specialite.description}}</textarea>
            </li>
            <hr>
            {{/each}}
          </ul>
        <li class="flexrow item">
          <button id="add-specialite" class="chat-card-button">Ajouter une Spécialité</button>
        </li>
      </ul>
    </div>

  </section>
</form>