<% if (config.gitalk) { %>
<div class="col-xs-12 padding-0">
    <div id="gitalk-container">
        <div class="gt-container text-center" style="margin-top: 50px;">
            <button class="gt-btn gt-btn-public"><span class="gt-btn-text">去 Github 评论</span></button>
        </div>
    </div>
    <div id="gitalk-related"></div>
</div>
<%- css('css/gitalk.css') %>
<%- js('js/gitalk.min.js') %>
<script>
    window.addEventListener('load', function () {
        function renderCommentUrl(data) {
            var url = (data[window.location.pathname] || {}).url
            url && getDom('#gitalk-container button').addEventListener('click', function (e) { window.open(url)})
            url || (getDom('#gitalk-container').style.display = 'none')
        }
        const gitalk = new Gitalk({
            clientID: '<%- config.gitalk.client_id %>',
            clientSecret: '<%- config.gitalk.client_secret %>',
            accessToken: '<%- config.gitalk.accessToken %>',
            repo: '<%- config.gitalk.repo %>',
            owner: '<%- config.gitalk.owner %>',
            admin: ['<%- config.gitalk.owner %>'],
            id: window.location.pathname,
            distractionFreeMode: false
        });
        fetch("https://api.github.com/user").then(function(resp){
            gitalk.render('gitalk-container');
        }).catch(function(e){
            fetch('/tool/issues.json').then(function (r) { return r.json() }).then(renderCommentUrl).catch(function (e) { })
        })
        getDom('#gitalk-container').addEventListener('click', function (e) {
            e && e.stopPropagation && e.stopPropagation();
        });
    })
</script>
<script>
    window.addEventListener('load', function () {
        function render(comments) {
            var template = '<a href="${comment.url}?utm_source=gitalk" class="dis-item-url"><h3 class="dis-item-title">${comment.title}</h3>' +
                '<p class="dis-item-des">${comment.count} 评论 ● ${comment.date}</p>' +
                '<div class="dis-item-content"><img class="dis-item-img" src="${comment.icon}" alt="icon"><p><b><span class="dis-item-user">${comment.user}</span></b>&nbsp;——&nbsp;${comment.body}</p></div>' +
                '</a>'

            var wrapper = getDom('#gitalk-related');
            comments = shuffle(comments);
            comments.slice(0, 4).forEach(function (c) {
                var div = document.createElement('div');
                div.classList.add('dis-item');
                div.innerHTML = template.replace("${comment.url}", c.url)
                    .replace("${comment.title}", c.title)
                    .replace("${comment.count}", c.count)
                    .replace("${comment.date}", c.date)
                    .replace("${comment.icon}", c.icon)
                    .replace("${comment.user}", c.user)
                    .replace("${comment.body}", c.body)
                wrapper.appendChild(div)
            })
            var p = document.createElement('p')
            p.innerHTML = '<a href="https://geektutu.com/post/blog-experience-7.html">Gitalk Plus</a>';
            p.classList.add('dis-divide');
            wrapper.appendChild(p);
            wrapper.classList.add('dis-wrapper')
        }
        function shuffle(a) {
            for (var i = a.length - 1; i > 0; i--) {
                var j = Math.floor(Math.random() * (i + 1));
                [a[i], a[j]] = [a[j], a[i]];
            }
            return a;
        }
        fetch('/tool/comments.json').then(function (r) { return r.json() }).then(render).catch(function (e) { })
    })
</script>
<% } %>