<div class="quick-access" title="{{ 'ZenMode_QuickAccessTitle' | translate }}">
    <input ng-keydown="onKeypress($event)"
           ng-change="search(search.term)"
           ng-model="search.term"
           type="text"
           placeholder="{{ 'ZenMode_SearchForAnything' | translate }}"/>
    <ul ng-show="search.term">
        <li class="quick-access-category"
            ng-click="search('menuCategory')">Menu</li>
        <li class="no-result"
            ng-hide="menuItems | length">---</li>
        <li class="result"
            ng-class="{selected: $index == search.index}"
            ng-click="selectMenuItem(entry.index)"
            ng-mouseenter="search.index=$index"
            ng-repeat="entry in menuItems"><a>{{ entry.name | trim }}</a></li>

        <li class="quick-access-category"
            ng-click="search('reportCategory')">{{ 'General_Reports' | translate }}</li>
        <li class="no-result"
            ng-hide="reportEntries | length">---</li>
        <li class="result"
            ng-class="{selected: ((menuItems | length) + $index) == search.index}"
            ng-mouseenter="search.index=((menuItems | length) + $index)"
            ng-click="selectMenuItem(report.index)"
            ng-repeat="report in reportEntries"><a>{{ report.name | trim }}</a></li>

        <li class="quick-access-category"
            ng-click="search('%')">{{ 'SitesManager_Sites' | translate }}</li>
        <li class="no-result"
            ng-hide="(sitesModel.sites | length) || sitesModel.isLoading">---</li>
        <li class="no-result"
            ng-show="sitesModel.isLoading">{{ 'MultiSites_LoadingWebsites' | translate }}</li>
        <li class="result"
            ng-show="!sitesModel.isLoading"
            ng-mouseenter="search.index=((menuItems | length) + $index + (reportEntries | length))"
            ng-class="{selected: ((menuItems | length) + $index + (reportEntries | length)) == search.index}"
            ng-click="selectSite(site.idsite)"
            ng-repeat="site in sitesModel.sites"><a>{{ site.name | trim }}</a></li>
    </ul>
</div>