<div class="scancode-options">
    <b class="setting-label">Scancode:</b>
    <div class="scancode-container">
        <ngx-select [items]="scanCodeGroups"
                    [ngModel]="selectedScancodeOption?.id"
                    [autoActiveOnMouseEnter]="false"
                    size="small"
                    optionValueField="id"
                    optionTextField="text"
                    optGroupLabelField="text"
                    optGroupOptionsField="children"
                    (select)="onScancodeChange($event)">

            <ng-template ngx-select-option let-option>
                <span [ngClass]="{'indent-dropdown-item':option.data.id !== '0'}">
                    <span>{{ option.text }}</span>
                    <span class="scancode--searchterm">
                        {{ option.data.additional?.explanation}}
                    </span>
                </span>
            </ng-template>

        </ngx-select>
    </div>
    <icon name="question-circle"
          data-toggle="tooltip"
          html="true"
          maxWidth="330"
          title="<p>Looking for a non-US character? Just pick the character of the desired key according to the US layout.</p>
                 <p>Let's say you're a German user and want to map the Ö character. You can see that on US keyboards this is the semicolon key, so choose semicolon in this dropdown.</p>"
          data-placement="bottom"></icon>
    <capture-keystroke-button (capture)="onKeysCapture($event)" tabindex="0"></capture-keystroke-button>
</div>
<div class="modifier-options">
    <b class="setting-label">Modifiers:</b>
    <div class="btn-toolbar modifiers">
        <div class="btn-group btn-group-sm modifiers__left">
            <button type="button" class="btn btn-default"
                    *ngFor="let modifier of leftModifiers; trackBy:modifiersTrackBy"
                    [class.btn-primary]="modifier.checked"
                    (click)="toggleModifier(modifier)"
            >
                {{ modifier.text }}
            </button>
        </div>
        <div class="btn-group btn-group-sm modifiers__right">
            <button type="button" class="btn btn-default"
                    *ngFor="let modifier of rightModifiers; trackBy:modifiersTrackBy"
                    [class.btn-primary]="modifier.checked"
                    (click)="toggleModifier(modifier)"
            >
                {{ modifier.text }}
            </button>
        </div>
    </div>
</div>
<div class="long-press-container" *ngIf="secondaryRoleEnabled">
    <b class="setting-label">Secondary role:</b>
    <div class="secondary-role-groups-container">
        <ngx-select [items]="secondaryRoleGroups"
                    [ngModel]="selectedSecondaryRoleIndex.toString()"
                    [autoActiveOnMouseEnter]="false"
                    size="small"
                    optionValueField="id"
                    optionTextField="text"
                    optGroupLabelField="text"
                    optGroupOptionsField="children"
                    (select)="onSecondaryRoleChange($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>
    <icon name="question-circle"
          data-toggle="tooltip"
          html="true"
          maxWidth="620"
          title="<p class='text-left'>The secondary role activates when another key gets pressed while holding this key.</p>
                 <p class='text-left'>Let's say that the scancode is Escape and the secondary role is Mouse. Then:</p>
                 <ul class='text-left'>
                     <li>Tap this key to trigger Escape. <i>(Primary role)</i></li>
                     <li>Hold this key and press another key to activate the relevant key of the Mouse layer. <i>(Secondary role)</i></li>
                 </ul>
                 <p class='text-left'>The secondary role can be any layer or modifier.</p>"
          data-placement="bottom"></icon>
</div>

<div *ngIf="warningVisible" class="alert alert-warning remap-warning" role="alert">
    You're about to remap a modifier key only on this layer. You probably want to remap it on all layers. If so, check
    the <strong>Remap on all layers</strong> checkbox below.
</div>

<div class="disabled-state--text">
    <i class="fa fa-info-circle"></i>
    When a key is configured as layer switcher key, you can't assign other functions to it.
    To assign a scancode to the key, set the <em>Layer action</em> to <em>None</em>.
</div>
