<div class="tab skills sheet-part" data-group="sheet" data-tab="skills">
  <h3>{{ localize 'VERMINE.skills' }}</h3>

  {{!-- Category Selector --}}
  <div class="skill-category-selector">
    <label>{{ localize 'VERMINE.preferred_category' }}:</label>
    {{#if isEditMode}}
    <select name="system.skill_categories.preferred" data-dtype="String">
      <option value="">{{ localize 'NONE' }}</option>
      {{#each system.skill_categories as |category key|}}
        {{#ife key "preferred"}}{{else}}
          <option value="{{key}}" {{#ife key ../system.skill_categories.preferred}}selected{{/ife}}>
            {{localize category.label}}
          </option>
        {{/ife}}
      {{/each}}
    </select>
    {{else}}
    <span>{{system.skill_categories.preferred}}</span>
    {{/if}}
  </div>

  {{!-- Skills Grid by Category --}}
  <div class="skills-container">
    {{#each config.skillCategories as |category key|}}
      {{#ife key "preferred"}}{{else}}
        {{> "systems/vermine2047/templates/actor/parts/npc-skill-category.hbs"
          categoryKey=key
          categoryLabel=(concat "VERMINE.skill_category." key)
        }}
      {{/ife}}
    {{/each}}
  </div>

  {{!-- Free Skills text field --}}
  <div class="form-group">
    <label for="system.freeSkills">{{ localize 'ADVERSITY.skills' }}</label>
    {{#if isEditMode}}
    <input type="text" name="system.freeSkills" value="{{system.freeSkills}}" data-dtype="String" placeholder="{{ localize 'ADVERSITY.skills_placeholder' }}"/>
    {{else}}
    <span>{{system.freeSkills}}</span>
    {{/if}}
  </div>
</div>
