<div class="at-select">
    <div class="at-select__header">
        <h1 class="at-select__header-text">{{res 'autoTypeHeader'}}</h1>
        <div class="at-select__hint" id="at-select__hint">
            <div class="at-select__hint-text"><span class="shortcut">{{keyEnter}}</span>: {{res 'autoTypeSelectionHint'}}</div>
            <div class="at-select__hint-text"><span class="shortcut">{{{actionSymbol}}} {{keyEnter}}</span>: {{res 'autoTypeSelectionHintAction'}}</div>
            <div class="at-select__hint-text"><span class="shortcut">{{{altSymbol}}} {{keyEnter}}</span>: {{res 'autoTypeSelectionHintOpt'}}</div>
            <div class="at-select__hint-text"><span class="shortcut">{{{shiftSymbol}}} {{keyEnter}}</span>: {{res 'autoTypeSelectionHintShift'}}</div>
        </div>
        {{#if filterText}}
        <div class="at-select__header-filter" id="at-select__header-filter">
            <input type="text" readonly value="{{filterText}}" class="at-select__header-filter-input" />
            <i class="at-select__header-filter-clear fa fa-times"></i>
        </div>
        {{/if}}
    </div>
    <div class="at-select__message">
        <div class="at-select__message-text">{{topMessage}}</div>
    </div>
    <div class="at-select__items">
        <div class="scroller">
            {{#if itemsHtml}}
                <table class="at-select__table">{{{itemsHtml}}}</table>
            {{else}}
                <h1 class="at-select__empty-title muted-color">{{res 'autoTypeNoMatches'}}</h1>
            {{/if}}
        </div>
        <div class="scroller__bar-wrapper"><div class="scroller__bar"></div></div>
    </div>
</div>
