<div>
    <div class="section" >
        <div class="tim-container margin-bottom-55" data-bind="visible:$root.searchView() == false">
            <!--ko foreach:$root.data-->
            <div class="row" data-bind="attr:{'id':'menu'+ ($index() + 1)}" >
                <div class="followMeBar">
                    <div class="followTitleBg">
                        <span data-bind="text:$data.Name"></span>
                    </div>
                </div>
                <div class="tim-row">

                    <!--ko foreach:$data.Products-->
                    <div class="row">
                        <div class="panel-group" data-bind="attr:{id: 'accordion' + $index()}">

                            <div class="panel panel-default">
                                <div class="panel-heading mobileHeading">
                                    <h4 style="padding:0px; margin:0px;">
                                        <div class="col-xs-12 col-sm-12 col-md-12 mobilenopadding">
                                            <div class="col-xs-1 col-sm-1 col-md-1 mobilenopadding">
                                                <!--ko if:$data && $data.Details-->
                                                <!--ko if:($data.Details.Description && $data.Details.Description()) || ($data.Details.ImgPath &&  $data.Details.ImgPath())-->
                                                <i class="material-icons" data-bind="click:$root.showDetail">info</i>
                                                <!--/ko-->
                                                <!--ko if:!(($data.Details.Description && $data.Details.Description()) || ($data.Details.ImgPath &&  $data.Details.ImgPath()))-->
                                                <i class="material-icons" data-bind="click:$root.EditDetail">mode_edit</i>
                                                <!--/ko-->
                                                <!--/ko-->
                                            </div>
                                            <div class="col-xs-8 col-sm-8 col-md-8 productNameCss okCollapse" 
                                                 data-bind="html:$data.Name,attr:{'data-target':'#collapse'+$parentContext.$index() +$index(),'aria-controls':'#collapse'+$parentContext.$index() +$index(),'aria-expanded':$data.Collapse(),'href':'#collapse'+$parentContext.$index() +$index(),'data-toggle': 'collapse' ,'data-parent':'#accordion'+$index()},click:function(){ return $data.Collapse(!$data.Collapse())}"></div>
                                            <div class="col-xs-3 col-sm-3 col-md-3 nopadding" data-bind="visible:!$data.Collapse()">
                                                <i data-bind="click:$root.addToBasket.bind($root,$data,$index(),$parentContext.$index())" class="material-icons">add_circle_outline</i>
                                            </div>
                                        </div>
                                    </h4>
                                </div>
                                <div data-bind="attr:{'id':'collapse'+$parentContext.$index() +$index()},'data-parent':'accordion' + $index()" class="panel-collapse collapse">
                                    <div class="panel-body mobileHeading">
                                        <!--<div class="row">
                                            <div class="col-xs-1 nopadding">
                                                <i class="material-icons" data-bind="click:function(){ return $data.Quantity && $data.Quantity() > 1 ?  $data.Quantity($data.Quantity() -1 ) : false }">remove_circle_outline</i>
                                            </div>
                                            <div class="col-xs-3 nopadding text-center">
                                                <label class="Text" data-bind="text:$data.Price()"></label>
                                                <label class="text">X</label>
                                                <label class="Text" data-bind="text:$data.Quantity && $data.Quantity()"></label>
                                                <label class="text">=</label>
                                                <label class="Text" data-bind="text:$data.DisplayPrice && $data.DisplayPrice()"></label>
                                            </div>
                                            <div class="col-xs-1 nopadding">
                                                <i class="material-icons" data-bind="click:function(){ return $data.Quantity($data.Quantity() + 1)}">add_circle_outline</i>
                                            </div>
                                        </div>-->
                                        <!--ko foreach:$data.Extras-->
                                        <div class="col-xs-12 col-sm-12 col-md-12 mobilenopadding">
                                            <div class="col-xs-1 col-sm-1 col-md-1 mobilenopadding">
                                                <i data-bind="click:function(){
                                                       $data.isOk(false) &&
                                                       $data.ExtraCount && $data.ExtraCount() &#62; -1
                                                        ? $data.ExtraCount && $data.ExtraCount($data.ExtraCount() - 1)
                                                        : null
                                                    }" class="material-icons">clear</i>
                                            </div>
                                            <div class="col-xs-7 col-sm-7 col-md-7 productNameCss" data-bind="html:$data.Name,css:$data.ExtraCount&& $data.ExtraCount() == 1 ? 'ok': ($data.ExtraCount && $data.ExtraCount() == -1 ? 'nok' : '')"></div>
                                            <!-- extracount >= 1 return null--><!---->
                                            <div class="col-xs-3 col-sm-3 col-md-3 nopadding">
                                                <i data-bind="click:function(){
                                                        $data.isOk(true) &&
                                                        $data.ExtraCount() &#62;&#61; 1
                                                       ? false : $data.ExtraCount($data.ExtraCount() + 1)
                                                       }" class="material-icons">done</i>
                                            </div>
                                        </div>
                                        <!--/ko-->
                                        <div class="row">
                                            <div class="col-xs-9 col-sm-9 col-md-9">
                                                <input  type="text" data-bind="value:$data.Query,textInput: $data.Query, returnAction:$root.AddExtra" class="form-control orangeTextbox"/>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-xs-9 col-sm-9 col-md-9">
                                                <div class="col-xs-5 col-sm-5 col-md-5 nopadding">
                                                    <button data-bind="click:$root.AfterAdd" style="margin:0px" class="btn btn-primary btn-block btn-sm">Ürüne ekle</button>
                                                </div>
                                                <div class="col-xs-2 col-sm-2 col-md-2">&#32;</div>
                                                <div class="col-xs-5 col-sm-5 col-md-5 nopadding">
                                                    <button data-bind="click:$root.addToBasket.bind($root,$data,$index(),$parentContext.$index())" style="margin:0px" class="btn btn-primary btn-block btn-sm">Adisyona ekle</button>
                                                </div>
                                            </div>
                                            <div class="col-xs-2 col-sm-2 col-md-2">
                                                &#32;
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/ko-->
                </div>

            </div>
            <!--/ko-->
        </div>
        <div class="tim-container margin-bottom-55" data-bind="visible:$root.searchView() == true">
            <!--ko foreach:$root.SearchingList-->
            <div data-bind="attr:{'id':'menu'+ ($index() + 1)}" class="tim-row" style="min-height:auto !important;">
                <div class="row">
                    <div class="followMeBar">
                        <div class="followTitleBg">
                            <span data-bind="text:$data.Name"></span>
                        </div>
                    </div>
                </div>
                <!--ko foreach:$data.Products-->
                <div class="row">
                    <div class="panel-group" data-bind="attr:{id: 'accordion-search' + $index()}">

                        <div class="panel panel-default">
                            <div class="panel-heading mobileHeading">
                                <h4 style="padding:0px; margin:0px;">
                                    <div class="col-xs-12 col-sm-12 col-md-12 mobilenopadding">
                                        <div class="col-xs-1 col-sm-1 col-md-1 mobilenopadding">
                                            <!--ko if:$data && $data.Details-->
                                            <!--ko if:($data.Details.Description && $data.Details.Description()) || ($data.Details.ImgPath &&  $data.Details.ImgPath())-->
                                            <i class="material-icons" data-bind="click:$root.showDetail">info</i>
                                            <!--/ko-->
                                            <!--ko if:!(($data.Details.Description && $data.Details.Description()) || ($data.Details.ImgPath &&  $data.Details.ImgPath()))-->
                                            <i class="material-icons" data-bind="click:$root.EditDetail">mode_edit</i>
                                            <!--/ko-->
                                            <!--/ko-->
                                        </div>
                                        <div class="col-xs-8 col-sm-8 col-md-8 productNameCss okCollapse"
                                             data-bind="html:$data.Name,attr:{'data-target':'#collapse-search'+$parentContext.$index() +$index(),'aria-controls':'#collapse-search'+$parentContext.$index() +$index(),'aria-expanded':$data.Collapse(),'href':'#collapse-search'+$parentContext.$index() +$index(),'data-toggle': 'collapse' ,'data-parent':'#accordion'+$index()},click:function(){ return $data.Collapse(!$data.Collapse())}"></div>
                                        <div class="col-xs-3 col-sm-3 col-md-3 nopadding" data-bind="visible:!$data.Collapse()">
                                            <i data-bind="click:$root.addToBasket.bind($root,$data,$index(),$parentContext.$index())" class="material-icons">add_circle_outline</i>
                                        </div>
                                    </div>
                                </h4>
                            </div>
                            <div data-bind="attr:{'id':'collapse-search'+$parentContext.$index() +$index()},'data-parent':'accordion-search' + $index()" class="panel-collapse collapse">
                                <div class="panel-body mobileHeading">
                                    <!--ko foreach:$data.Extras-->
                                    <div class="col-xs-12 col-sm-12 col-md-12 mobilenopadding">
                                        <div class="col-xs-1 col-sm-1 col-md-1 mobilenopadding">
                                            <i data-bind="click:function(){
                                                       $data.isOk(false) &&
                                                       $data.ExtraCount && $data.ExtraCount() &#62; -1
                                                        ? $data.ExtraCount && $data.ExtraCount($data.ExtraCount() - 1)
                                                        : null
                                                    }" class="material-icons">clear</i>
                                        </div>
                                        <div class="col-xs-7 col-sm-7 col-md-7 productNameCss" data-bind="html:$data.Name,css:$data.ExtraCount&& $data.ExtraCount() == 1 ? 'ok': ($data.ExtraCount && $data.ExtraCount() == -1 ? 'nok' : '')"></div>
                                        <!-- extracount >= 1 return null--><!---->
                                        <div class="col-xs-3 col-sm-3 col-md-3 nopadding">
                                            <i data-bind="click:function(){
                                                        $data.isOk(true) &&
                                                        $data.ExtraCount() &#62;&#61; 1
                                                       ? false : $data.ExtraCount($data.ExtraCount() + 1)
                                                       }" class="material-icons">done</i>
                                        </div>
                                    </div>
                                    <!--/ko-->
                                    <div class="row">
                                        <div class="col-xs-9 col-sm-9 col-md-9">
                                            <input type="text" data-bind="value:$data.Query,textInput: $data.Query, returnAction:$root.AddExtra" class="form-control orangeTextbox" />
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-9 col-sm-9 col-md-9">
                                            <div class="col-xs-5 col-sm-5 col-md-5 nopadding">
                                                <button data-bind="click:$root.AfterAdd" style="margin:0px" class="btn btn-primary btn-block btn-sm">Ürüne ekle</button>
                                            </div>
                                            <div class="col-xs-2 col-sm-2 col-md-2">&#32;</div>
                                            <div class="col-xs-5 col-sm-5 col-md-5 nopadding">
                                                <button data-bind="click:$root.addToBasket.bind($root,$data,$index(),$parentContext.$index())" style="margin:0px" class="btn btn-primary btn-block btn-sm">Adisyona ekle</button>
                                            </div>
                                        </div>
                                        <div class="col-xs-2 col-sm-2 col-md-2">
                                            &#32;
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/ko-->
            </div>
            <!--/ko-->
        </div>
      
    </div>
</div>
