Mini Kabibi Habibi

<div data-options="dxView : { name: 'Lists', title: 'Lists' } " >
    <div data-options="dxContent : { targetPlaceholder: 'content' } " >
        <div id="tabs" data-bind="dxTabs: { items: tabs, selectedIndex: selectedTab }"></div>
        <!-- ko if: tabContent().customTemplate -->
        <!-- ko if: tabContent().showSearchField -->
        <div class="search-wrapper">
            <div data-bind="dxTextBox: { placeholder: 'Search', mode: 'search', value: tabContent().searchQuery, valueUpdateEvent: 'keyup' } "></div>
        </div>
        <!-- /ko -->
        <div class="list-indentation">
            <div data-bind="dxList: { items: tabContent().items, grouped: tabContent().grouped }">
                <div data-options="dxTemplate : { name: 'item' } " >
                    <div>
                        <div class="product-image-box">
                            <img data-bind="attr: { src: $data.Image, alt: $data.Name }" />
                        </div>
                        <div>
                            <div data-bind="text: $data.Name" class="product-name"></div>
                            <div class="product-price"><strong data-bind="text: Globalize.format($data.Price, 'c2')"></strong></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /ko -->
        <!-- ko ifnot: tabContent().customTemplate -->
        <div class="list-indentation">
            <div data-bind="dxList: { items: tabContent().items, grouped: tabContent().grouped }"></div>
        </div>
        <!-- /ko -->
    </div>
</div>