<link href="modules/addons/xtreamuionedashboard/templates/css/radio.css" rel="stylesheet">   
<link href="modules/addons/xtreamuionedashboard/templates/css/swiftmodders.css?v=787878" rel="stylesheet">
<link href="modules/addons/xtreamuionedashboard/templates/css/mystyle.css" rel="stylesheet">  
<!-- Register -->
<div class="container"  style="width: 100%;margin-top: 40px;"> 
    {include file='modules/addons/xtreamuionedashboard/templates/nav_header.tpl'}
    <div class="sm-content-container">
        <div class="sm-content">
            <div class="sm-page-heading">
                <h1>{$pagetitle} <span style="font-family: emoji;">({$LANG.CreditsHistoryBalance}: {$totalcredits})</span></h1> 
               
                <ol class="breadcrumb">
                    <li>
                        <a href="index.php"> Portal Home
                        </a>        </li>
                    <li class="active">
                        Dashboard
                    </li>
                </ol>
            </div> 
            {if $result!=''}
                <div class="alert alert-{$result} alert-dismissable">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    {$message}
                </div>
            {/if}
            <div class="table-container clearfix">

                <table id="tableCreditsList"  class="table table-list hidden">
                    <thead>
                        <tr>
                            <th>{$LANG.CreditsHistoryDate}</th>
                            <th>{$LANG.CreditsHistoryDescription}</th>
                            <th>{$LANG.CreditsHistoryAmount}</th>
                        </tr>
                    </thead><tbody>
                        {foreach $creditDetails as $list}
                            <tr>
                                <td>{$list.date}</td>
                                <td>{$list.description}</td>
                                <td>{$list.amount}</td> 
                            </tr>
                        {/foreach} 
                    </tbody>
                </table>
                <div class="text-center" id="tableLoading">
                    <p><i class="fa fa-spinner fa-spin"></i> {$LANG.loading}</p>
                </div>
            </div> 	
        </div>
    </div> 
</div>   

<script type="text/javascript">
    jQuery(document).ready(function ()
    {
        var table = jQuery('#tableCreditsList').removeClass('hidden').DataTable();
        table.draw();
        jQuery('#tableLoading').addClass('hidden');
    });
</script>  