<section class="drawer">
    <header class="clickme">
        <div class="detailTitle">
            <div class="col-xs-2" data-bind="click:function(){ $root.getDesks(); $root.Navigation('TablesBeforeAddition')}">
                <img src="~/Upload/icon/search_left2.png" style=" max-width: 40px;" />
            </div>
            <div data-bind="click:function(){return $root.Direction(!$root.Direction())}" class="col-xs-8 inline">
                <span class="inline" data-bind="fadeSwitcher:$root.cartItems().length > 0 ? $root.TotalCountOfCartItems()+ ' Adet ürün eklendi.' : ''"> </span>
                <img style="max-height: 10px;margin-left: 10px;margin-bottom: 5px;"
                     data-bind="visible:$root.cartItems().length > 0,attr:{'src':$root.Direction() == false ? icons.arrowUpWhite : icons.arrowDownWhite}" />
            </div>
            <!--ko if: $root.cartItems().length> 0-->
            <div class="col-xs-2">
                <img src="~/Upload/icon/done_beyaz.png" style="height: 40px;" data-bind="click:$root.openCart" />
            </div>
            <!--/ko-->
        </div>
        <div class="productDetailFooter">
            <!--ko foreach:$root.sortedCartItems-->
            <div class="row" data-bind="visible:$root.Direction()">
                <div class="detail-content">
                    <div class="col-xs-9">
                        <div style="font-size:15px;" data-bind="text:$data.Name"></div>
                    </div>
                    <div class="col-xs-1">
                        <div style="font-size:15px;" data-bind="text:$data.Quantity"></div>
                    </div>
                    <div class="col-xs-2">
                        <img style="max-height:25px;" src="~/Upload/icon/close_kare.png" data-bind="click:function(){ return $data.Quantity && $data.Quantity() > 1 ?  $data.Quantity($data.Quantity() -1 ) : $root.cartItems.splice($index(), 1)  }" />
                    </div>
                </div>
            </div>
            <!--/ko-->
        </div>
    </header>
</section>
