<ng-template [ngIf]="layers">
    <layers [class.disabled]="popoverShown" (select)="selectLayer($event.index)" [current]="currentLayer"></layers>
    <keyboard-slider [layers]="layers"
                     [currentLayer]="currentLayer"
                     [keybindAnimationEnabled]="keybindAnimationEnabled"
                     [capturingEnabled]="popoverEnabled"
                     [selectedKey]="selectedKey"
                     [halvesSplit]="halvesSplit"
                     [keyboardLayout]="keyboardLayout"
                     (keyClick)="onKeyClick($event.moduleId, $event.keyId, $event.keyTarget)"
                     (keyHover)="onKeyHover($event.moduleId, $event.event, $event.over, $event.keyId)"
                     (capture)="onCapture($event.moduleId, $event.keyId, $event.captured)"
    ></keyboard-slider>
    <popover tabindex="0" [visible]="popoverShown" [keyPosition]="keyPosition" [wrapPosition]="wrapPosition" [defaultKeyAction]="popoverInitKeyAction"
             [currentKeymap]="keymap" [currentLayer]="currentLayer" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>
    <div class="tooltip bottom"
         [class.in]="tooltipData.show"
         [style.top.px]="tooltipData.posTop"
         [style.left.px]="tooltipData.posLeft"
    >
        <div class="tooltip-arrow"></div>
        <div class="tooltip-inner">
            <p *ngFor="let item of tooltipData.content | async">
                {{ item.name }}: {{ item.value }}
            </p>
        </div>
    </div>
</ng-template>
