<!--ko if: $root.Navigation() == screens.tablesAfterCart-->
<div class="" data-bind="style:{ height:$root.BodyHeight(),'padding-bottom':'150px','overflow':'scroll'}">
    <div class="col-xs-12 col-sm-12 col-md-12 nopadding" style="background: #e8e8e8;">
        <div class="col-xs-3 col-sm-3 col-md-3">
            <button class="btn btn-danger btn-block filterBtn" data-bind="click:function(){ $root.tableFilter('dolu')}">Dolu</button>
        </div>
        <div  class="col-xs-3 col-sm-3 col-md-3">
            <button class="btn availBtn btn-block filterBtn" style="color: #3f3e3e;" data-bind="click:function(){ $root.tableFilter('bos')}">Boş</button>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3">
            <button class="btn btn-info btn-block filterBtn" data-bind="click:function(){ $root.NewMasaEnabled(!$root.NewMasaEnabled())}"><span data-bind="text:$root.NewMasaEnabled() ? 'iptal' :'Yeni'"></span></button>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3" >
            <button class="btn btn-warning btn-block filterBtn" data-bind="click:function(){ $root.tableFilter('hepsi'); $root.RefreshTables()}">Yenile</button>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 masaEkleTitle" data-bind="visible:$root.NewMasaEnabled">
        <input type="text" data-bind="value:$root.NewMasa" class="form-control defaultTextbox" />
        <button type="button" class="btn btn-block" data-bind="visible:$root.AppConfig().Sezlong == '1',click:function(){$root.AddNewChildProp(!$root.AddNewChildProp())},css:$root.AddNewChildProp() ? 'btn-warning' : 'btn-default'">Sezlonglu</button>
        <button class="btn btn-info btn-block filterBtn" data-bind="click:$root.AddNewTable">Ekle</button>
    </div>
    <!--ko foreach:{ data: $root.FilteredTables, as: 'item'} -->
    <div class="col-xs-6 col-sm-3 col-md-2">
        <div style="padding:2px" data-bind="css: $root.AppConfig().Sezlong == '1' && !item.SEZLONG ? (item.MASANO ==$root.DeskNoForCart() ? 'col-xs-9 col-sm-9 col-md-9' : 'col-xs-12 col-sm-12 col-md-12') : 'col-xs-12 col-sm-12 col-md-12',click:function(){ $root.SetTableNo(item || {},'DeskNoForCart')}">
            <button class="btn btn-block desklist-btn" style="text-overflow:ellipsis; overflow:hidden;" data-bind="css:(item.MASANO ==$root.DeskNoForCart() || $root.NewTransfer() == item.MASANO ? 'btn-warning': (item.DOLU ? 'dolumasa' : 'availBtn'))">
                <!--ko if:item.SEZLONG-->
                <img src="~/Upload/icon/umbrella_round.png" style="max-height:18px" />
                <!--/ko-->
                <span data-bind="text:item.MASANO"></span>
            </button>
        </div>
        <!--ko if:item.MASANO == $root.DeskNoForCart() && $root.AppConfig().Sezlong == '1' && !item.SEZLONG-->
        <div class="col-xs-3 col-sm-3 col-md-3" style="padding:2px" data-bind="click:function(){ $data.AfterSezlong(!$data.AfterSezlong())}">
            <button class="btn btn-block desklist-btn" data-bind="css:$data.AfterSezlong() ? 'btn-warning' : '' " style="text-overflow:ellipsis; overflow:hidden;padding-left: 0px;padding-right: 0px;">
                <img src="~/Upload/icon/umbrella_round.png" style="max-height:18px" />
                <!--/ko-->
            </button>
        </div>
        <!--/ko-->
    </div>
    <!--/ko-->
</div>
<nav class="navbar navbar-default navbar-fixed-bottom bottom-heigth navbarFooter" role="navigation">
    <div class="row">
            <button type="button" class="btn btn-danger btn-block btnHeight letter-spacing-2" data-bind="click:function(){$root.AuthorityCheck($root.DeskNoForCart())}">Siparişi Gönder</button>
    </div>
</nav>
<!--/ko-->
<!--ko if: $root.Navigation() != screens.tablesAfterCart-->
<div class="" data-bind="style:{'overflow':'scroll', 'padding-bottom':'150px'}">
    <div class="col-xs-12 col-sm-12 col-md-12 nopadding" style="background: #e8e8e8;">
        <div class="" data-bind="css:$data.UseNewTable ? 'col-xs-3 col-sm-3 col-md-3' : 'col-xs-4 col-sm-4 col-md-4' ">
            <button class="btn btn-danger btn-block filterBtn" data-bind="click:function(){ $root.tableFilter('dolu')}">Dolu</button>
        </div>
        <div class="" data-bind="css:$data.UseNewTable ? 'col-xs-3 col-sm-3 col-md-3' : 'col-xs-4 col-sm-4 col-md-4'">
            <button class="btn availBtn btn-block filterBtn" style="color: #3f3e3e;" data-bind="click:function(){ $root.tableFilter('bos')}">Boş</button>
        </div>
        <div class="" data-bind="css:$data.UseNewTable ?'col-xs-3 col-sm-3 col-md-3' : 'col-xs-4 col-sm-4 col-md-4' ">
            <button class="btn btn-warning btn-block filterBtn" data-bind="click:function(){ $root.tableFilter('hepsi'); $root.RefreshTables()}">Yenile</button>
        </div>
    </div>
    <!--ko foreach:{ data: $root.FilteredTables, as: 'item'} -->
    <div class="col-xs-6 col-sm-3 col-md-2" data-bind="click:function(){ $root.SetTableNo(item || {},'DeskNo')}">
        <button class="btn btn-block desklist-btn" style="text-overflow:ellipsis; overflow:hidden;" data-bind="css:   (item.MASANO == $root.DeskNo() || $root.NewTransfer() == item.MASANO ? 'btn-warning': (item.DOLU ? 'dolumasa' : 'availBtn'))">
            <!--ko if:item.SEZLONG-->
            <img src="../../../Upload/icon/umbrella_round.png" style="max-height:18px" />
            <!--/ko-->
            <span data-bind="text:item.MASANO"></span>
        </button>
    </div>
    <!--/ko-->
</div>
<nav class="navbar navbar-default navbar-fixed-bottom bottom-heigth navbarFooter" role="navigation">
    <div class="row">
        <!--ko if:!$root.UseTransfer()-->
        <div class=" pl2 pr2" data-bind="css:$root.user().RoleObject().Transfer ? 'col-xs-6 col-sm-6 col-md-6' : 'col-xs-12 col-sm-12 col-md-12'">
            <button type="button"
                    style="font-size: 15px!important;white-space: unset;text-overflow: clip;overflow: hidden;"
                    class="btn btn-danger btn-block btnHeight letter-spacing-2"
                    data-bind="click:function(){$root.AdisyonGor();} ,text:'Adisyonu Göster'"></button>
        </div>
        <!--/ko-->
        <!--ko if:$root.user().RoleObject().Transfer-->
        <!--ko if:$root.UseTransfer()-->
        <div class="col-xs-6 col-sm-6 col-md-6 pl2 pr2" data-bind="visible:$root.user().RoleObject().Transfer">
            <button type="button"
                    style="font-size: 15px!important;white-space: unset;text-overflow: clip;overflow: hidden;"
                    class="btn btn-danger btn-block btnHeight letter-spacing-2"
                    data-bind="click:function(){$root.CancelTransfer()} ,text:'Vazgeç'"></button>
        </div>
        <!--/ko-->
        <!--ko if:$root.UseTransfer()-->
        <div class="col-xs-6 col-sm-6 col-md-6 pr2 pl2" data-bind="visible:$root.user().RoleObject().Transfer">
            <button type="button"
                    style="font-size: 15px!important;white-space: unset;text-overflow: clip;overflow: hidden;"
                    class="btn btn-danger btn-block btnHeight letter-spacing-2"
                    data-bind="click:function(){$root.Transfer();} ,text:'Transferi Tamamla'"></button>
        </div>
        <!--/ko-->
        <!--ko if:!$root.UseTransfer()-->
        <div class="col-xs-6 col-sm-6 col-md-6 pr2 pl2" data-bind="visible:$root.user().RoleObject().Transfer">
            <button type="button"
                    style="font-size: 15px!important;white-space: unset;text-overflow: clip;overflow: hidden;"
                    class="btn btn-danger btn-block btnHeight letter-spacing-2"
                    data-bind="click:function(){$root.TransferEnabled();} ,text:'Masa transferi'"></button>
        </div>
        <!--/ko-->
        <!--/ko-->
    </div>
</nav>
<!--/ko-->