Mini Kabibi Habibi

<div data-options="dxView : { name: 'ProductCategory', title: 'Product Category' } " >
    
    <div class="product-category" data-options="dxContent : { targetPlaceholder: 'content' } " >
        <div class="row dx-clearfix">

            <div class="col span_5">
                <h2 data-bind="text: title"></h2>
                <!-- ko if: brandsLoaded -->
                <div data-bind="dxList: { dataSource: brands, scrollingEnabled: false, itemClickAction: itemClick }">
                    <div data-options="dxTemplate : { name: 'item' } " >
                        <div class="brands-list-item dx-clearfix" data-bind="css: { 'brands-list-item-selected' : selected }">
                            <div class="brands-list-item-image">
                                <img data-bind="attr: { 'src': imageSrc }" />
                            </div>
                            <div class="brands-list-item-models-count"><span data-bind="text: productCount"></span> Models</div>
                        </div>
                    </div>
                </div>
                <!-- /ko -->
                <!-- ko ifnot: brandsLoaded -->
                <div class="preloader"></div>
                <!-- /ko -->
            </div>

            <div class="col span_11">
                
                <!-- ko if: productsLoaded -->
                
                <!-- ko with: product -->
                <h2 data-bind="text: Brand.Name"></h2>
                <!-- /ko -->
                <div class="dx-clearfix product-description-block">
                    <!-- ko with: product -->
                    <div class="product-image-wrapper">
                        <img data-bind="attr: { 'src': $data.__metadata.media_src, 'class': 't' + $data.Type.Id }" />
                    </div>
                    <div class="product-params-container">
                        <h3 class="product-description" data-bind="text: $data.Name"></h3>
                        <div class="product-params" data-bind="foreach: $data.Description">
                            <div>
                                <span data-bind="text: title"></span>
                                <span data-bind="text: value"></span>
                            </div>
                        </div>
                        <h2 data-bind="text: $data.formatPrice"></h2>
                    </div>
                    <div class="button-container">
                        <div data-bind="dxButton: { text: $root.toggleInCartText, clickAction: $root.toggleInCart }, css: { 'button-selected': $root.inCart }"></div>
                    </div>
                    <!-- /ko -->
                </div>
                <div data-bind="dxGallery: { showIndicator: false, showNavButtons: showNavButtonInGallery, userInteraction: userInteractionInGallery, dataSource: products, itemClickAction: $root.selectProduct}">
                    <div data-options="dxTemplate : { name: 'item' } " >
                        <div class="item-wrapper">
                            <img data-bind="attr: { 'src': __metadata.media_src, 'class': 't' + $data.Type.Id  }" />
                        </div>
                        <div class="dx-clearfix">
                            <div class="dx-font-xs product-name" data-bind="text: Name"></div>
                            <div class="dx-font-xs product-price" data-bind="text: formatPrice"></div>
                        </div>
                    </div>
                </div>
                <!-- /ko -->
                <!-- ko ifnot: productsLoaded -->
                <div class="preloader"></div>
                <!-- /ko -->
            </div>

        </div>
    </div>
</div>