<section data-tab="traits" data-group="{{tab.group}}" class="tab {{tab.cssClass}}">
  {{#unless isPlayMode}}
  <p class="settlement-hint">{{localize "OATHHAMMER.Label.TraitNPCHint"}}</p>
  {{/unless}}
  {{#if traits.length}}
  <ul class="item-list item-list--npc-trait">
    <li class="item-list-header">
      <span></span>
      <span class="col-name">{{localize "OATHHAMMER.Label.Name"}}</span>
      <span>{{localize "OATHHAMMER.Label.Type"}}</span>
      <span></span>
    </li>
    {{#each traits as |trait|}}
    <li class="item-entry" data-item-id="{{trait.id}}" data-item-uuid="{{trait.uuid}}">
      <img src="{{trait.img}}" class="item-img" />
      <span class="item-name" {{#if trait._descTooltip}}data-tooltip="{{trait._descTooltip}}"{{/if}}>{{trait.name}}</span>
      {{#if trait.system.traitType}}
      <span class="npc-trait-type-badge npc-trait-type-{{trait.system.traitType}}">
        {{localize (lookup ../traitTypeLabels trait.system.traitType)}}
      </span>
      {{else}}
      <span></span>
      {{/if}}
      <div class="item-actions">
        {{#unless ../isPlayMode}}
        <a data-action="edit" data-item-id="{{trait.id}}" data-item-uuid="{{trait.uuid}}"><i class="fa-solid fa-edit"></i></a>
        <a data-action="delete" data-item-id="{{trait.id}}" data-item-uuid="{{trait.uuid}}"><i class="fa-solid fa-trash"></i></a>
        {{/unless}}
      </div>
    </li>
    {{/each}}
  </ul>
  {{else}}
  <p class="no-items">{{localize "OATHHAMMER.Label.NoTraits"}}</p>
  {{/if}}
</section>
