<ng-template [ngIf]="keymapOptions.length === 0">
    <span> No keymaps are available to choose from. Create a keymap first! </span>
</ng-template>
<ng-template [ngIf]="keymapOptions.length > 0">
    <div>
        <b>Switch to keymap:</b>
        <ngx-select [items]="keymapOptions"
                    [ngModel]="selectedKeymap?.abbreviation || -1"
                    [autoActiveOnMouseEnter]="false"
                    size="small"
                    optionValueField="id"
                    optionTextField="text"
                    (select)="onChange($event)">

            <ng-template ngx-select-option let-option>
                <span [ngClass]="{'indent-dropdown-item':option.data.id !== '-1'}">
                    <span>{{ option.text }}</span>
                    <span class="scancode--searchterm">
                        {{ option.data.additional?.explanation}}
                    </span>
                </span>
            </ng-template>
        </ngx-select>
    </div>
    <div>
        <div class="empty" *ngIf="!selectedKeymap?.abbreviation">
            <img src="assets/images/base-layer--blank.svg">
        </div>
        <svg-keyboard *ngIf="selectedKeymap?.abbreviation"
                    [moduleConfig]="selectedKeymap.layers[0].modules">
        </svg-keyboard>
    </div>
</ng-template>
