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

  <section class="stats-skills-columns" style="display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start;">
    {{#each skillColumns as |column|}}
    <div class="stat-skill-column" data-stat="{{column.key}}">
      <div class="stat-block">
        <div class="stat-header">
          <h3 class="stat-label">{{column.label}}</h3>
          <button type="button" class="stat-roll-btn inline-btn"
                  data-action="rollStat" data-stat="{{column.key}}"
                  data-tooltip="{{localize "UA2E.Common.RollName" name=column.label}}">
            <i class="fas fa-dice-d10"></i>
          </button>
        </div>
        <div class="stat-value-row">
          <input type="number" name="system.stats.{{column.key}}.value"
                 value="{{column.statValue}}" min="1" max="99" class="stat-input" />
          <span class="stat-pct">%</span>
        </div>
        <div class="stat-descriptor">
          <input type="text" name="system.stats.{{column.key}}.descriptor"
                 value="{{lookup (lookup ../stats column.key) "descriptor"}}" placeholder="{{localize "UA2E.Stats.DescriptorPlaceholder"}}" />
        </div>
      </div>

      <div class="column-skills">
        <h4 class="skill-group-header">{{localize "UA2E.Stats.SkillsHeader" stat=column.label}}</h4>
        <table class="skill-table compact">
          <thead>
            <tr>
              <th></th>
              <th>{{localize "UA2E.Common.Skill"}}</th>
              <th>%</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {{#if column.skills.length}}
              {{#each column.skills as |skill|}}
              <tr data-item-id="{{skill.id}}"
                  class="skill-row {{#if skill.isObsession}}obsession{{/if}} {{#if skill.isFree}}free-skill{{/if}} {{#if skill.isStrangeness}}strangeness-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="{{localize "UA2E.Skill.ToggleObsession"}}">★</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}}
                  {{#if skill.isStrangeness}}
                    <span class="tag strangeness-tag {{skill.strangenessType}}">{{skill.strangenessType}}</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}}
            {{else}}
              <tr><td colspan="4" class="hint">{{localize "UA2E.Skill.Empty"}}</td></tr>
            {{/if}}
          </tbody>
        </table>
        <div class="column-add-skill">
          <button type="button" data-action="createSkill" data-stat="{{column.key}}" class="create-btn compact-create-btn">
            <i class="fas fa-plus"></i> {{localize "UA2E.Skill.NewSkill"}}
          </button>
        </div>
      </div>
    </div>
    {{/each}}
  </section>

</div>