function editColumnName(){

$('body').unbind('click')
$('.column-title').click(function() {
  if (openEditChecker()) { return }
  $(this).popover('hide');
  this.outerHTML = "<form><input class='column-form' type='text' name='tableName' value='" + this.innerText + "'></form>";
  enterKeypressColumn()
  clickOutsideColumnKeypress()
});

}

function enterKeypressColumn() {

$('.column-form').keypress(function (e) {
  var key = e.which;
  if(key == 13) {
    updateColumnName()
    return false;
  }
});

}

function updateColumnName() {

let columnName = $('.column-form')[0].value;
$('.column-form')[0].parentElement.outerHTML =
"<span class='column-title' data-toggle='popover' data-trigger='hover' data-content='Edit column name'>" + columnName.toLowerCase() + "</span>"
$('[data-toggle="popover"]').popover()
editColumnName()

}

function clickOutsideColumnKeypress() {

$('body').click(function() {
  if($(event.target).is('span.column-title')) { return }
  if(!$(event.target).is('.column-form')) {
    updateColumnName()
  }
});

}

function editTypeName(columnType){

$('.tag-pill').click(function() {
  if ($('input').length === 0) {
    $(this).popover('hide');
    $('body').append(
      "<form><input class='type-form' type='hidden' value='placeholder'></form>"
    )
    this.outerHTML =
    "<div class='dropdown open float-xs-left'>" +
      "<div class='btn btn-default btn-xs dropdown-toggle' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>" +
        columnType +
      "</div>" +
      "<div class='dropdown-menu' aria-labelledby='dropdownMenuButton'>" +
        "<div class='dropdown-item'>integer</div>" +
        "<div class='dropdown-item'>decimal</div>" +
        "<div class='dropdown-item'>text</div>" +
        "<div class='dropdown-item'>ref</div>" +
      "</div>" +
    "</div>"
    setTimeout(cont,10)
    function cont() {
      $("#dropdownMenuButton").dropdown("toggle")
    }
    $('.dropdown-item').click(function() {
      let typeName = this.innerText;
      this.parentElement.parentElement.outerHTML =
      "<span class='tag tag-default tag-pill float-xs-left' data-toggle='popover' data-trigger='hover' data-content='Edit type'>" + typeName + "</span>"
      $('[data-toggle="popover"]').popover()
      $('input')[0].outerHTML = ""
      editTypeName(columnType)
    });
  }
});

}

function columnHTML(columnObj,deleteClass) {

return `<li class='list-group-item' id='${columnObj.id}'>` +
  `<span class='tag tag-default float-xs-left type-span' >${columnObj.type}</span>` +
  "<div class='column-title-outer' >" +
    `<span class='column-title'>${columnObj.name}</span>` +
  "</div>" +
  `<i class='fa fa-trash ${deleteClass}' data-toggle='popover' data-trigger='hover' data-content='Destroy column'></i>` +
"</li>"

}