<!-- Localization completed -->
<div class="width-1000" ng-controller="SettingsTabController">
    <div class="text-center">
        <h4 localized>form.settings.design.title</h4>
    </div>

    <div>
        <form class='form-horizontal'>
            <div class='form-group'>
                <div ng-show='successMessage' class='success'><span>{{successMessage}}</span></div>
            </div>

            <div class='form-group'>
                <label class='col-sm-3 control-label' localized>form.settings.design.color.font</label>
                <div class='col-sm-9'>
                    <input ng-model='settings.backgroundColor' colorpicker type='text' class='form-control'
                           localized-placeholder='form.settings.design.color.font.placeholder'/>
                </div>
            </div>
            <div class='form-group'>
                <label class='col-sm-3 control-label' localized>form.settings.design.color.app.names</label>
                <div class='col-sm-9'>
                    <input ng-model='settings.textColor' colorpicker type='text' class='form-control'
                           localized-placeholder='form.settings.design.color.app.names.placeholder'/>
                </div>
            </div>
            <div class='form-group'>
                <label class='col-sm-3 control-label' localized>form.settings.design.url.background.image</label>
                <div class='col-sm-7'>
                    <input ng-model='settings.backgroundImageUrl'
                           type='text' class='form-control'
                           localized-placeholder='form.settings.design.url.background.image.placeholder'>
                </div>
                <div class="col-sm-2 text-right">
                    <button type="button" class="btn btn-default" ng-click="uploadBackground()"
                            localized>form.configuration.settings.design.upload</button>
                </div>
            </div>
            <div class='form-group'>
                <label class='col-sm-3 control-label' for="iconSize" localized>form.settings.design.size.icon</label>
                <div class='col-sm-9'>
                    <select class='form-control' id="iconSize" ng-model='settings.iconSize'>
                        <option ng-value="'SMALL'" ng-selected="settings.iconSize === 'SMALL'"
                                localized>form.settings.design.size.icon.small</option>
                        <option ng-value="'MEDIUM'" ng-selected="settings.iconSize === 'MEDIUM'"
                                localized>form.settings.design.size.icon.medium</option>
                        <option ng-value="'LARGE'" ng-selected="settings.iconSize === 'LARGE'"
                                localized>form.settings.design.size.icon.large</option>
                    </select>
                </div>
            </div>
            <div class='form-group'>
                <label class='col-sm-3 control-label' for="desktopHeader" localized>form.configuration.settings.design.desktop.header</label>
                <div class='col-sm-9'>
                    <select class='form-control' id="desktopHeader" ng-model='settings.desktopHeader'>
                        <option ng-value="'NO_HEADER'" ng-selected="settings.desktopHeader === 'NO_HEADER'"
                                localized>form.configuration.settings.design.desktop.header.no</option>
                        <option ng-value="'DEVICE_ID'" ng-selected="settings.desktopHeader === 'DEVICE_ID'"
                                localized>form.configuration.settings.design.desktop.header.deviceid</option>
                        <option ng-value="'DESCRIPTION'" ng-selected="settings.desktopHeader === 'DESCRIPTION'"
                                localized>form.configuration.settings.design.desktop.header.description</option>
                        <option ng-value="'TEMPLATE'" ng-selected="settings.desktopHeader === 'TEMPLATE'"
                                localized>form.configuration.settings.design.desktop.header.custom</option>
                        <option ng-if="settings.customPropertyName1" ng-value="'CUSTOM1'" ng-selected="settings.desktopHeader === 'CUSTOM1'">{{settings.customPropertyName1}}</option>
                        <option ng-if="settings.customPropertyName2" ng-value="'CUSTOM2'" ng-selected="settings.desktopHeader === 'CUSTOM2'">{{settings.customPropertyName2}}</option>
                        <option ng-if="settings.customPropertyName3" ng-value="'CUSTOM3'" ng-selected="settings.desktopHeader === 'CUSTOM3'">{{settings.customPropertyName3}}</option>
                    </select>
                    <div class='field-hint'  ng-if="settings.desktopHeader === 'DESCRIPTION' || settings.desktopHeader === 'CUSTOM1' || settings.desktopHeader === 'CUSTOM2' || settings.desktopHeader === 'CUSTOM3'" localized>form.configuration.settings.design.desktop.header.hint</div>
                </div>
            </div>

            <div class='form-group' ng-if="settings.desktopHeader === 'TEMPLATE'">
                <label class='col-sm-3 control-label' localized>form.configuration.settings.design.desktop.header.template</label>
                <div class='col-sm-9'>
                    <input ng-model='settings.desktopHeaderTemplate'
                           type='text' class='form-control'
                           placeholder='{{desktopHeaderTemplatePlaceholder}}'>
                </div>
            </div>
            <div class='form-group'>
                <div class='col-sm-offset-3 col-sm-9 padding-left'>
                    <button type='submit' class='btn btn-default' ng-click='saveDefaultDesignSettings()'
                            localized>button.save</button>
                </div>
            </div>
        </form>
    </div>
</div>
