<%
const { enable: pjax_enable } = theme?.pjax || {}
const {
  server: artalk_server_url,
  options: artalk_options = {}
} = theme?.comment?.artalk || {}
const artalk_language = config?.language === 'en' ? 'en-US' : 'zh-CN'
const artalk_css = `${artalk_server_url}/dist/Artalk.css`
const artalk_js = `${artalk_server_url}/dist/Artalk.js`
%>
<% if(artalk_server_url) { %>
    <div class="artalk-comment-container">
        <link rel="stylesheet" href="<%= artalk_css %>" />
        <div id="artalk-comment"></div>
        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
                src="<%= artalk_js %>"
                async
                onerror="window.KeepCommentPlugin.loadFailHandle()"
        ></script>
        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
                async
                onerror="window.KeepCommentPlugin.loadFailHandle()"
        >
          if (!window.KeepCommentPlugin?.initArtalkTheme) {
            window.KeepCommentPlugin.initArtalkTheme = () => {
              return document.documentElement.classList.contains('dark-mode')
            }
          }

          if (!window.KeepCommentPlugin?.changeArtalkTheme) {
            window.KeepCommentPlugin.changeArtalkTheme = () => {
              Artalk && Artalk.setDarkMode(window.KeepCommentPlugin.initArtalkTheme())
            }
          }

          window.KeepCommentPlugin.artalkOptions = JSON.parse('<%= JSON.stringify(artalk_options) %>'.replace(/&#34;/g, '"'))
          window.KeepCommentPlugin.artalkOptions.el = '#artalk-comment'
          window.KeepCommentPlugin.artalkOptions.server = '<%= artalk_server_url %>'
          window.KeepCommentPlugin.artalkOptions.locale = '<%= artalk_language %>'
          window.KeepCommentPlugin.artalkOptions.site = '<%= theme?.base_info?.title %>' || '<%= config?.title %>'
          window.KeepCommentPlugin.artalkOptions.darkMode = window.KeepCommentPlugin.initArtalkTheme()
          window.KeepCommentPlugin.artalkOptions.countEl = '.post-comments-count'

          window.KeepCommentPlugin.initArtalk = () => {
            if (window?.Artalk) {
              Artalk.init(window.KeepCommentPlugin.artalkOptions)
              window.KeepCommentPlugin.hideLoading()

              const toggleThemeBtn = document.querySelector('.tool-toggle-theme-mode')
              toggleThemeBtn && toggleThemeBtn.addEventListener('click', () => {
                window.KeepCommentPlugin.changeArtalkTheme()
              })

            } else {
              setTimeout(() => {
                window.KeepCommentPlugin.initArtalk()
              }, 1000)
            }
          }

          if ('<%= pjax_enable %>' === 'true') {
            setTimeout(() => {
              window.KeepCommentPlugin.initArtalk()
            }, 1200)
          } else {
            window.addEventListener('DOMContentLoaded', window.KeepCommentPlugin.initArtalk)
          }
        </script>
    </div>
<% } else { %>
    <%- partial('../config-error', { comment_plugin: 'Artalk' }) %>
<% } %>
