<div class="popover tooltip-container container-fluid" tabindex="-1">
	<div class="arrow"></div>
	<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
	<div class="col-md-12 small">
		<a href="" ng-click="setGeoLocation()"><i class="wizdom-icon icon-compass2"></i>{{'Show current location' | translate}}</a>
	</div>
	<div class="col-md-12">
		<label>{{ 'Search' | translate}}</label>
	</div>
	<div class="input-group col-md-12">
		<input type="text" class="search-query form-control" ng-model="$parent.$parent.searchCity" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }" autocomplete="off" placeholder="{{ 'Find city' | translate}}">
		<span ng-click="$parent.$parent.searchCity = ''" ng-show="$parent.$parent.searchCity" class="glyphicon glyphicon-remove form-control-feedback"></span>
		<span class="input-group-btn search-waiting" style="display: block;" ng-show="searching">
			<img src="/_layouts/15/images/gears_anv4.gif" />
		</span>
		<span class="input-group-btn" style="display: block;" ng-hide="searching">
			<i class="btn glyphicon glyphicon-search location-search-icon"></i>
		</span>
	</div>
	<div class="col-md-12 city-search-result" ng-show="cities && cities.length > 0">
		<ul class="search-result">
			<li ng-repeat="city in cities track by $index">
				<a href="#" ng-click="selectCity(city)">{{city.name}} - {{city.country}}</a>
				<i ng-click="toggleFavorite(city)" class="favourite-icon {{city.favorite?'glyphicon glyphicon-heart':'glyphicon glyphicon-heart-empty'}}" title="{{(city.favorite?'Remove from favorites':'Mark as favorite') | translate}}"></i>
			</li>
		</ul>
	</div>
	<div class="col-md-12 afterinput-extramargin" ng-show="favoriteLocations.length>0">
		<label>{{'Favorites' | translate}}</label>
	</div>
	<div class="col-md-12 fav-city-container" ng-show="favoriteLocations.length>0">
		<ul class="fav-cities">
			<li ng-repeat="favorite in favoriteLocations">
				<a href="" class="location" ng-click="locationChanged(favorite)">{{favorite.name}}</a><i ng-click="removeFavourite(favorite)" class="favourite-icon glyphicon glyphicon-remove-circle" title="{{'Remove from favorites' | translate}}"></i>
			</li>
		</ul>
	</div>
	<div class="col-md-12" ng-show="suggestedLocations.length>0">
		<label> {{'Suggested' | translate}}</label>
	</div>
	<div class="col-md-12" ng-show="suggestedLocations.length>0">
		<ul class="fav-cities">
			<li ng-repeat="loc in suggestedLocations">
				<a href="" class="location" ng-click="locationChanged(loc)">{{loc.name}}</a><i ng-click="toggleFavorite(loc)" class="favourite-icon {{loc.favorite?'glyphicon glyphicon-heart':'glyphicon glyphicon-heart-empty'}}" title="{{(loc.favorite?'Remove from favorites':'Mark as favorite') | translate}}"></i>
			</li>
		</ul>
	</div>
	<div class="col-md-12">
		<label> {{'Temperature Unit' | translate}}</label>
	</div>
    <div class="col-md-12">
        <div class="dropdown">
            <!--Workaround: I cannot get the bootstrap styling to work inside the jquery toolbox template, so i have created a workaound with ng-init/ng-click.-->
            <button class="btn btn-default" ng-init="showDropdown = {display:'none'}" ng-click="showDropdown = {display:'inline'}" type="button">
                {{(userConfiguration.temperatureUnit == 'metric' ? 'Celsius' : (userConfiguration.temperatureUnit == 'imperial' ? 'Fahrenheit' : 'Kelvin'))}}&nbsp;&nbsp;<span class="caret"></span>
            </button>
            <ul class="dropdown-menu" ng-style="showDropdown" ng-show="true">
                <li><a href="#" ng-click="temperatureUnitChanged('metric')">Celsius</a></li>
                <li><a href="#" ng-click="temperatureUnitChanged('imperial')">Fahrenheit</a></li>
                <li><a href="#" ng-click="temperatureUnitChanged('standard')">Kelvin</a></li>
            </ul>
        </div>        
    </div>
</div>
