<div class="keyboard">
  @for (row of rows; track $index) {
    <div class="keyboard__row">
      @for (k of row; track k.id) {
        <div
          class="key"
          [class.key--active]="pressedIds().has(k.id)"
          [style.--w]="k.flex"
        >
          @if (k.alt || k.ru) {
            <div class="key__top">
              <span class="key__alt">{{ k.alt ?? '' }}</span>
              <span class="key__ru">{{ k.ru ?? '' }}</span>
            </div>
            <span class="key__en">{{ k.en }}</span>
          } @else {
            <span class="key__label">{{ k.en }}</span>
          }
        </div>
      }
    </div>
  }

  <div class="keyboard__row keyboard__row--modifiers">
    @for (k of modifierRow; track k.id) {
      <div
        class="key"
        [class.key--active]="pressedIds().has(k.id)"
        [class.key--space]="k.isSpace"
        [style.--w]="k.isSpace ? null : k.flex"
      >
        <span class="key__label">{{ k.en }}</span>
      </div>
    }
  </div>
</div>
