<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>${metadata.alias!}</title>
    <style>
        ol.vote>li {line-height: 30px;height: 30px;width:400px;margin:5px 0 0 0;max-width:95%;position: relative;}
        .progress-box {width: 100%;height: 100%;border: 1px solid #cccccc;display: inline-block;}
        .progress-bar {height:100%;opacity: 0.4;}
        .progress-text {text-align: center;position: absolute;top: 0;width: 100%;}
        .progress-text a {width: 100%;height: 100%;display: inline-block;}
        ol.vote>li:nth-child(3n+1) .progress-bar {background-color:red;}
        ol.vote>li:nth-child(3n+2) .progress-bar {background-color:green;}
        ol.vote>li:nth-child(3n) .progress-bar {background-color:blue;}
        .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>
        <h1>Vote</h1>
<@cms.voteList pageIndex=pageIndex pageSize=10>
        <ul>
    <#list page.list as a>
            <li>
                <h3>${a.title}</h3>
                <p>${a.votes!} votes,end on:${(a.endDate)!}</p>
                <p>${a.description}</p>
                <#if a.startDate lt .now && .now lt a.endDate><#assign available=true/><#else><#assign available=false/></#if>
                <#if available && user?has_content>
                    <@cms.userVote userId=user.id voteId=a.id>
                        <#assign myvote=object/>
                    </@cms.userVote>
                </#if>
                <@cms.voteItemList voteId=a.id pageSize=10>
                    <ol class="vote">
                    <#list page.list as v>
                        <li>
                            <div class="progress-box">
                                <div class="progress-bar" style="width:${(a.votes gt 0 && myvote?has_content)?then(v.votes*100/a.votes,100)}%;"></div>
                                <div class="progress-text">
                                    <#if available>
                                        <#if myvote?has_content>
                                            <#if myvote.itemId=v.id>
                                                <a href="javascript:unvote('${v.id}');" title="Cannel voting">${v.title} (${v.votes!} votes)</a>
                                            <#else>
                                                ${v.title} (${v.votes!} votes)
                                            </#if>
                                        <#else>
                                            <a href="<#if a.allowAnonymous||user?has_content>javascript:vote('${v.id}');<#else>${site.dynamicPath}login.html?returnUrl=${site.dynamicPath}vote.html?id=${a.id}</#if>" title="Vote and view">${v.title}</a>
                                        </#if>
                                    <#else>
                                        (${v.votes!} votes)
                                    </#if>
                                </div>
                            </div>
                        </li>
                    </#list>
                    </ol>
                </@cms.voteItemList>
            </li>
    </#list>
        </ul>
        <ul class="pagination">
            <#assign
                url=site.dynamicPath+'vote.html'
                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(url,page.prePage,'pageIndex')}">Previous page</a></li>
            <#if start gt 1>
                <li class="page-item"><a class="page-link" href="${url}">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(url,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(url,page.totalPage,'pageIndex')}">${page.totalPage}</a></li>
            </#if>
            <li class="page-item"><a class="page-link" href="${getPage(url,page.nextPage,'pageIndex')}">Next page</a></li>
        </ul>
</@cms.voteList>
    </main>
    <script>
    var templatePath='${.current_template_name?keep_after('/')}';
    </script>
    <#-- footer -->
    <footer>
        Copyright &copy; ${.now?string('yyyy')}
    </footer>
    <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>
    <#-- end footer -->
<#if user?has_content>
    <script>
    function vote(itemId){
        fetch('${site.dynamicPath!}vote/vote?itemId='+itemId+'&_csrf=<@tools.csrfToken/>').then(res => res.json()).then(data=>{
            alert("Vote ok!");
            location.reload();
        });
    }
    function unvote(itemId){
        fetch('${site.dynamicPath!}vote/unvote?itemId='+itemId+'&_csrf=<@tools.csrfToken/>').then(res => res.json()).then(data=>{
            alert("Cancel ok!");
            location.reload();
        });
    }
    </script>
</#if>
</body>
</html>