<!--ko foreach:SortBy($root.CartItems(),$root.SortKey(),$root.SortType())-->
<div class="col-xs-12 col-sm-12 col-md-12">
    <div class="col-xs-12 col-sm-12 col-md-12 line" data-bind="css: $root.MenuColums">
        <div class="row">

            <div class="col-xs-2 col-sm-1 col-md-1 item-img-div right-collapse-div">
                <img class="itemImg" data-bind="attr:{'src':  $data.Details && $data.Details().ImgPath  || '/Upload/empty_img.png' }" />
            </div>
            <div class="col-xs-9 col-sm-10 col-md-10 item menu-border" data-bind="click:$root.OnCollapse,css: $data.collapse() ? 'border-bottom-2' : ''">
                <div class="col-xs-9 col-sm-10 col-md-10 content" data-bind="html:$data.SADI"></div>
                <div class="col-xs-3 col-sm-2 col-md-2 " data-bind="css:$root.ExtrasPrice($data.Extras()) == 0 ? 'content' : 'padding-0'">
                    <div class="content" data-bind="text:$data.DisplayPrice() + '.00 ' + $data.D()"></div>
                    <!--ko if:  $root.ExtrasPrice($data.Extras()) !== 0-->
                    <div class="content extrasprice" data-bind="text:'+ ' + $root.ExtrasPrice($data.Extras()) + '.00 TL'"></div>
                    <!--/ko-->
                </div>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 item right-collapse-div" data-bind="click:$root.OnCollapse">
                <img class="collapse-icon" data-bind="attr:{'src': $data.collapse() ? icons.minus_black : icons.plus_black}" />
            </div>
        </div>
        <div class="row" data-bind="fadeVisible:$data.collapse()">
            <div class="col-xs-2 col-sm-1 col-md-1 item-img-div" style="text-align: center;">
            </div>
            <div class="col-xs-9 col-sm-10 col-md-10 item menu-border">
                <div class="col-xs-12 col-sm-12 col-md-12 margin-top-10 margin-bottom-10">
                    <div class="col-xs-4 col-sm-4 col-md-4 padding-0" data-bind="click:$root.Down.bind(null,$data,$index())">
                        <button type="button" class="btn btn-default btn-block extraAddBtn">
                            <img style="max-height:20px" data-bind="attr:{src:icons.minus_black}">
                        </button>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 padding-0" data-bind="click:">
                        <button type="button" class="btn btn-default btn-block extraAddBtn" data-bind="fadeSwitcher:$data.Quantity"></button>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 padding-0" data-bind="click:$root.Up">
                        <button type="button" class="btn btn-default btn-block extraAddBtn">
                            <img style="max-height:20px" data-bind="attr:{src:icons.plus_black}">
                        </button>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <button type="button" class="btn btn-default btn-block" data-bind="click:function(){$root.CartItems.splice($index(),1)}">Sil</button>
                </div>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 item padding-left-right-5"></div>
        </div>
    </div>
</div>
<!--/ko-->