<ng-template [ngIf]="macroOptions.length === 0">
    <span> No macros are available to choose from. Create a macro first! </span>
</ng-template>
<ng-template [ngIf]="macroOptions.length > 0">
    <p><i>Please note that macro playback is not implemented yet. You can bind macros, but they won't have any effect until firmware support is implemented. We're working on this.</i></p>
    <div class="macro-selector">
        <b> Play macro: </b>
        <ngx-select [items]="macroOptions"
                    [ngModel]="macroOptions[selectedMacroIndex]?.id"
                    [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 class="macro-action-container">
        <div class="list-group">
            <macro-item *ngFor="let macroAction of macros[selectedMacroIndex].macroActions"
                        [macroAction]="macroAction" [editable]="false">
            </macro-item>
        </div>
    </div>
</ng-template>
