<section data-tab="skills" data-group="{{tab.group}}" class="tab {{tab.cssClass}}">
  <div class="skills-container">
    {{#each skillGroups as |group|}}
    <fieldset class="skills-group">
      <legend>
        {{localize group.label}}
        <span class="attr-rank">({{group.attrRank}})</span>
      </legend>
      <div class="skills-list">
        <div class="skills-header">
          <span class="skill-name-col">{{localize "OATHHAMMER.Label.Skill"}}</span>
          <span class="skill-rank-col">{{localize "OATHHAMMER.Label.SkillRank"}}</span>
          <span class="skill-modifier-col">{{localize "OATHHAMMER.Label.SkillModifier"}}</span>
          <span class="skill-total-col">{{localize "OATHHAMMER.Label.TotalDice"}}</span>
          <span class="skill-color-col">{{localize "OATHHAMMER.Label.ColorDice"}}</span>
        </div>
        {{#each group.skillData as |skill|}}
        <div class="skill-row">
          <a class="skill-name-col rollable" data-action="rollSkill" data-skill="{{skill.key}}" data-tooltip="{{localize 'OATHHAMMER.Dialog.RollSkill'}}">
            <i class="fa-solid fa-dice skill-roll-icon"></i>{{localize skill.label}}
          </a>
          <div class="skill-rank-col">
            <select name="{{skill.rankName}}" {{#if ../../isPlayMode}}disabled{{/if}}>
              {{#each skill.rankOptions as |opt|}}
              <option value="{{opt.value}}" {{#if opt.selected}}selected{{/if}}>{{opt.label}}</option>
              {{/each}}
            </select>
          </div>
          <div class="skill-modifier-col">
            <input type="number" name="{{skill.modifierName}}" value="{{skill.modifier}}" {{#if ../../isPlayMode}}disabled{{/if}} />
          </div>
          <span class="skill-total-col skill-total">{{skill.total}}</span>
          <div class="skill-color-col">
            <span class="color-dice-dot color-dice-{{skill.colorDiceType}}"></span>
            <select name="{{skill.colorDiceTypeName}}" class="color-dice-select" {{#if ../../isPlayMode}}disabled{{/if}}>
              <option value="white" {{#if (eq skill.colorDiceType "white")}}selected{{/if}}>⬜</option>
              <option value="red"   {{#if (eq skill.colorDiceType "red")}}selected{{/if}}>🔴</option>
              <option value="black" {{#if (eq skill.colorDiceType "black")}}selected{{/if}}>⬛</option>
            </select>
            <input type="number" name="{{skill.colorDiceName}}" value="{{skill.colorDice}}" min="0" {{#if ../../isPlayMode}}disabled{{/if}} />
          </div>
        </div>
        {{/each}}
      </div>
    </fieldset>
    {{/each}}
  </div>
</section>
