Mini Kabibi Habibi

<div class="split-layout" data-options="dxLayout : { name: 'split', controller: 'split' } " >
    <div class="layout-header" data-options="dxContentPlaceholder : { name: 'header' } " >
        <div class="header-toolbar" data-bind="dxToolbar: { items: [{ text: title, align: 'center' }] }"
            data-options="dxCommandContainer : { locations: [{'name':'previousPage','showText':false,'align':'left'}] } " >
        </div>
    </div>

    <div class="left-content">
        
    </div>

    <div class="right-content">
        <div class="content" data-options="dxContentPlaceholder : { name: 'content', transition: 'none' } " >
            <div class="load-panel" data-bind="dxLoadPanel: { visible: true, shading: false, targetContainer: false }"></div>
        </div>
    </div>

    <div class="dx-app-bar" data-options="dxContentPlaceholder : { name: 'footer', transition: 'none' } " >
        <div class="footer-toolbar" data-bind="dxToolbar: { }"
            data-options="dxCommandContainer : { locations: [
                {'name':'create', 'align':'left'},
                {'name':'cancel', 'align':'right'},
                {'name':'edit', 'align':'right'},
                {'name':'save', 'align':'right'},
                {'name':'delete', 'align':'right'}] } " >
        </div>
    </div>

</div>