<div data-options="dxView : { name: 'ProductUsage', title: 'ProductUsage' } ">
    <div data-options="dxContent : { targetPlaceholder: 'content' } " class="dx-content-background">

        <!-- ko if: selectedTabIndex() == 0 -->
        <div data-bind="with: $root.productsVM">
            <div class="sh-color-products largeScreenSize sh-fluent-shadow-bottom" data-bind="dxToolbar: { items: [
                { location: 'before', options: { icon: 'ms-Icon ms-Icon--waffle', onClick: MyPen.patientNavMenu.menuButtonClick }, widget: 'dxButton' },
                { location: 'before', text: 'Products' },
                { location: 'before', text: ' ' },
                { location: 'before', options: { icon: 'fal fa-plus', text: 'Add', onClick: function (e) { Add(e); } }, widget: 'dxButton' },
                { location: 'before', visible: selectedFilterTab() === 0, disabled: products().length === 0, options: { text: 'Edit', onClick: function (e) { Edit(e) } }, widget: 'dxButton' },
                { location: 'before', visible: selectedFilterTab() === 0, disabled: products().length === 0, options: { text: 'Delete', onClick: function (e) { sh.Utils().shDeletePopover.show(e.event.target, Delete, Globalize.formatMessage('productDeleteWarning') ) } }, widget: 'dxButton' },
                { location: 'before', visible: selectedFilterTab() === 0, disabled: products().length === 0, options: { icon: 'refresh', text: 'Replace Product', onClick: function (e) { ReplaceProduct(e) } }, widget: 'dxButton' },
                { location: 'before', visible: selectedFilterTab() === 0, disabled: products().length === 0, options: { icon: 'fal fa-archive', text: 'Mark as No Longer Required', onClick: MarkAsNoLongerRequired }, widget: 'dxButton' },
                { location: 'before', disabled: products().length === 0, options: { icon: 'fal fa-chart-bar', text: 'Report', onClick: GetProductHistory }, widget: 'dxButton' },
                 { location: 'before', widget: 'dxDropDownMenu',  options: {
                        buttonIcon: 'ms-Icon ms-Icon--ellipsis',
                        items: [ 
                                {  icon: 'fal fa-sticky-note', text: 'Notes', onClick: function (e) { MyPen.NotesPopup.Load(MyPen.app.openPatients.selectedPatient(), selectedProduct().productUsageId(), MyPen.NotesPopup.noteTypes.Product) },
                                    disabled: products().length === 0 },
                                { icon: 'fal fa-print', visible: selectedFilterTab() === 0, text: 'Prescription Request Letter', onClick: printPrescriptionRequestClick }
                               ]
                  }}
            ] }"></div>

            <div class="sh-color-products smallScreenSize sh-fluent-shadow-bottom" data-bind="dxToolbar: { items: [
                { location: 'before', options: { icon: 'ms-Icon ms-Icon--waffle', onClick: MyPen.patientNavMenu.menuButtonClick }, widget: 'dxButton' },
                { location: 'before', text: 'Products' },
                { location: 'before', text: ' ' },
                { location: 'before', options: { icon: 'fal fa-plus', text: 'Add', onClick: function (e) { Add(e); } }, widget: 'dxButton' },
                { location: 'before', visible: selectedFilterTab() === 0, disabled: products().length === 0, options: { text: 'Edit', onClick: function (e) { Edit(e) } }, widget: 'dxButton' },
                { location: 'before', visible: selectedFilterTab() === 0, disabled: products().length === 0, options: { text: 'Delete', onClick: function (e) { sh.Utils().shDeletePopover.show(e.event.target, Delete, Globalize.formatMessage('productDeleteWarning') ) } }, widget: 'dxButton' },                               
                { location: 'before', disabled: products().length === 0, options: { icon: 'fal fa-chart-bar', text: 'Report', onClick: GetProductHistory }, widget: 'dxButton' },
                { location: 'before', widget: 'dxDropDownMenu',  options: {
                        buttonIcon: 'ms-Icon ms-Icon--ellipsis',
                        items: [ { icon: 'fal fa-sync', text: 'Replace Product', onClick: function (e) { ReplaceProduct(e) },
                                    disabled: products().length === 0 },
                                { visible: selectedFilterTab() === 0, disabled: products().length === 0, icon: 'fal fa-archive', text: 'Mark as No Longer Required', onClick: MarkAsNoLongerRequired },
                                { icon: 'fal fa-sticky-note', text: 'Notes', onClick: function (e) { MyPen.NotesPopup.Load(MyPen.app.openPatients.selectedPatient(), selectedProduct().productUsageId(), MyPen.NotesPopup.noteTypes.Product) },
                                    disabled: products().length === 0 },
                                { icon: 'fal fa-print', visible: selectedFilterTab() === 0, text: 'Prescription Request', onClick: printPrescriptionRequestClick }
                               ]
                  }}
            ] }"></div>
        </div>  
        <!-- /ko -->

        <!-- ko if: selectedTabIndex() == 1 -->
        <div data-bind="with: $root.deliveriesVM">
            <div class="sh-color-products sh-fluent-shadow-bottom" data-bind="dxToolbar: { items: [
               { location: 'before', options: { icon: 'ms-Icon ms-Icon--waffle', onClick: MyPen.patientNavMenu.menuButtonClick }, widget: 'dxButton' },
               { location: 'before', text: 'Products' },
               { location: 'before', text: ' ' },
               { location: 'before', options: { icon: 'fal fa-pencil', text: 'Edit', onClick: editButtonClick }, widget: 'dxButton' }
            ] }"></div>
        </div>
        <!-- /ko -->

        <!-- ko if: selectedTabIndex() == 2 -->
        <div data-bind="with: $root.ordersVM">
            <div class="sh-color-products sh-fluent-shadow-bottom" data-bind="dxToolbar: { items: [
            { location: 'before', options: { icon: 'ms-Icon ms-Icon--waffle', onClick: MyPen.patientNavMenu.menuButtonClick }, widget: 'dxButton' },
            { location: 'before', text: 'Products' },
            { location: 'before', text: ' ' },
            { location: 'before', visible: isOrderPopupButtonVisible, disabled: selectedOrders().length === 0, options: { icon: 'cart', text: 'Order', onClick:  ShowOrderPopup }, widget: 'dxButton' }            
        ] }"></div>
        </div>
        <!-- /ko -->

        <div style="position: absolute; top: 60px; bottom: 0; left: 10px; right: 0px; overflow: hidden;"
             data-bind="dxTabPanel: { items: tabItems, onSelectionChanged: selectionChanged, selectedIndex: selectedTabIndex, animationEnabled: true }">

            <div data-options="dxTemplate : { name: 'Products' } ">
                <div style="height: 100%;" data-options="dxViewPlaceholder: { viewName: 'Products' }" data-bind="with: $parent.productsVM"></div>
            </div>

            <div data-options="dxTemplate : { name: 'Deliveries' } ">
                <div style="height: 100%;" data-options="dxViewPlaceholder: { viewName: 'Deliveries' }" data-bind="with: $parent.deliveriesVM"></div>
            </div>

            <div data-options="dxTemplate : { name: 'Orders' } ">
                <div style="height: 100%;" data-options="dxViewPlaceholder: { viewName: 'Orders' }" data-bind="with: $parent.ordersVM"></div>
            </div>
        </div>

        <!--ko if: selectedTabIndex() == 0-->
        <div style="position: absolute; bottom: 0; left: 0px; right: 0px; height: 40px; overflow: hidden;">
            <div class="sh-color-products shTabsOptions" style="position: absolute; left: 0; bottom: 0;" data-bind="dxTabs: {
            items: productsVM.filterTabs,
            selectedIndex: productsVM.selectedFilterTab,
            onSelectionChanged: productsVM.selectedFilterTabChanged
        }"></div>
        </div>        
        <!-- /ko -->

    </div>
</div>