<div piwik-focus-anywhere-but-here="view.showSitesList=false"
     class="siteSelector piwikSelector borderedControl"
     ng-class="{'expanded': view.showSitesList, 'disabled': !model.hasMultipleSites()}">

    <script type="text/ng-template" id="siteselector_allsiteslink.html">
        <div ng-click="switchSite({idsite: 'all', name: allSitesText}, $event);view.showSitesList=false;"
             class="custom_select_all">
            <a href="{{ getUrlAllSites() }}"
               piwik-ignore-click
               ng-bind-html="allSitesText" tabindex="4"></a>
        </div>
    </script>

    <input ng-if="inputName" type="hidden" name="{{ inputName }}" ng-value="selectedSite.id"/>

    <a ng-click="model.hasMultipleSites() && (view.showSitesList=!view.showSitesList) && !model.isLoading && model.loadInitialSites();"
       piwik-onenter="view.showSitesList=!view.showSitesList; view.showSitesList && !model.isLoading && model.loadInitialSites();"
       href="javascript:void(0)"
       ng-attr-title="{{ model.hasMultipleSites() ? _pk_translate('CoreHome_ChangeCurrentWebsite', (selectedSite.name || model.firstSiteName)) : '' }}"
       ng-class="{'loading': model.isLoading}"
       class="title" tabindex="4">
        <span class="icon icon-arrow-bottom"
              ng-class="{'iconHidden': model.isLoading, 'collapsed': !view.showSitesList}"></span>
        <span>
            <span ng-bind="selectedSite.name || model.firstSiteName" ng-if="selectedSite.name || !placeholder">?</span>
            <span ng-if="!selectedSite.name && placeholder" class="placeholder">{{ placeholder }}</span>
        </span>
    </a>

    <div ng-show="view.showSitesList" class="dropdown">

        <div class="custom_select_search" ng-show="autocompleteMinSites <= model.sites.length || view.searchTerm">
            <input type="text"
                   piwik-focus-if="view.showSitesList && (autocompleteMinSites <= model.sites.length || view.searchTerm)"
                   ng-click="view.searchTerm=''"
                   ng-model="view.searchTerm"
                   ng-change="model.searchSite(view.searchTerm)"
                   placeholder="{{ 'General_Search' | translate }}"
                   tabindex="4"
                   class="websiteSearch inp browser-default"/>
            <img title="Clear"
                 ng-show="view.searchTerm"
                 ng-click="view.searchTerm=''; model.loadInitialSites()"
                 class="reset"
                 src="plugins/CoreHome/images/reset_search.png"/>
        </div>

        <div ng-if="allSitesLocation=='top' && showAllSitesItem"
             ng-include="'siteselector_allsiteslink.html'"></div>

        <div class="custom_select_container">
            <ul class="custom_select_ul_list" ng-click="view.showSitesList=false;">
                <li ng-click="switchSite(site, $event)"
                    ng-repeat="site in model.sites"
                    ng-hide="!showSelectedSite && activeSiteId==site.idsite">
                    <a piwik-ignore-click href="{{ getUrlForSiteId(site.idsite) }}"
                       piwik-autocomplete-matched="view.searchTerm"
                       title="{{ site.name }}"
                       ng-bind="site.name" tabindex="4"></a>
                </li>
            </ul>
            <ul ng-show="!model.sites.length && view.searchTerm" class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all siteSelect">
                <li class="ui-menu-item">
                    <a class="ui-corner-all" tabindex="-1">{{ ('SitesManager_NotFound' | translate) + ' ' + view.searchTerm }}</a>
                </li>
            </ul>
        </div>

        <div ng-if="allSitesLocation=='bottom' && showAllSitesItem"
             ng-include="'siteselector_allsiteslink.html'"></div>

    </div>
</div>