<!--ko if:$root.SelectedSingleProduct()-->
<div class="col-xs-12 col-sm-12 col-md-12" id="singleProduct">
    <div class="col-xs-12 col-sm-12 col-md-12 item-card" style="padding-bottom:5px">
        <div class="item-container">
            <div class="row">
                <img id="singleProductImg" data-bind="attr:{'src':$root.SelectedSingleProduct().Details.ImgPath() || '/Upload/empty_img.png' }" />
            </div>
            <div class="row">
                <div class="col-xs-9 col-sm-9 col-md-10 productName productNameDetail">
                    <h5 data-bind="html:$root.SelectedSingleProduct().SADI"></h5>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-2 price" style="padding:0px !important">
                    <strong data-bind="fadeSwitcher:$root.SelectedSingleProduct().DisplayPrice()+ '.00' + ' '+ $root.SelectedSingleProduct().D()"></strong>
                </div>
            </div>

            <div class="row">
                <span data-bind="html:$root.SelectedSingleProduct().Details.Description"></span>
            </div>
            <div class="row left-icon-mini">
                <div class="col-xs-4 col-sm-4 col-md-4">
                    <div class="detail-icon">
                        <img class="caloriImg" src="~/Upload/icon/caloric-energy.png" />
                        <span class="calori" data-bind="text:$root.SelectedSingleProduct().Details.Calori"></span>
                    </div>
                    <div class="detail-icon">
                        <img height="30" src="~/Upload/icon/favorite_border_black.png" />
                        <span class="calori">30</span>
                    </div>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8">
                    <div class="row">
                        <div class="col-xs-4 col-sm-4 col-md-4 padding-0" data-bind="click:$root.Down.bind($root,$root.SelectedSingleProduct())">
                            <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 btn-group-center " data-bind="fadeSwitcher:$root.SelectedSingleProduct().Quantity"></button>
                        </div>
                        <div class="col-xs-4 col-sm-4 col-md-4 padding-0" data-bind="click:$root.Up.bind($root,$root.SelectedSingleProduct())">
                            <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>
            </div>
            
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 " style="padding:10px;border: 2px solid #eee;">
            <div class="col-xs-12 col-sm-12 col-md-12 padding-0">Ek istek</div>
            <div class="col-xs-8 col-sm-8 col-md-8 padding-0">
                <input type="text" data-bind="value:$root.SelectedSingleProduct().Query,textInput: $root.SelectedSingleProduct().Query, returnAction:$root.AddExtra" class="form-control defaultTextbox">
            </div>
            <div class="col-xs-4 col-sm-4 col-md-4" style="padding-left: 5px;padding-right: 0px; margin: 0px;">
                <button type="button" data-bind="click:function(){$root.AfterAdd($root.SelectedSingleProduct())}" class="btn btn-default extraAddBtn btn-block">Ekle</button>
            </div>
                <!--ko foreach:$root.SelectedSingleProduct().Extras-->
            <div class="col-xs-12 col-sm-12 col-md-12 padding-0 centerY">
                <div class="col-xs-2 col-sm-2 col-md-2 padding-0 " data-bind="click:function(){$root.RemoveAfterExtra($root.SelectedSingleProduct(),$data,$index())}">
                    <button type="button" class="btn btn-default extraAddBtn btn-block padding-0">
                        <img style="max-height:20px" data-bind="attr:{src:icons.cancel_black}">
                    </button>
                </div>

                <div class="col-xs-6 col-sm-6 col-md-6 padding-0" style="text-align: center;" data-bind="text:$data.DisplayName(), css:$data.ExtraCount&& $data.ExtraCount() == 1 ? 'ok': ($data.ExtraCount && $data.ExtraCount() == -1 ? 'nok' : '')"></div>

                <div class="col-xs-2 col-sm-2 col-md-2 padding-0">
                    <button type="button" data-bind="click:function(){$root.minusExtra($data)}" class="btn btn-default extraAddBtn btn-block">
                        <img style="max-height:20px" data-bind="attr:{src:icons.minus_black}">
                    </button>
                </div>
                <div class="col-xs-2 col-sm-2 col-md-2 padding-0">
                    <button type="button" data-bind="click:function(){$root.plusExtra($data, $parent)}" class="btn btn-default extraAddBtn btn-block">
                        <img style="max-height:20px" data-bind="attr:{src:icons.plus_black}">
                    </button>
                </div>
            </div>
                <!--/ko-->
        </div>
    </div>
</div>
<!--/ko-->
