<div class="row productLine">
    <div class="col-xs-1 col-sm-1 col-md-1 flex">
        <img style="max-width: 20px;" data-bind="attr:{'src':!$data.Collapse() ? icons.arrowRight :icons.arrowRight },
                                                 click:function(){$data.Collapse(!$data.Collapse())},
                                                 style:{
                                                 'max-height':$data.Collapse() ? '15px' : '20px',
                                                 'margin-left':$data.Collapse() ? '-5px' : ''}" />
    </div>
    <div class="col-xs-11 col-sm-11 col-md-11 flex">
        <div class="col-xs-9 col-sm-10 col-md-10 nopadding" data-bind="click:function(){$data.Collapse(!$data.Collapse())},text:$data.SADI"></div>
        <div class="col-xs-3 col-sm-2 col-md-2 text-center">
            <img src="~/Upload/icon/plus_circle.png" style="max-height: 25px;" data-bind="click:$root.addToBasket.bind($root,$data,$index(),$parentContext.$index())" />
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 extrasDiv" data-bind="visible:$data.Collapse">
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-1"></div>
            <div class="col-xs-10 col-sm-10 col-md-10">
                <div class="col-xs-11 col-sm-10 col-md-10 nopadding">
                    <p style="margin-bottom:0; margin-top:0px" title="Ürünün kim tarafından talep edildiğinin göstergesidir. ">Kişi No</p>
                    <div class="col-xs-4 col-sm-4 col-md-4 padding-0" data-bind="click:$root.DownAccNo">
                        <button type="button" class="btn btn-default btn-block extraAddBtn">
                            <img style="max-height:20px" src="~/Upload/icon/minus_circle_black.png" />
                        </button>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 padding-0">
                        <button type="button" class="btn btn-default btn-block extraAddBtn accNoText" data-bind="fadeSwitcher:$data.AccNo"></button>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 padding-0" data-bind="click:$root.UpAccNo">
                        <button type="button" class="btn btn-default btn-block extraAddBtn">
                            <img style="max-height:20px" src="~/Upload/icon/plus_circle.png" />
                        </button>
                    </div>
                </div>
                <div class="col-xs-3 col-sm-2 col-md-2"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-1">
            </div>
            <div class="col-xs-10 col-sm-10 col-md-10">
                <div class="col-xs-11 col-sm-10 col-md-10 nopadding">
                    <p style="margin-bottom:0; margin-top:0px">Ek istek</p>
                    <div class="col-xs-10 col-sm-8 col-md-8 padding-0">
                        <input type="text" data-bind="value:$data.Query,textInput: $data.Query, returnAction:$root.AddExtra" class="form-control defaultTextbox" />
                    </div>
                    <div class="col-xs-2 col-sm-4 col-md-4 padding-0">
                        <button type="button" data-bind="click:$root.AfterAdd" class="btn btn-default extraAddBtn btn-block">Ekle</button>
                    </div>
                </div>
                <div class="col-xs-3 col-sm-2 col-md-2"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-1">
            </div>
            <div class="col-xs-10 col-sm-10 col-md-10">
                <div class="col-xs-11 col-sm-10 col-md-10 nopadding">
                    <!--ko foreach:$data.Extras-->
                    <div class="col-xs-2 col-sm-4 col-md-4 padding-0"
                         data-bind="click:function(){
                                                            $root.RemoveAfterExtra($parent,$data,$index())
                                                             }">
                        <button type="button"
                                class="btn btn-default extraAddBtn btn-block">
                            Sil
                        </button>
                    </div>
                    <div class="col-xs-8 col-sm-4 col-md-8 padding-0 extraText"
                         data-bind="fadeSwitcher:$data.Name,
                                                                 css:$data.ExtraCount&& $data.ExtraCount() == 1 ? 'ok': ($data.ExtraCount && $data.ExtraCount() == -1 ? 'nok' : '')"></div>
                    <div class="col-xs-2 col-sm-4 col-md-4 padding-0">
                        <button type="button" data-bind="click:function(){$data.ExtraCount(1)}"
                                class="btn btn-default extraAddBtn btn-block">
                            Ekle
                        </button>
                    </div>
                    <!--/ko-->
                </div>
                <div class="col-xs-3 col-sm-2 col-md-2"></div>
            </div>
        </div>

    </div>
</div>
