<div ng-controller="richtextGeneralController as vm" class="lt-module-page">

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

    <div class="panel panel-default lt-module-page__content-panel" style="padding-bottom: 100px">
        <div class="panel-heading">
            {{'Configuration' | translate}}
        </div>
        <wizdom365-spinner style="position: absolute; top: 50%; left: 50%;" loading="loading"></wizdom365-spinner>

        <div class="form-group">
            <div class="col-sm-3" style="padding: 0">
                <label id="image-width-label" class="control-label controls-textbox">{{'Default image width' | translate}}</label>
            </div>

            <div class="col-sm-9">
                <input type="range" class="form-control" id="image-width-slider" min="0" max="1000" ng-model="vm.defaultImageWidth" />
                <span>{{vm.defaultImageWidth}}px</span>
            </div>
        </div>
    </div>


</div>

<style>
    #image-width-slider {
        accent-color: #512da8;
        width: 50%;
    }
    #image-width-slider::-webkit-slider-thumb {
        background-color: #512da8;
    }
    #image-width-label {
        padding-top: 10px;
    }
</style>