<%
page.layout = "talk"
%>
<article class="page">
    <div id="post-meta-m">
            <h3><%= theme.talk.title %></h3>
    </div>
    <div class="article-m" style="margin-top: 10px;">
        <% if (theme.talk.type == "HPP" && theme.talk.HPP.domain) { %>
        <div id="talkPage"></div>
        <script src="<%= theme.static_prefix.hpp %>talk_user.js"></script>
        <script defer>
        new hpp_talk({
            id:"talkPage",
            domain: "<%= theme.talk.HPP.domain %>",
            limit: <%= theme.talk.HPP.limit %>,
            start: <%= theme.talk.HPP.start %>,
            themecss: "<%= theme.static_prefix.hpp %>talk.css"
        });
        </script>
        <% } %>
        <% if (theme.talk.type == "Artitalk" && theme.talk.Artitalk.appId && theme.talk.Artitalk.appKey) { %>
        <div id="artitalk_main"></div>
        <script src="<%= theme.static_prefix.artitalk %>"></script>
        <script defer>
            new Artitalk({
                appId: '<%= theme.talk.Artitalk.appId %>', 
                appKey: '<%= theme.talk.Artitalk.appKey %>',
                serverURL: '<%= theme.talk.Artitalk.serverURL %>',
                lang: '<%= theme.talk.Artitalk.lang %>',
                pageSize: <%= theme.talk.Artitalk.pageSize %>,
                shuoPla: '<%= theme.talk.Artitalk.shuoPla %>',
                avatarPla: '<%= theme.talk.Artitalk.avatarPla %>',
                motion: <%= theme.talk.Artitalk.motion %>,
                bgImg: "<%= theme.talk.Artitalk.bgImg %>"
            })
        </script>
        <% } %>
        <% if (theme.talk.type == "Detalk" && theme.talk.Detalk.config.url) { %>
        <div id="detalk">
            <div style="width: 100%; text-align: center; display: flex; justify-content: center; align-items: center;">
                <svg width="30px" height="30px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><g><animateTransform attributeName="transform" type="rotate" values="0 33 33;270 33 33" begin="0s" dur="1.4s" fill="freeze" repeatCount="indefinite"></animateTransform>
                    <circle fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30" stroke-dasharray="187" stroke-dashoffset="610"><animate attributeName="stroke" values="#4285F4;#DE3E35;#F7C223;#1B9A59;#4285F4" begin="0s" dur="5.6s" fill="freeze" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="rotate" values="0 33 33;135 33 33;450 33 33" begin="0s" dur="1.4s" fill="freeze" repeatCount="indefinite"></animateTransform><animate attributeName="stroke-dashoffset" values="187;46.75;187" begin="0s" dur="1.4s" fill="freeze" repeatCount="indefinite"></animate>
                </circle></g></svg>
            </div>
        </div>
        <script src="<%- theme.static_prefix.detalk %>detalk.js"></script>
        <script>
            let cfg = <%- JSON.stringify(theme.talk.Detalk.config) %>;
            detalk.init({
                ...cfg,
                path: '@TALK'
            });
        </script>
        <% } %>
    </div>
</article>