<afx-app-window apptitle="Docify" width="700" height="500" data-id="Docify">
    <afx-hbox >
        <div data-width="5"></div>
        <afx-vbox data-width="150">
            <afx-label class="header" iconclass = "fa fa-bars" text="__(Categories)" data-height="22"></afx-label>
            <afx-list-view  data-id="catview"></afx-list-view>
            <div data-height="5"></div>
        </afx-vbox>
        <afx-resizer data-width="4"></afx-resizer>
        <afx-vbox data-width = "300">
            <afx-label class="header" iconclass = "fa fa-bars" text="__(Documents)" data-height="22"></afx-label>
            <afx-list-view data-id="docview"></afx-list-view>
            <afx-hbox data-height="30">
                <div data-width="5"></div>
                <afx-button data-id="bt-add-doc" data-width = "25" text = "" iconclass = "fa fa-plus-circle"></afx-button>
                <afx-button data-id="bt-del-doc" data-width = "25" text = "" iconclass = "fa fa-minus-circle"></afx-button>
                <afx-button data-id="bt-edit-doc" data-width = "25" text = "" iconclass = "fa fa-pencil-square-o"></afx-button>
            </afx-hbox>
        </afx-vbox>
        <afx-resizer data-width="4"></afx-resizer>
        <afx-vbox>
            <div data-id = "preview-container">
                <canvas data-id="preview-canvas"></canvas>
            </div>
            <afx-grid-view data-id="docgrid"></afx-grid-view>
            <div style="text-align: right;" data-height="30" >
                <afx-button text="__(Open)" data-id="btopen" ></afx-button>
                <afx-button text="__(Download)" data-id="btdld" ></afx-button>
                <afx-button text="__(Print on server)" data-id="btprint" ></afx-button>
            </div>
        </afx-vbox>
    </afx-hbox>
</afx-app-window>