<div ng-controller="PowerpanelWelcomePageController as vm" ng-init="vm.widgetEnvironment = 'modern'" class="lt-module-page">

    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title">
            <h1>{{'Welcome page configuration' | translate}}</h1>
        </div>
        <div class="lt-module-page-top__actions">
            <div>
                {{'Configuration' | translate}}
            </div>
            <div class="lt-module-page--paddingleft">
                <wizdom365-specific-configuration-picker module="'Powerpanel'"></wizdom365-specific-configuration-picker>
            </div>
            <div class="lt-module-page--paddingleft">
                <button class="btn btn-primary" ng-disabled="vm.working" ng-click="vm.save()">{{'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">{{'Welcome page preview opt-in ' | translate}}</label>
                                </div>

                                <div class="col-xs-8">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" ng-model="vm.settingElement.WelcomePage.previewOnDesktop" class="lt-checkbox" />
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-4">
                                    <label class="control-label">{{'Welcome page heading' | translate}}</label>
                                </div>

                                <div class="col-xs-8">
                                    <input class="form-control" type="text" ng-model="vm.settingElement.WelcomePage.heading">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-4">
                                    <label class="control-label">{{'Welcome page description' | translate}}</label>
                                </div>

                                <div class="col-xs-8">
                                    <textarea rows="4" class="form-control" ng-model="vm.settingElement.WelcomePage.description"></textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-4">
                                    <label class="control-label">{{'Welcome page color' | translate}}</label>
                                </div>

                                <div class="col-xs-8">
                                    <div class="input-group color-picker">
                                        <input class="form-control" type="text" ng-model="vm.settingElement.WelcomePage.brandingColor" colorpicker-with-input="true" colorpicker-parent="true" colorpicker placeholder="Uses theme color if empty">
                                        <span class="input-group-addon" style="background-color: {{vm.settingElement.WelcomePage.brandingColor}};"></span>

                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-4">
                                    <label class="control-label">{{'Welcome page section divider line style' | translate}}</label>
                                </div>

                                <div class="col-xs-8">
                                    <select class="form-control lt-select" ng-model="vm.settingElement.WelcomePage.sectionLineType">
                                        <option ng-repeat="option in ['Line', 'Slope', 'Swirl']" value="{{option.toLowerCase()}}">{{option}}</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-4">
                                    <label class="control-label">{{'Welcome page small logo (48x48)' | translate}}</label>
                                </div>

                                <div class="col-xs-8">
                                    <wizdom365-image-picker ng-model="vm.settingElement.WelcomePage.smallLogo"></wizdom365-image-picker>
                                    <img ng-src="{{vm.settingElement.WelcomePage.smallLogo}}"
                                         style="max-height: 200px; max-width: 200px;"
                                         ng-if="vm.settingElement.WelcomePage.smallLogo" />
                                    <a class="glyphicon glyphicon-trash"
                                       aria-hidden="true"
                                       ng-if="vm.settingElement.WelcomePage.smallLogo"
                                       ng-click="vm.settingElement.WelcomePage.smallLogo = ''">
                                    </a>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-4">
                                    <label class="control-label">{{'Welcome page big logo' | translate}}</label>
                                </div>

                                <div class="col-xs-8">
                                    <wizdom365-image-picker ng-model="vm.settingElement.WelcomePage.bigLogo"></wizdom365-image-picker>
                                    <img ng-src="{{vm.settingElement.WelcomePage.bigLogo}}"
                                         style="max-height: 200px; max-width: 200px;"
                                         ng-if="vm.settingElement.WelcomePage.bigLogo" />
                                    <a class="glyphicon glyphicon-trash"
                                       aria-hidden="true"
                                       ng-if="vm.settingElement.WelcomePage.bigLogo"
                                       ng-click="vm.settingElement.WelcomePage.bigLogo = ''">
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>