<% if(theme.remark42.host && theme.remark42.site_id){ %>
  <div id="remark42"></div>
  <script type="text/javascript">
    var schema = document.documentElement.getAttribute('data-user-color-scheme');
    if (schema !== 'light' && schema !== 'dark') {
      schema = 'light';
    }
    var remark_config = {
      host: '<%= theme.remark42.host %>',
      site_id: '<%= theme.remark42.site_id %>',
      components: ['embed'],
      url: '<%= url_for(page.path) %>',
      max_shown_comments: '<%= theme.remark42.max_shown_comments %>',
      theme: schema,
      page_title: '<%= page.title %>',
      locale: '<%= theme.remark42.locale %>'
    };

    Fluid.utils.waitElementVisible('remark42', function() {
      (function (c) {
        for (var i = 0; i < c.length; i++) {
          var d = document, s = d.createElement('script');
          s.src = remark_config.host + '/web/' + c[i] + '.js';
          s.defer = true;
          (d.head || d.body).appendChild(s);
        }
      })(remark_config.components || ['embed']);
    });
  </script>
  <noscript>Please enable JavaScript to view the comments</noscript>
<% } %>
