<section data-tab="skills" data-group="{{tab.group}}" class="tab {{tab.cssClass}}">
  {{#unless isPlayMode}}
  <p class="settlement-hint">{{localize "OATHHAMMER.Label.SkillNPCHint"}}</p>
  {{/unless}}
  {{#if skills.length}}
  <ul class="item-list item-list--npc-skill">
    <li class="item-list-header">
      <span></span>
      <span class="col-name">{{localize "OATHHAMMER.Label.Name"}}</span>
      <span data-tooltip="{{localize 'OATHHAMMER.Label.DicePool'}}">{{localize "OATHHAMMER.Label.DicePool"}}</span>
      <span>{{localize "OATHHAMMER.Label.Threshold"}}</span>
      <span></span>
      <span></span>
    </li>
    {{#each skills as |skill|}}
    <li class="item-entry" data-item-id="{{skill.id}}" data-item-uuid="{{skill.uuid}}">
      <span class="npc-skill-color npc-skill-color-{{skill.system.colorDiceType}}"
            data-tooltip="{{skill.system.colorType}} ({{skill.system.threshold}})">
        {{skill.system.colorEmoji}}
      </span>
      <span class="item-name">{{skill.name}}</span>
      <span class="item-detail">{{skill.system.dicePool}}d</span>
      <span class="item-detail">{{skill.system.threshold}}</span>
      <a class="npc-skill-roll-btn" data-action="rollSkillNPC"
         data-item-id="{{skill.id}}" data-item-uuid="{{skill.uuid}}"
         data-tooltip="{{localize 'OATHHAMMER.Dialog.RollSkill'}}">
        <i class="fa-solid fa-dice-d6"></i>
      </a>
      <div class="item-actions">
        <a data-action="edit" data-item-id="{{skill.id}}" data-item-uuid="{{skill.uuid}}"><i class="fa-solid fa-edit"></i></a>
        <a data-action="delete" data-item-id="{{skill.id}}" data-item-uuid="{{skill.uuid}}"><i class="fa-solid fa-trash"></i></a>
      </div>
    </li>
    {{/each}}
  </ul>
  {{else}}
  <p class="no-items">{{localize "OATHHAMMER.Label.NoSkills"}}</p>
  {{/if}}
</section>
