Mini Kabibi Habibi

<div data-options="dxView : { name: 'OrderItems', title: 'Order' } " >

  <div data-bind="dxCommand: { action: handleBack, title: 'Orders', location: 'back', behavior: 'back', type: 'back' }"></div>  
  <div data-bind="dxCommand: { action: completeOrder, title: 'Complete', location: 'save' }"></div>

    <div class="order-items" data-options="dxContent : { targetPlaceholder: 'content' } " >
        <div id="popup" data-bind="dxPopup: { title: 'Complete order' }">
            <!-- ko if: orderCompleted -->
            <h3>'Order Completed' notification has been sent to <span data-bind="text: customerEmail"></span>!</h3>
            <!-- /ko -->
            <!-- ko ifnot: orderCompleted -->
            <h3>Order is not completed!</h3>
            <!-- /ko -->
            <div class="hide-popup">
                <div data-bind="dxButton: { text: 'Close', clickAction: hidePopup }"></div>
            </div>
        </div>
        <div class="order-info-container">
            
            <div class="order-info">
                <div data-bind="attr: { 'class': orderStateCssClass }">
                    <div class="list-item-image-placeholder image">
                        <img height="55" data-bind="attr: { 'src': customerImageSrc }" />
                    </div>
                    <div class="very-important list-item-content">
                        <div data-bind="text: customerName"></div>
                        <div data-bind="text: orderStateDesc"></div>
                    </div>
                </div>
            </div>

            <div data-bind="dxList: { dataSource: orderItems, pullRefreshEnabled: true }">
                <div data-bind="dxAction: '#ProductDetails/{id}'" data-options="dxTemplate : { name: 'item' } " >
                    <div data-bind="attr: { 'class': $data.cssClass }">
                        <div class="list-item-image-placeholder image">
                            <img data-bind="attr: { 'src': $data.image, 'class': imageClass }" />
                        </div>
                        <div class="list-item-content">
                            <!-- ko if: $data.quantity -->
                                <p class="set-left"><span data-bind="text: quantity"></span> set left</p>
                            <!-- /ko -->
                            <span data-bind="text: name"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>