{{!-- Skills Tab --}}
<div class="tab skills {{#if (eq activeSheetTab "skills")}}active{{/if}}" data-group="sheet" data-tab="skills">

  <div class="skills-controls">
    <button type="button" data-action="createSkill" class="create-btn">
      <i class="fas fa-plus"></i> {{localize "UA2E.Skill.NewSkill"}}
    </button>
  </div>

  {{#each skillsByType as |skills statKey|}}
    {{#unless (eq statKey "strangeness")}}
    {{#if skills.length}}
    <section class="skill-group" data-stat="{{statKey}}">
      <h4 class="skill-group-header">
        {{localize (concat "UA2E.Stats." (capitalize statKey))}}
      </h4>
      <table class="skill-table">
        <thead>
          <tr>
            <th></th>{{!-- obsession star --}}
            <th>{{localize "UA2E.Common.Name"}}</th>
            <th>%</th>
            <th></th>{{!-- controls --}}
          </tr>
        </thead>
        <tbody>
          {{#each skills as |skill|}}
          <tr data-item-id="{{skill.id}}" class="skill-row {{#if skill.isObsession}}obsession{{/if}} {{#if skill.isFree}}free-skill{{/if}}">
            <td class="obsession-col">
              {{#unless skill.isDerived}}
              <button type="button" class="obsession-toggle {{#if skill.isObsession}}active{{/if}}"
                      data-action="toggleObsession"
                      data-tooltip="{{#if skill.isObsession}}{{localize "UA2E.Skill.ObsessionOnTooltip"}}{{else}}{{localize "UA2E.Skill.ObsessionOffTooltip"}}{{/if}}">
                ★
              </button>
              {{/unless}}
            </td>
            <td class="skill-name-col">
              <span class="skill-name">{{skill.name}}</span>
              {{#if skill.isFree}}<span class="tag free-tag">{{localize "UA2E.Skill.FreeTag"}}</span>{{/if}}
            </td>
            <td class="skill-value-col">
              <span class="skill-value">{{skill.displayValue}}</span>
            </td>
            <td class="skill-controls-col">
              <button type="button" data-action="{{skill.rollAction}}"
                      data-tooltip="{{localize "UA2E.Common.RollName" name=skill.name}}">
                <i class="fas fa-dice-d10"></i>
              </button>
              {{#unless skill.isDerived}}
              <button type="button" data-action="editSkill"
                      data-tooltip="{{localize "UA2E.Common.Edit"}}">
                <i class="fas fa-edit"></i>
              </button>
              <button type="button" data-action="deleteSkill"
                      data-tooltip="{{localize "UA2E.Common.Delete"}}">
                <i class="fas fa-trash"></i>
              </button>
              {{/unless}}
            </td>
          </tr>
          {{/each}}
        </tbody>
      </table>
    </section>
    {{/if}}
    {{/unless}}
  {{/each}}

  {{!-- Strangeness (Magick/Avatar) --}}
  {{#if skillsByType.strangeness.length}}
  <section class="skill-group strangeness-group">
    <h4 class="skill-group-header">{{localize "UA2E.Strangeness.MagickAvatarSkills"}}</h4>
    <table class="skill-table">
      <thead>
        <tr>
          <th></th>
          <th>{{localize "UA2E.Common.Name"}}</th>
          <th>%</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {{#each skillsByType.strangeness as |skill|}}
        <tr data-item-id="{{skill.id}}" class="skill-row strangeness {{#if skill.isObsession}}obsession{{/if}}">
          <td class="obsession-col">
            <span class="obsession-icon {{#if skill.isObsession}}active{{/if}}">★</span>
          </td>
          <td class="skill-name-col"><span class="skill-name">{{skill.name}}</span></td>
          <td class="skill-value-col"><span class="skill-value">{{skill.value}}%</span></td>
          <td class="skill-controls-col">
            <button type="button" data-action="editSkill">
              <i class="fas fa-edit"></i>
            </button>
            <button type="button" data-action="deleteSkill">
              <i class="fas fa-trash"></i>
            </button>
          </td>
        </tr>
        {{/each}}
      </tbody>
    </table>
  </section>
  {{/if}}

</div>