{block name="content"}


    <div class="row">

        <div class="col-md-3 ib_profile_width">
            {$menu}
        </div>

        <div class="col-md-9">


            <div class="ibox float-e-margins animated fadeIn">
                <div class="ibox-title">
                    <h3>Customers</h3>
                </div>
                <div class="ibox-content">


                    <a href="{$_url}wcsuite/app/sync-customers" class="btn btn-primary">Sync customers</a>

                    <div class="hr-line-dashed"></div>

                    <div class="text-center" id="clxLoader">
                        <div class="md-preloader"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="32" width="32" viewbox="0 0 75 75"><circle cx="37.5" cy="37.5" r="33.5" stroke-width="6"/></svg></div>
                    </div>

                    <div id="clxContent">

                    </div>



                </div>
            </div>



        </div>

    </div>
{/block}

{block name="script"}

    <script src="{$app_url}ui/lib/numeric.js"></script>
    <script src="{$app_url}ui/lib/footable/js/footable.all.min.js"></script>

    <script>
        $(function () {

            var $clxLoader = $('#clxLoader');
            var $clxContent = $('#clxContent');

            axios.get('{$_url}wcsuite/app/x_customers').then(function (response) {
                $clxLoader.hide();
                $clxContent.html(response.data);
                $('.footable').footable();

                $('.amount').autoNumeric('init', {


                    dGroup: {$config['thousand_separator_placement']},
                    aPad: {$config['currency_decimal_digits']},
                    pSign: '{$config['currency_symbol_position']}',
                    aDec: '{$config['dec_point']}',
                    aSep: '{$config['thousands_sep']}',
                    vMax: '9999999999999999.00',
                    vMin: '-9999999999999999.00'

                });

            }).catch(function (reason) {
                console.log(reason);
            })

        })
    </script>

{/block}