document.addEventListener("DOMContentLoaded", function() {
    $('.edit_column_btn').attr('hidden', false);
});


function query_users(querystr) {
    let req = new XMLHttpRequest();
    req.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
	    let sel = $('#form_share_table_select_new_user');
	    sel.empty();
	    let resp = $.parseJSON(this.responseText);
	    for (user of resp.slice(0, 5)) {
		sel
		    .append($('<li>')
			    .attr('class', "list-group-item align-content-center")
			    .text(user.username)
			    .on('click', function() {
				$('#form_share_table_new_user_input')
				    .val(user.username)
				    .attr('disabled', true);
				$('#form_share_table_new_user_id')
				    .val(user.id)
				    .attr('disabled', false);
			    }));
		console.log(sel);
		
	    }
	}
    };
    req.open("POST", "/users", true);
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    req.send("query=" + querystr);
}
 
function toggle_edit_tname() {
      let span = document.getElementById('tname');
      if (!edit_mode) {
	span.innerHTML = `
        <div class='row'>
	  <div class='col-auto ml-1 p-2'>
            <form id='form_edit_table' action='/table/name/edit' method='post'>
              <input name='tblid' value='${tblid}' hidden />
 	      <input type='text' class='form-control' id='tname_edit' name='new_name' value='${tblname}' />
            </form>
	  </div>
	  <div class='col-auto mt-0 pt-0 pr-1'>
            <div class="btn-group" role="group">
              <button class="btn btn-secondary" onclick="toggle_edit_tname();" type="button"><i class="bi bi-x"></i></button> 
              <button class='btn btn-success' type='button' onclick='edit_tname()'>
	        <i class='bi bi-check'></i>
	      </button>
            </div>
            <button class='btn btn-danger' type="button" onclick='confirm_delete("table");'><i class="bi bi-trash3-fill"></i></button>
          </div>
          <form id="form_delete_table" action="/table/delete" method="post">
            <input value="${tblid}" name="tblid" hidden />
          </form>`;
	  edit_mode = true;
	  document.getElementById('pencil_button_edit_tname').hidden = true;
      } else {
	  document.getElementById('pencil_button_edit_tname').hidden = false;
	  span.innerHTML = `${tblname}`;
	  edit_mode = false;
      }
  }
  function edit_tname() {
      document.getElementById('form_edit_table').submit();
      toggle_edit_tname();
  }