<div id="{{$ctrl.containerId}}" 
    class="st-typeahead-container {{$ctrl.addClass}}" 
    click-outside="$ctrl.close()" 
    ng-click="$ctrl._setModel('Touched')"
    ng-class="{'st-typeahead-choices-open': $ctrl.isOpen}"
    ng-disabled="$ctrl.ngDisabled">
    <div class="st-typeahead-match">
        <div class="st-typeahead-selected" ng-if="$ctrl.modelValue && $ctrl.modelValue.length">
            <span 
                ng-repeat="item in $ctrl.modelValue" 
                ng-dblclick="$ctrl.remove($event, item, $index)"
                ng-click="$ctrl.selectMatch($event, item, $index)"
                click-outside="$ctrl.matchSelected = {}"
                class="btn btn-default btn-xs st-typeahead-selected-item"
                ng-class="{'btn-primary': $ctrl.isMatch(item)}"
                ng-disabled="$ctrl.ngDisabled || $ctrl.selectedDisabled(item)"
                >
                <span ng-bind="$ctrl.getter(item) | truncate: $ctrl.config.truncate"></span>
                <span 
                    class="st-typeahead-selected-item-remove" 
                    ng-click="$ctrl.remove($event, item, $index)">&times</span>
            </span>
        </div>
        <div class="st-typeahead-search">
            <input
                id="{{$ctrl.inputId}}"
                ng-model="$ctrl.search" 
                ng-model-options="{debounce: 499}"
                class="form-control" 
                ng-keypress="$ctrl.keypress($event)"
                ng-keyup="$ctrl.keyup($event)"
                ng-keydown="$ctrl.keydown($event)"
                ng-disabled="$ctrl.ngDisabled"
                translate-attr="{placeholder: $ctrl.trs.placeholder.translationId}"
                translate-values="$ctrl.trs.placeholder.values"
                autocapitalize="off" 
                autocomplete="off"
                autocorrect="off"
                role="combobox" 
                spellcheck="false" 
                type="search"
                ondrop="return false"/>
            <span class="spinner-icon" ng-show="$ctrl.loading"></span>
        </div>
    </div>
    <div class="st-typeahead-choices" ng-show="$ctrl.isChoicesVisible">
        <ul class="st-typeahead-choices-list" ng-style="$ctrl.visibleOptions" ui-scroll-viewport>
            <li class="st-typeahead-choices-messages" ng-if="!$ctrl.options.length">
                <span 
                    class="st-typeahead-choices-msg-item" 
                    ng-show="$ctrl.loading" style="display: flex">
                    <span class="spinner-icon" style="position: initial"></span>
                </span>
                <span 
                    class="st-typeahead-choices-msg-item" 
                    ng-if="$ctrl.trs.noDataFound" 
                    ng-hide="$ctrl.loading"
                    translate="{{$ctrl.trs.noDataFound.translationId}}"
                    translate-values="$ctrl.trs.noDataFound.values"></span>
            </li>
            <li 
                ng-repeat="item in $ctrl.options track by $index"
                class="st-typeahead-choices-item"
                ng-bind-html="$ctrl.getter(item)"
                ng-click="$ctrl.select($event, item, $index)"
                ng-disabled="$ctrl.optionDisabled(item)"
                ng-class="{'st-typeahead-choices-item-match': $ctrl.isOptionSelected(item)}"
                id="{{'item-'+$index}}"
                >
            </li>
        </ul>
    </div>
</div>