<!--! Magic Searchbar -->
<div id="magic-search" magic-overrides>
    <div class="search-bar">
        <i class="fi-filter fa fa-filter go" ng-class="{'has-items': currentSearch.length &gt; 0}"></i>
        <div id="search-main-area">
            <span class="item-list">
                <span class="label radius secondary item"
                      ng-repeat="facet in currentSearch" ng-cloak="cloak">
                    <span>
                        {{ facet.label[0] }}:<b>{{ facet.label[1] }}</b>
                    </span>
                    <a class="remove" ng-click="removeFacet($index, $event)" title="{{ strings.remove }}">
                        <i class="fi-x fa fa-times"></i>
                    </a>
                </span>
            </span>
            <span id="search-selected" class="label" ng-cloak="" ng-show="facetSelected">
                {{ facetSelected.label[0] }}:
            </span>
            <div id="search-entry">
                <input id="search-input" type="text" data-dropdown="facet-drop" dropdown-toggle
                       placeholder="{{ strings.prompt }}" autocomplete="off"
                       ng-class="{'has-items': currentSearch.length &gt; 0}" />
                <ul id="facet-drop" class="f-dropdown dropdown-menu" data-dropdown-content="">
                    <li ng-repeat="facet in filteredObj" ng-show="!facetSelected">
                        <a ng-click="facetClicked($index, $event, facet.name)"
                           ng-show="!isMatchLabel(facet.label)">{{ facet.label }}</a>
                        <a ng-click="facetClicked($index, $event, facet.name)"
                           ng-show="isMatchLabel(facet.label)">
                           {{ facet.label[0] }}<span class="match">{{ facet.label[1] }}</span>{{ facet.label[2] }}
                        </a>
                    </li>
                    <li ng-repeat="option in filteredOptions" ng-show="facetSelected">
                        <a ng-click="optionClicked($index, $event, option.key)"
                           ng-show="!isMatchLabel(option.label)">
                           {{ option.label }}
                        </a>
                        <a ng-click="optionClicked($index, $event, option.key)"
                           ng-show="isMatchLabel(option.label)">
                           {{ option.label[0] }}<span class="match">{{ option.label[1] }}</span>{{ option.label[2] }}
                        </a>
                </ul>
            </div>
        </div>
        <a ng-click="clearSearch()" ng-show="currentSearch.length &gt; 0" title="{{ strings.cancel }}">
            <i class="fi-x fa fa-times cancel"></i>
        </a>
    </div>
</div>
