<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>${metadata.alias!}</title>
    <style type="text/css">
        .right{float:right;}
        .gray{color:gray;}
        .border{border:1px solid gray;}
        .underline{border-bottom:1px dashed gray;}
        .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>
        <#macro message code>${springMacroRequestContext.getMessage(code)}</#macro>
    <@trade.paymentList userId=user.id pageIndex=pageIndex pageSize=10>
        <h3>Orders</h3>
        <ul>
        <#list page.list as a>
            <li class="underline">
                <p><@message 'page.status.payment.'+a.status/><span class="right">${a.createDate!}</span></p>
                <p class="gray"><label>Amount</label>${a.amount!} <label>Account type:</label>${a.accountType!}</p>
                <p>${a.description!}<span class="right"><label>Trade type:</label>${a.tradeType!}</span></p>                
                <#if 0=a.status>
                    <p>
                        <a href="${site.dynamicPath}tradePayment/pay?paymentId=${a.id}&returnUrl=https:${(site.dynamicPath+'paymentList.html')?url}">Continue to pay</a> 
                        <a href="${site.dynamicPath}tradePayment/cancel?paymentId=${a.id}&returnUrl=https:${(site.dynamicPath+'paymentList.html')?url}&_csrf=<@tools.csrfToken/>">Cancel payment</a>
                    </p>
                <#elseif 1=a.status>
                    <form action="${site.dynamicPath}tradePayment/refund" method="POST">
                        <p>
                            <input type="hidden" name="_csrf" value="<@tools.csrfToken/>"/>
                            <input type="hidden" name="returnUrl" value="${site.dynamicPath}paymentList.html"/>
                            <input type="hidden" name="paymentId" value="${a.id}"/>
                            <label>Amount:</label><input type="text" name="amount" required="required" value="${a.amount}" max="${a.amount}"/>
                            <label>Reason:</label><input type="text" name="reason" required="required"/>
                            <input type="submit" value="Apply refund"/>
                        </p>
                    </form>
                </#if>                
            </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('paymentList.html',page.prePage,'pageIndex')}">Previous page</a></li>
            <#if start gt 1>
                <li class="page-item"><a class="page-link" href="${'paymentList.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('paymentList.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('paymentList.html',page.totalPage,'pageIndex')}">${page.totalPage}</a></li>
            </#if>
            <li class="page-item"><a class="page-link" href="${getPage('paymentList.html',page.nextPage,'pageIndex')}">Next page</a></li>
        </div>
    </@trade.paymentList>
    </main>
    <footer>
        Copyright &copy; ${.now?string('yyyy')}
    </footer>
    <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>