<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>${metadata.alias!}</title>
    <style type="text/css">
        .right{float:right;}
        .pagination{list-style:none;}
        .pagination:after{content:"";display:block;clear:both;}
        .pagination .page-item{padding:0 0.3rem;float:left;}
        .pagination .page-item .page-link{margin-left:0;border-radius:0.2rem;padding:0.375rem 0.875rem;color:#999;border-color:#eee;}
        .page-item.active .page-link{background-color:#4C81E7;border-color:#eee;color:#FFF;}
    </style>
</head>
<body>
    <header data-diy="page">
        <h1>${(site.name)!}</h1>
    </header>
    <nav data-diy="category">
        <a href="${site.dynamicPath}">Home</a>
<@cms.categoryList>
    <#list page.list as a>
        <a href="${a.url!}" target="_blank" data-diy-item="${a.id}">${a.name}</a>
    </#list>
</@cms.categoryList>
    </nav>
    <main>
    <@trade.account id=user.id>
        <h3 data-diy="user" data-diy-id="${user.id}">My account</h3>
        <p><label>Amount:</label>${object.amount}<span class="right"><label>Last update:</label>${object.updateDate!}</span></p>
        <form action="${site.dynamicPath}tradeAccount/recharge" method="post">
            <input type="hidden" name="_csrf" value="<@tools.csrfToken/>"/>
            <input type="hidden" name="returnUrl" value="${site.dynamicPath}account.html"/>
            <p><label>Recharge amount:</label><input type="text" name="change" min="0.01" required="required"/></p>
            <p>Use <label><input type="radio" name="accountType" value="alipay"/>Alipay</label><label><input type="radio" name="accountType" value="wechat"/>Wechat</label></p>
            <p><input type="submit" value="Submit"/></p>
        </form>
    </@trade.account>
    <#macro message code>${springMacroRequestContext.getMessage(code)}</#macro>
    <#macro merge name value><#if !.vars[name]??><@"<#assign ${name}=''>"?interpret /></#if><#if value?has_content><@"<#assign ${name}=${name}+'${value},'>"?interpret /></#if></#macro>
    <@trade.accountHistoryList accountId=user.id pageIndex=pageIndex pageSize=10>
        <h3>My account history</h3>
        <ul>
        <#list page.list as a>
            <@merge 'userIds' a.userId!/>
        </#list>
        <@sys.user ids=userIds!><#assign userMap=map!/></@sys.user>
        <#list page.list as a>
            <li class="underline">
                <p><@message 'page.status.accountHistory.'+a.status/><span class="right">${a.createDate!} <label>Operator:</label>${(userMap[a.userId?string].nickname)!}</span></p>
                <p class="gray"><label>Serial number:</label>${a.serialNumber!} <label>Amount:</label>${a.amount!} <label>Change:</label>${a.amountChange!} <label>Balance:</label>${a.balance!} </p>
                <p>${a.description!}<span class="right"><label>Replay:</label>${a.reply!}</span></p>
            </li>
        </#list>
        </ul>
        <ul class="pagination">
            <#assign
                start=1
                end=page.totalPage
            />
            <#if (page.pageIndex-5) gt start>
                <#assign start=page.pageIndex-4/>
            </#if>
            <#if (page.pageIndex+5) lt end>
                <#assign end=page.pageIndex+4/>
            </#if>
            <li class="page-item"><a class="page-link" href="${getPage('account.html',page.prePage,'pageIndex')}">Previous page</a></li>
            <#if start gt 1>
                <li class="page-item"><a class="page-link" href="${'account.html'}">1</a></li>
                <li class="page-item"><span class="page-link">...</span></li>
            </#if>
            <#list start..end as n>
                <li class="page-item<#if n=page.pageIndex> active</#if>"><a class="page-link" href="${getPage('account.html',n,'pageIndex')}">${n}</a></li>
            </#list>
            <#if end lt page.totalPage>
                <li class="page-item"><span class="page-link">...</span></li>
                <li class="page-item"><a class="page-link" href="${getPage('account.html',page.totalPage,'pageIndex')}">${page.totalPage}</a></li>
            </#if>
            <li class="page-item"><a class="page-link" href="${getPage('account.html',page.nextPage,'pageIndex')}">Next page</a></li>
        </ul>
    </@trade.accountHistoryList>
    </main>
    <footer>
        Copyright &copy; ${.now?string('yyyy')}
    </footer>
    <script src="${site.dynamicPath!}resource/plugins/jquery/jquery.min.js"></script>
    <script>
    var itemString="itemType=user&itemId=${user.id}";
    var templatePath='${.current_template_name?keep_after('/')}';
    </script>
    <script src="${site.dynamicPath}resource/js/cms.support.js"></script>
    <script>
        var ca = cmsAnalytics();
        var url='${site.dynamicPath}api/visit/record';
        if("string" ==typeof itemString){
            url=url+"?"+itemString;
        }
        ca.setDomain('${site.sitePath?keep_after('//')?keep_before('/')?keep_before(':')}');
        ca.setPath('/');
        ca.report(url);
    </script>
</body>
</html>