<section class="drawer">
    <header class="clickme">
        <div class="detailTitle">
            <!--<div class="col-xs-2" data-bind="click:function(){return $root.isShowViewOrClose(!$root.isShowViewOrClose())}">-->      
            <!--<div class="col-xs-2" data-bind="click:function(){return $root.newSettingsTemp(!$root.newSettingsTemp())}">-->
            <div class="col-xs-2" data-bind="click:$root.Next.bind($root,'container','dinner-table-2')">
                <i class="material-icons footerIcon">pageview</i>
            </div>
            <di style="margin-top: 10px;" data-bind="click:function(){return $root.Direction(!$root.Direction())}" class="col-xs-8 inline">
                <!--<span  class="inline" data-bind="fadeSwitcher:$root.lastItemOfCartItems"> </span>-->
                <span class="inline" data-bind="fadeSwitcher:$root.cartItems().length > 0 ? $root.TotalCountOfCartItems()+ ' Adet ürün eklendi.' : ''"> </span>

                <i class="material-icons" data-bind="visible:$root.cartItems().length > 0,text:$root.Direction() == true ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"></i>
            </div>
            <!--ko if: $root.cartItems().length> 0-->
            <div class="col-xs-2" >
                <!--<i data-bind="click:$root.openModal" class="material-icons footerIcon">input</i>-->
                <i data-bind="click:$root.openCart" class="material-icons footerIcon">input</i>
            </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-7">
                        <div data-bind="text:$data.Name"></div>
                    </div>
                    <div class="col-xs-1">
                        <div data-bind="text:$data.Quantity"></div>
                    </div>
                    <div class="col-xs-2">
                        <i data-bind="click:function(){ return $data.Quantity && $data.Quantity() > 1 ?  $data.Quantity($data.Quantity() -1 ) : $root.cartItems.splice($index(), 1)  }" class="material-icons">clear</i>
                    </div>
                </div>
            </div>
            <!--/ko-->
        </div>
    </header>
</section>