<div class="modal-header">
    <!--<button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>-->
    <i class="ms-Icon ms-Icon--Cancel" data-ng-click="cancel()" aria-hidden="true"></i>
    <h1 class="modal-title">{{'Weather' | translate}}</h1>
</div>
<div class="modal-body wizdom-weather">
    <form>
        <div class="form-group">
            <label class="control-label">{{'Template' | translate}}</label>
            <wizdom365-template-picker template-url="data.templateUrl" directory-path="Weather/Templates/ViewTemplates"></wizdom365-template-picker>
        </div>
        <div class="form-group">
            <label class="control-label location-type-label">{{'Location' | translate}}</label>
            <div class="radio">
                <label><input type="radio" name="location" value="fixed" ng-model="data.locationType" ng-selected="true" />{{'Fixed' | translate}}</label>
            </div>
            <div class="radio">
                <label><input type="radio" name="location" value="current" ng-model="data.locationType" />{{"Current user's location (from user profile)" | translate}}</label>
            </div>
        </div>
        <div class="form-group">
            <div ng-if="data.locationType=='fixed'">
                <label>{{ 'Select location' | translate}}:<span class="normal-weight"> &nbsp;{{data.fixedCity.name}}</span></label>
                <input type="text" class="location" ng-model="data.fixedCity.name" style="display: none;" />
            </div>
            <div ng-if="data.locationType=='current'">
                <label>{{ 'Location if userprofile field is empty' | translate}}:<span class="normal-weight">&nbsp;{{data.fallbackCity.name}}</span></label>
                <input type="text" class="location" ng-model="data.fallbackCity.name" style="display: none;" />
            </div>
            <div class="input-group col-sm-12">
                <input type="text" class="search-query form-control" ng-model="searchCity" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }" autocomplete="off" placeholder="{{ 'Find city' | translate}}">
                <span ng-click="searchCity = ''" ng-show="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="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>
                    </li>
                </ul>
            </div>
        </div>
        <div class="form-group">
            <div class="checkbox">
                <label for="chkAllowManage" class="margin-zero normal-weight">
                    <input id="chkAllowManage" class="margin-zero normal-weight" type="checkbox" ng-model="data.allowManageLocation" />
                    {{'Allow users to change location' | translate}}
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label">{{'Temperature Unit' | translate}}</label>
            <select class="form-control" ng-model="data.temperatureUnit">
                <option value="metric">Celsius</option>
                <option value="imperial">Fahrenheit</option>
                <option value="standard">Kelvin</option>
            </select>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button class="btn btn-success wiz-btn-padding" ng-click="updateConfig();">{{'Save' | translate}}</button>
    <button class="btn btn-default wiz-btn-padding" ng-disabled="loading" ng-click="cancel();">{{"Cancel" | translate}}</button>
</div>