<script type="module">
  import { init } from '<%- theme.comments.waline.js %>';

  
  function initWaline() {
    const el = document.getElementById('waline_container');
    if (!el) return;

    function load_waline() {
      utils.css('<%- url_for('/css/comments/waline.css') %>?v=<%- stellar_info('version') %>');
      utils.css('<%- theme.comments.waline.css %>');
      utils.css('<%- theme.comments.waline.meta_css %>');

      const path = el.getAttribute('comment_id') ?? decodeURI(window.location.pathname);
      const waline = init(Object.assign(<%- JSON.stringify(theme.comments.waline) %>, {
        el: '#waline_container',
        path: path,
        <% if(!!theme.comments.waline.imageUploader?.api){ %>
          imageUploader: function(file) {
            const headers = new Headers();
            headers.set('Accept', 'application/json');
            <% if(!!theme.comments.waline.imageUploader?.token) { %>
              headers.set('<%= theme.comments.waline.imageUploader?.tokenName %>', '<%= theme.comments.waline.imageUploader?.token %>')
            <% } %>
            const formData = new FormData();
            formData.append('<%= theme.comments.waline.imageUploader?.fileName %>', file);
            return fetch('<%= theme.comments.waline.imageUploader?.api %>',{
              method: 'POST',
              body: formData,
              headers: headers
              }).then((resp) => resp.json())
                .then((resp) => resp.<%= theme.comments.waline.imageUploader?.resp %>)
          },
        <% } %>
      }));
    }
    
    util.viewportLazyload(el, load_waline);
  }
  
  // Initialize on page load
  initWaline();
</script>
