<style>
    .toolbarBtn {
        display:inline-block;
        line-height: 38px;
        background-color: #f0f0f0;
        text-align: center;
        /* border:solid 1px #; */
        min-width:38px;
        cursor: move;
    }
    .ui-sortable-placeholder{
        background-color: gray;
        /* border:dashed 2px gray; */
        visibility: inherit !important;
    }
    .dropZone{
        border: dashed 2px gray; 
        border-collapse: collapse;
        padding: 5px;
        min-height:45px;
        /* width:30%; */
    }
</style>


<div class="lt-module-page__top lt-module-page-top">
    <div class="lt-module-page-top__title">
        <div ng-transclude></div>
    </div>
    <div class="lt-module-page-top__actions">
        <button class="btn btn-primary" ng-click="vm.save()">{{'Save configuration' | translate}}</button>
    </div>
</div>


<div class="panel panel-default lt-module-page__content-panel">
    <div class="panel-heading">{{'Toolbar' | translate}}</div>
    <div class="panel-body">
        <div class="row">
                <div class="col-md-6">
                    <button class="btn btn-primary" ng-click="vm.defaultButtonLayout()">{{'Restore default icon layout' | translate}}</button>
                    <br /><br />
                    <b>{{'Available buttons' | translate}}</b>
                    <div ui-sortable="vm.sortableOptions" ng-model="vm.allButtons" class="toolbar">
                        <div class="toolbarBtn" ng-repeat="button in vm.allButtons" title="{{button.title}}">
                            <i class="fa" ng-class="button.icon"></i>{{button.content}}
                        </div>
                    </div>
                    <br />
                    <b>{{'Toolbars' | translate}}</b>
                    <div class="toolbar dropZone" ui-sortable="vm.sortableOptions" ng-model="vm.line1">
                        <div class="toolbarBtn" ng-repeat="button in vm.line1 track by $index">
                            <i class="fa" ng-class="button.icon"></i>{{button.content}}
                        </div>
                    </div>
                    <div class="toolbar dropZone" style="border-top:none;" ui-sortable="vm.sortableOptions" ng-model="vm.line2">
                        <div class="toolbarBtn" ng-repeat="button in vm.line2 track by $index">
                            <i class="fa" ng-class="button.icon"></i>{{button.content}}
                        </div> 
                    </div>
                    <br />
                    <div ng-if="vm.showSpellCheckerWarning" class="alert alert-info">
                        <b>{{'To use spell check, make sure you have entered a valid license key for SCAYT' | translate}}</b>
                    </div>
                </div>
                <div class="col-md-6">
                    <b>{{'Preview' | translate}}:</b>
                    <div ui-tinymce toolbarbuttons="vm.toolbarConfiguration" ng-model="vm.text" style="height:250px;"></div>                       
                </div>
            </div>
    </div>
</div>
<div class="panel panel-default lt-module-page__content-panel">
    <div class="panel-heading">{{'Spellchecker' | translate}}</div>
    <div class="panel-body">
        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="vm.useCurrentLanguageForSpellChecking">
                {{'Use users current language for spellchecking' | translate}}
            </label>
        </div>
        {{'Default language or fallback language, if the current users language is not supported' | translate}}<br />
        <select class="form-control" ng-options="l.title + ' (' + l.code + ')' for l in vm.spellCheckingLanguages" ng-model="vm.defaultSpellCheckingLanguage">
        </select>
    </div>
</div>    

<!-- <div>{{vm.line1}}</div>
<div>{{vm.line2}}</div>
<div>{{vm.toolbarConfiguration}}</div> -->