<section class="{{cssClass}} competence-sheet" autocomplete="off">
  <header class="sheet-header">
    <img class="profile-img" src="{{item.img}}" data-action="editImage" title="{{item.name}}"/>
    <div class="header-fields">
      <h1 class="charname"><input name="item.name" type="text" value="{{item.name}}" placeholder="Nom de la Compétence"/></h1>
    </div>
  </header>

  {{!-- Decorative Separator --}}
  <div class="header-separator"></div>

  {{!-- Sheet Body --}}
  <section class="sheet-body">
    <div class="tab" data-group="primary">
      
      {{!-- Properties Grid --}}
      <div class="properties-grid">
        <div class="property-group">
          <label class="property-label">Catégorie</label>
          <select class="property-input" name="system.categorie" value="{{data.categorie}}" data-dtype="String">
            {{selectOptions config.optionsCompetence selected=data.categorie valueAttr="key" labelAttr="label"}}
          </select>
        </div>

        <div class="property-group">
          <label class="property-label">Niveau</label>
          <select class="property-input" name="system.niveau" value="{{data.niveau}}" data-dtype="Number">
            {{selectOptions optionsBase selected=data.niveau localize=false}}
          </select>
        </div>

        <div class="property-group">
          <label class="property-label">Spécialisation</label>
          <input class="property-input" type="text" name="system.specialisation" value="{{data.specialisation}}" data-dtype="String" placeholder="Nom de la spécialisation"/>
        </div>

        <div class="property-group checkbox-group">
          <label class="property-label">
            <input type="checkbox" name="system.isspecialisation" {{checked data.isspecialisation}}/>
            Est une spécialisation ?
          </label>
        </div>

        <div class="property-group checkbox-group">
          <label class="property-label">
            <input type="checkbox" name="system.niveauunrequis" {{checked data.niveauunrequis}}/>
            Niveau 1 requis ?
          </label>
        </div>

      </div>

      {{!-- Description Section --}}
      <div class="description-section">
        <h3 class="section-title">Description</h3>
        <div class="description-content">
          {{formInput systemFields.description enriched=enrichedDescription value=system.description name="system.description" toggled=true}}
        </div>

      </div>

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