{if $productsAlert}
<div class="alert alert-info" id="productLimitAlert">
{l s='Showing %d of %d products, search for more using search input.' mod='x13categoryassign' sprintf=[$nodes|@count, $nbProducts]}
</div>
{/if}
<div class="alert alert-info" id="productLimitAfterSearchAlert" style="display: none;">
{l s='We found more than 5000 products, try to be more precise while filtering.' mod='x13categoryassign'}
</div>
<div class="scroll-table-box">
    <table id="{$input_name}" class="table scroll table-bordered">
        <thead>
        <tr>
            <th>
                <input type="checkbox" name="checkme_{$input_name}" id="checkme_{$input_name}" />
                <label for="checkme_{$input_name}">{l s='Select all' mod='x13categoryassign'}</label>
            </th>
            <th></th>
            <th>
                <span class="pull-right {if version_compare($smarty.const._PS_VERSION_, '1.6', '>=')}tree-panel-heading-controls{/if} clearfix">
                    {if isset($actions)}
                        {foreach from=$actions item=action}
                            <a href="{$action.link}"{if isset($action.action)} onclick="{$action.action}"{/if}{if isset($action.id)} id="{$action.id|escape:'html':'UTF-8'}"{/if} class="button btn btn-default">
                                {if isset($action.icon_class)}<i class="{$action.icon_class}"></i>{/if}
                                {$action.label}
                            </a>
                        {/foreach}
                    {/if}

                    {if isset($search) && $search}
                        <span class="pull-right">
                            <input style="min-width: 190px;" type="text" id="{$input_name}_search" name="{$input_name}_search" data-inputname="{$input_name}" class="search-field" placeholder="{l s='type and enter to search' mod='x13categoryassign'}" />
                        </span>

                        <script type="text/javascript">
                            $(document).ready(function()
                            {
                                $(document).on('click', '#{$input_name}_container .product_row', function (e) {
                                    $(this).parents('tr').appendTo('#{$input_name}_selected');
                                });
                                $(document).on('click', '#{$input_name}_selected .product_row', function (e) {
                                    $(this).parents('tr').prependTo('#{$input_name}_container');
                                });

                                $('#{$input_name}_search').on( "keydown", function(event) { 
                                    if(event.which === 13) {
                                        $('#productLimitAlert').hide();
                                        event.preventDefault();
                                        event.stopPropagation();
                                        
                                        var self = $(this);
                                        $.ajax({
                                            url: currentIndex + '&configure=x13categoryassign&token=' + x13massupdate_token,
                                            type: 'post',
                                            data: {
                                                ajax: true,
                                                treeSearch: true,
                                                ids: x13getTreeChecked(),
                                                found: x13getFoundProducts('#{$input_name}_container'),
                                                q: self.val()
                                            },
                                            dataType: 'json',
                                            success: function(data)
                                            {
                                                $('.alert, .alert-danger, .alert-success').hide();

                                                if (data.result) {
                                                    self.parents('table').find('#{$input_name}_container').replaceWith(data.content);
                                                    x13lazyload();
                                                }

                                                if (data.alert) {
                                                    $('#productLimitAfterSearchAlert').show();
                                                } else {
                                                    $('#productLimitAfterSearchAlert').hide();
                                                }
                                            }
                                        });
                                    }
                                });
                            });
                        </script>
                    {/if}
                </span>
            </th>
        </tr>
        </thead>
        {include file="./tree-list.tpl"}
    </table>
    <input type="hidden" id="{$input_name}_checked" name="{$input_name}_checked" value="">
</div>
<div class="row">
<h4>{l s='Selected products' mod='x13categoryassign'}</h4>
    <div style="max-height: 200px; overflow: auto;">
        <table class="table table-bordered">
            <tbody id="{$input_name}_selected"></tbody>
        </table>
    </div> 
</div>