function buildCommentFormHTML(commentableId, commentableType, parentId) {
  var authToken = document.querySelector("meta[name='csrf-token']").getAttribute('content');
  var user = userData();
  var codeOfConductHTML = ""
  if (user && !user.codeOfConduct && user.commentCount < 1){
    codeOfConductHTML =   '<div class="code-of-conduct sub-comment-code-of-conduct" style="display:block" id="toggle-code-of-conduct-checkbox">\
                            <input class="checkbox" type="checkbox" name="checked_code_of_conduct" required />\
                            <label for="checked_code_of_conduct">I\'ve read the <a href="<%= URL.url('code-of-conduct') %>">code of conduct</a></label>\
                          </div>'
  }
  var randomIdNumber = Math.floor(Math.random() * 1991)

  var previewDiv = '<div class="preview-toggle comment-preview-div body"></div>'
  var previewButton = '<button id="preview-button" class="comment-action-button comment-action-preview" onclick="handleCommentPreview(event)">PREVIEW</button>'

  return '<form class="new_comment" onsubmit="handleCommentSubmit.bind(this)(event)" id="new-comment-' + parentId + '" action="/comments" accept-charset="UTF-8" method="post" data-comment-id="'+parentId+'">\
            <input name="utf8" type="hidden" value="&#x2713;" />\
            <input type="hidden" name="authenticity_token" value="' + authToken + '">\
            <input value="' + commentableId + '" type="hidden" name="comment[commentable_id]" id="comment_commentable_id" />\
            <input value="' + commentableType + '" type="hidden" name="comment[commentable_type]" id="comment_commentable_type" />\
            <input value="' + parentId + '" type="hidden" name="comment[parent_id]" id="comment_parent_id" />\
            <div class="response-templates-container hidden">\
              <header>\
                <button type="button" class="personal-template-button active" data-target-type="personal">PERSONAL</button>\
                <button type="button" class="moderator-template-button hidden" data-target-type="moderator">MODERATOR</button>\
              </header>\
              <img class="loading-img hidden" src="<%= asset_path("loading-ellipsis.svg") %>" alt="loading">\
              <div class="personal-responses-container">\
              </div>\
              <div class="moderator-responses-container hidden">\
              </div>\
              <a target="_blank" rel="noopener nofollow" href="/settings/response-templates">Create new template</a>\
              <p>Create templates to quickly answer FAQs or store snippets for re-use.</p>\
            </div>\
            <textarea id="textarea-for-' + parentId + '" class="embiggened" name="comment[body_markdown]" id="comment_body_markdown" required onkeydown="handleKeyDown.bind(this)(event)"></textarea>\
            '+previewDiv+'\
                '+codeOfConductHTML+'\
            <a href="/p/editor_guide" class="markdown-guide" target="_blank" rel="noopener" title="Markdown Guide">\
              <img alt="markdown guide" class="icon-image" src="<%= asset_path('info.svg') %>" />\
            </a>\
            <div class="editor-response-templates in-reply">\
              <button class="response-templates-button" title="Use a response template" type="button" data-has-listener="false">\
                <img src="<%= asset_path("response-template.svg") %>" alt="" class="icon-image">\
              </button>\
            </div>\
            <div class="editor-image-upload">\
              <input type="file" id="image-upload-' + randomIdNumber + '"  name="file" accept="image/*" style="display:none">\
              <button title="Upload Image" class="image-upload-button" id="image-upload-button-' + randomIdNumber + '" onclick="handleImageUpload(event,'+ randomIdNumber + ')">\
                <img alt="upload image" class="icon-image" src="<%= asset_path("image-upload.svg") %>" />\
              </button>\
              <label  class="image-upload-file-label" id="image-upload-file-label-' + randomIdNumber + '"></label>\
              <input type="submit" id="image-upload-submit-' + randomIdNumber + '" value="Upload" style="display:none">\
              <input class="uploaded-image" id="uploaded-image-' + randomIdNumber + '" />\
            </div>\
            <div class="actions reply-actions">\
              <a href="#" class="cancel" onclick="cancel(event,this)">CANCEL</a>\
              '+previewButton+'\
              <input type="submit" class="comment-action-button" name="commit" value="SUBMIT" />\
            </div>\
          </form>';
}

function cancel(event, el) {
  event.preventDefault();
  replaceActionButts(el.parentNode.parentNode.parentNode.parentNode);
  initializeCommentsPage();
}