function buildCommentHTML(comment) {
  var depthClass = "";
  var githubIcon = "";
  var twitterIcon = "";
  var customClass = "";
  var detailsStartHTML = "";
  var detailsFinishHTML = "";
  var body = "";

  if (!comment.newly_created) {
    depthClass="child flat-node"
  } else if (comment.depth == 0 ){
    depthClass = "root";
  } else if (comment.depth < 3) {
    depthClass="child"
  } else {
    depthClass="child flat-node"
  }
  if (comment.user.twitter_username && comment.user.twitter_username.length > 0) {
    twitterIcon = '<a href="http://twitter.com/'+comment.user.twitter_username+'" rel="noopener noreferrer" target="_blank"><%= image_tag("twitter-logo.svg", class:"icon-img", alt: "twitter logo") %></a>'
  }
  if (comment.user.github_username && comment.user.github_username.length > 0) {
    githubIcon = '<a href="http://github.com/'+comment.user.github_username+'" rel="noopener noreferrer" target="_blank"><%= image_tag("github-logo.svg", class:"icon-img", alt: "github logo") %></a>'
  }
  if (comment.newly_created) {
    customClass = "comment-created-via-fetch"
  }
  if (comment.depth < 3) {
    detailsStartHTML = '<details open><summary><span>&nbsp;</span></summary>'
    detailsFinishHTML = '</details>'
  }

  body = '<style>'+comment.css+'</style>\
          '+detailsStartHTML+'\
          <div class="comment-hash-marker" id="'+comment.id_code+'"></div>\
          <div id="comment-node-'+comment.id+'" class="single-comment-node '+depthClass+' comment-deep-'+comment.depth+'" "\
          data-comment-id="'+comment.id+'" data-comment-author-id="'+comment.user.id+'" data-current-user-comment="'+comment.newly_created+'" data-content-user-id="'+comment.user.id+'">\
          <div class="inner-comment '+customClass+'">\
            <div class="details">\
              <a href="/'+comment.user.username+'">\
                <img class="profile-pic" src="'+comment.user.profile_pic+'" alt="'+comment.user.username+'">\
                <span class="comment-username"><span class="comment-username-inner">'+comment.user.name+'</span></span>\
              </a>\
                '+twitterIcon+'\
                '+githubIcon+'\
              <div class="comment-date">\
                <a href="'+comment.url+'">\
                  <time datetime="'+comment.published_timestamp+'">\
                    '+comment.readable_publish_date+'\
                  </time>\
                </a>\
              </div>\
              <button class="dropbtn">\
                <%= image_tag("overflow-horizontal.svg", class: "dropdown-icon", alt: "Toggle dropdown menu") %>\
              </button>\
              <div class="dropdown">\
                  <div class="crayons-dropdown p-1 z-30 right-1 left-1 s:right-0 s:left-auto fs-base">\
                    <a href="'+comment.url+'" class="crayons-link crayons-link--block">\
                      Permalink\
                    </a>\
                    <a href="'+comment.url+'/settings" class="crayons-link crayons-link--block">\
                      Settings\
                    </a>\
                    <a href="/report-abuse?url='+comment.url+'" class="crayons-link crayons-link--block">Report Abuse</a>\
                  </div>\
              </div>\
            </div>\
            <div class="body">\
              '+comment.body_html+'\
              '+reactions(comment)+'\
            </div>\
            '+actions(comment)+'\
          </div>\
      </div>\
      '+detailsFinishHTML;

  return body;
}

function actions(comment) {
  if (comment.newly_created) {
    return '<div class="actions" data-comment-id="'+comment.id+'" data-path="'+comment.url+'">\
              <span class="current-user-actions" style="display: '+ (comment.newly_created ? 'inline-block' : 'none') +';">\
                <a data-no-instant="" href="'+comment.url+'/delete_confirm" class="edit-butt" rel="nofollow">DELETE</a>\
                <a href="'+comment.url+'/edit" class="edit-butt" rel="nofollow">EDIT</a>\
              </span>\
                <a href="#" class="toggle-reply-form" rel="nofollow">Reply</a>\
            </div>';
  } else {
    return '<div class="actions" data-comment-id="'+comment.id+'" data-path="'+comment.url+'" data-commentable-id="'+comment.commentable.id+'">\
                <a href="'+comment.url+'" rel="nofollow">VIEW/REPLY</a>\
            </div>';
  }
}

function reactions(comment) {
  if (comment.newly_created) {
    return '<button class="reaction-button reacted" id="button-for-comment-'+comment.id+'" data-comment-id="'+comment.id+'">\
              <img src="<%= asset_path("favorite-heart-outline-button.svg") %>" alt="Favorite heart outline button">\
              <img class="voted-heart" src="<%= asset_path("emoji/emoji-one-heart.png") %>" alt="Favorite heart button">\
              <span class="reactions-count" id="reactions-count-'+comment.id+'">1</span></button>';
  } else {
    if (comment.heart_ids.indexOf(userData().id) > -1) {
      var reactedClass = "reacted";
    } else {
      var reactedClass = ""
    }
    return '<button style="background:white" class="reaction-button '+ reactedClass +'" id="button-for-comment-'+comment.id+'" data-comment-id="'+comment.id+'">\
              <img src="<%= asset_path("favorite-heart-outline-button.svg") %>" alt="Favorite heart outline button">\
              <img class="voted-heart" src="<%= asset_path("emoji/emoji-one-heart.png") %>" alt="Favorite heart button">\
              <span class="reactions-count" id="reactions-count-'+comment.id+'">'+comment.public_reactions_count+'</span></button>';
  }
}