<div ng-controller="Umbraco.PrevalueEditors.RteController" class="rte-editor-preval">

    <umb-control-group label="Toolbar" description="Pick the toolbar options that should be available when editing">
        <div ng-repeat="cmd in tinyMceConfig.commands">
            <label>
                <umb-checkbox model="cmd.selected"
                              on-change="selectCommand(cmd)"
                              class="mce-cmd" />
                
                <!--<img ng-src="{{cmd.icon}}" />-->
                <i class="mce-ico" ng-class="(cmd.isCustom ? ' mce-i-custom ' : ' mce-i-') + cmd.fontIcon"></i>

                {{cmd.name}}
            </label>
        </div>
    </umb-control-group>

    <umb-control-group label="Stylesheets" description="Pick the stylesheets whose editor styles should be available when editing">
        <div ng-repeat="css in stylesheets">

            <umb-checkbox
                model="css.selected"
                on-change="selectStylesheet(css)"
                text="{{css.name}}"/>
        </div>
    </umb-control-group>
    </umb-control-group>

    <umb-control-group label="Dimensions" description="Set the editor dimensions">
        <div class="vertical-align-items">
            <input type="number" min="0" ng-model="model.value.dimensions.width" class="umb-property-editor-small" title="Width" placeholder="Width" /> &times;
            <input type="number" min="0" ng-model="model.value.dimensions.height" class="umb-property-editor-small" title="Height" placeholder="Height" /> Pixels
        </div>
    </umb-control-group>

    <umb-control-group label="Maximum size for inserted images" description="Maximum width or height - enter 0 to disable resizing">
        <div class="vertical-align-items">
            <input type="number" min="0" ng-model="model.value.maxImageSize" class="umb-property-editor-small" title="Maximum width or height" placeholder="Maximum width or height" /> Pixels
        </div>
    </umb-control-group>

    <umb-control-group label="Mode" description="Select mode">
        <div class="vertical-align-items">
            <select ng-model="model.value.mode">
                <option value="classic">Classic</option> <!-- Theme:modern & inline:false-->
                <option value="distraction-free">Distraction Free</option> <!-- Theme:inlite & inline:true -->
            </select>
        </div>
    </umb-control-group>

</div>
