<div id="weathersettingcontainer" ng-controller="Wizdom365WeatherSettingController" class="lt-module-page">

    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title">
            <h1>Configuration</h1>
        </div>
        <div class="lt-module-page-top__actions">
            <div class="saveConfigurationButton">
                <button class="btn btn-primary wide-config-btn pull-right"
                        ng-disabled="saving"
                        ng-click="saveConfig()">
                    {{'Save configuration' | translate}}
                </button>
            </div>
        </div>
    </div>

    <div class="lt-module-page__content">
        <div class="container-fluid">
            <div class="wizdom-controls">
                <div class="row wizdom-controls-row noborder">
                    <div class="col-sm-12">
                        <form role="form" class="form-horizontal">
                            <div class="form-group">
                                <div class="col-xs-4">
                                    <label class="control-label">{{'Weather service API key' | translate}} TEST</label>
                                </div>
                                <div class="col-xs-8">
                                    <input type="text" class="form-control" id="appkey" placeholder="{{'API Key' | translate}}" ng-model="WeatherServiceAPIKey" ng-change="keyChanged()" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 1000, 'blur': 0 } }">
                                </div>
                            </div>
                        </form>
                        <form role="form" class="form-horizontal">
                            <div class="form-group">
                                <div class="col-xs-4">
                                </div>
                                <div class="col-xs-8">
                                    <div ng-show="isFreeKey" class="text-warning">
                                        {{'The forecast will be more precise if the API key is on a paid subscription.' | translate}}
                                    </div>
                                    <div>
                                        <a target="_blank" href="https://home.openweathermap.org/users/sign_up">{{'Click here to register' | translate}}</a>
                                    </div>
                                </div>
                                
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

   
</div>