<afx-app-window apptitle="Docify" width="700" height="500" data-id="Docify">
    <afx-hbox padding="5">
        <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>
            <div data-height="35" style="text-align: right;">
                <afx-button data-id="bt-add-doc"  text = "" iconclass = "fa fa-plus-circle"></afx-button>
                <afx-button data-id="bt-del-doc"  text = "" iconclass = "fa fa-minus-circle"></afx-button>
                <afx-button data-id="bt-edit-doc"  text = "" iconclass = "fa fa-pencil-square-o"></afx-button>
                <afx-button data-id="bt-upload-doc"  text = "" iconclass = "bi bi-cloud-upload"></afx-button>
            </div>
        </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="35" >
                <afx-button text="" iconclass="bi bi-arrow-up-right-square" data-id="btopen" ></afx-button>
                <afx-button text="" iconclass="bi bi-cloud-arrow-down" data-id="btdld" ></afx-button>
                <afx-button text="" iconclass = "bi bi-printer" data-id="btprint" ></afx-button>
            </div>
        </afx-vbox>
    </afx-hbox>
</afx-app-window>