<div class="row">
    {{#sectiondata}}
        <section id="{{id}}" {{#classes}}class="{{classes}}"{{/classes}}>
            {{#content}}
                <div class="panel panel-bordered {{classes}}" id="{{id}}">
                    <div class="panel-heading  {{#editing}} {{#dragable}}drag{{/dragable}}{{/editing}}">
                        <h4 class="h-semibold-4 m-0" title="{{blockname}}">{{blockname}}</h4>
                        {{#editing}}
                            <div class="panel-actions" title="move">
                            {{#dragable}}<a class="panel-action edw-icon edw-icon-Move" aria-hidden="true"></a>{{/dragable}}
                            </div>
                        {{/editing}}
                    </div>
                    <div class="panel-body {{#editing}}{{#dragable}}drag{{/dragable}}{{/editing}}">
                        {{{content}}}
                    </div>
                </div>
            {{/content}}
        </section>
    {{/sectiondata}}
</div>

{{#js}}
require(['jquery', 'core_user/repository', 'block_remuiblck/jqueryui'], function($, UserRepository){
    const enableSortable = () => {
        $( "#sortable1, #sortable2, #sortable3" ).sortable({
            connectWith: ".connectedSortable",
            placeholder: "sort-highlight",
            forcePlaceholderSize: true,
            handle: ".drag",
            zIndex: 999999,
            stop:function(){

                var sortables   = ['#sortable1', '#sortable2', '#sortable3'];
                var nonempty = ['nonemptytop', 'nonemptyleft', 'nonemptyright'];
                var preferences = ['remui_layout_top', 'remui_layout_left', 'remui_layout_right'];

                for(var loop=0; loop < sortables.length; loop++){

                    var data = $(sortables[loop]).sortable('toArray');
                    var sortable = data.filter(function(blck) {
                        return blck !== nonempty[loop];
                    });
                    if ( typeof rmblckmdlrelease !== 'undefined' && rmblckmdlrelease < '4.3' ) {
                        M.util.set_user_preference(preferences[loop], JSON.stringify(sortable));
                    }else{
                        UserRepository.setUserPreference(preferences[loop], JSON.stringify(sortable));
                    }
                    if(sortable.length == 0)
                    {
                        $(sortables[loop]).addClass('blankheight');
                    }else{
                        $(sortables[loop]).removeClass('blankheight');
                    }

                }
            }
        }).disableSelection();
    };
    enableSortable();
});
{{/js}}
