<div class="skill-box" (click)="openDetails()">
  <input
    type="checkbox"
    class="skill-proficiency-input"
    [(ngModel)]="skillProficiency"
    (change)="updateValue()"
    (click)="$event.stopPropagation()"
  />
  <label class="skill-attribute-name">{{
    "attributesAbbreviations." + ("skillsAttributes." + skillName | translate)
      | translate
  }}</label>
  <label class="skill-name">{{ "skills." + skillName | translate }}</label>
  <label [class]="skill.advantage" class="skill-modifier">{{
    skillModifier
  }}</label>
  <!-- TODO: Potential Advantage style -->
  <!-- @if (skill.advantage !== "none") {
    <span>
      <icon [size]="'xs'" [type]="'UI'" [icon]="skill.advantage!"></icon>
    </span>
  } -->
</div>
