<div class="quick-access piwikSelector"
     ng-class="{active: view.searchActive, expanded: view.searchActive}"
     piwik-focus-anywhere-but-here="view.searchActive = false;">
    <span class="icon-search" ng-hide="search.term || view.searchActive"
          ng-mouseenter="view.searchActive=true"></span>
    <input class="s"
           title="{{ quickAccessTitle }}"
           ng-keydown="quickAccess.onKeypress($event)"
           ng-change="view.searchActive=true;quickAccess.searchMenu(search.term)"
           ng-focus="view.searchActive=true"
           ng-model="search.term" piwik-focus-if="view.searchActive"
           type="text" tabindex="2"/>
    <div class="dropdown" ng-show="search.term && view.searchActive">
        <ul ng-hide="(quickAccess.numMenuItems > 0) || (quickAccess.sitesModel.sites | length)">
            <li class="no-result">{{ 'General_SearchNoResults' | translate }}</li>
        </ul>
        <ul ng-repeat="subcategory in quickAccess.menuItems">
            <li class="quick-access-category"
                ng-click="search.term = subcategory.title;quickAccess.searchMenu(search.term)">{{ subcategory.title }}</li>
            <li class="result"
                ng-class="{selected: submenuEntry.menuIndex == search.index}"
                ng-mouseenter="search.index=submenuEntry.menuIndex"
                ng-click="quickAccess.selectMenuItem(submenuEntry.index)"
                ng-repeat="submenuEntry in subcategory.items"><a>{{ submenuEntry.name | trim }}</a></li>
        </ul>
        <ul class="quickAccessMatomoSearch">
            <li class="quick-access-category websiteCategory"
                ng-show="hasSitesSelector && ((quickAccess.sitesModel.sites | length) || quickAccess.sitesModel.isLoading)"
            >{{ 'SitesManager_Sites' | translate }}</li>
            <li class="no-result"
                ng-show="hasSitesSelector && quickAccess.sitesModel.isLoading">{{ 'MultiSites_LoadingWebsites' | translate }}</li>
            <li class="result"
                ng-show="hasSitesSelector && !quickAccess.sitesModel.isLoading"
                ng-mouseenter="search.index=(quickAccess.numMenuItems + $index)"
                ng-class="{selected: (quickAccess.numMenuItems + $index) == search.index}"
                ng-click="quickAccess.selectSite(site.idsite)"
                ng-repeat="site in quickAccess.sitesModel.sites"><a ng-bind="site.name"></a></li>
        </ul>
        <ul>
            <li class="quick-access-category helpCategory">{{ 'General_HelpResources' | translate }}</li>
            <li ng-class="{selected: search.index == 'help'}"
                class="quick-access-help"
                ng-mouseenter="search.index='help'">
                    <a ng-href="https://matomo.org?s={{ urlEncode(search.term) }}" target="_blank">{{'CoreHome_SearchOnMatomo' | translate:(search.term)}}</a>
            </li>
        </ul>
    </div>
</div>