<main class="container">
  <!-- Layout Switcher -->
  <div class="layout-controls">
    <button (click)="switchLayout()" class="layout-button">
      Switch Layout: {{ currentLayout.toString() }}
    </button>
  </div>

  <!-- Conditional Rendering basierend auf currentLayout -->
  <app-qwerty-keyboard 
    *ngIf="currentLayout === Keyboards.QWERTY"
    [shiftActive]="shiftActive"
    (keyPressed)="handleKeyPress($event)"
    (shiftToggled)="toggleShift()">
  </app-qwerty-keyboard>

  <app-dvorak-keyboard 
    *ngIf="currentLayout === Keyboards.DVORAK"
    [shiftActive]="shiftActive"
    (keyPressed)="handleKeyPress($event)"
    (shiftToggled)="toggleShift()">
  </app-dvorak-keyboard>

  <app-circle-keyboard 
    *ngIf="currentLayout === Keyboards.CIRCLE"
    [shiftActive]="shiftActive"
    (keyPressed)="handleKeyPress($event)"
    (shiftToggled)="toggleShift()">
  </app-circle-keyboard>
</main>
