text: $(document).ready(function() {
      setup_draggable();
  
      $("#n-columns").on("change", function() {
          var v = $(this).val();
          if(v==="1") {
              var $col = $('.form-body .col-md-12').toggle(true);
              $('.form-body .col-md-6 .draggable').each(function(i, el) {
                  $(this).remove().appendTo($col);
              })
              $('.form-body .col-md-6').toggle(false);
          } else {
              var $col = $('.form-body .col-md-6').toggle(true);
              $(".form-body .col-md-12 .draggable").each(function(i, el) {
                  $(this).remove().appendTo(i % 2 ? $col[1] : $col[0]);
              });
              $('.form-body .col-md-12').toggle(false);
          }
      });
  
      $("#copy-to-clipboard").on("click", function() {
          var $copy = $(".form-body").parent().clone().appendTo(document.body);
          $copy.find(".tools, :hidden").remove();
          $.each(["draggable", "droppable", "sortable", "dropped",
              "ui-sortable", "ui-draggable", "ui-droppable", "form-body"], function(i, c) {
              $copy.find("." + c).removeClass(c);
          })
          var html = html_beautify($copy.html());
          $copy.remove();
  
          $modal = get_modal(html).modal("show");
          $modal.find(".btn").remove();
          $modal.find(".modal-title").html("Copy HTML");
          $modal.find(":input:first").select().focus();
  
          return false;
      })
  
  
  });
  
  var setup_draggable = function() {
      $( ".draggable" ).draggable({
          appendTo: "body",
          helper: "clone"
      });
      $( ".droppable" ).droppable({
          accept: ".draggable",
          helper: "clone",
          hoverClass: "droppable-active",
          drop: function( event, ui ) {
              $(".empty-form").remove();
              var $orig = $(ui.draggable)
              if(!$(ui.draggable).hasClass("dropped")) {
                  var $el = $orig
                      .clone()
                      .addClass("dropped")
                      .css({"position": "static", "left": null, "right": null})
                      .appendTo(this);
  
                  // update id
                  var id = $orig.find(":input").attr("id");
  
                  if(id) {
                      id = id.split("-").slice(0,-1).join("-") + "-"
                          + (parseInt(id.split("-").slice(-1)[0]) + 1)
  
                      $orig.find(":input").attr("id", id);
                      $orig.find("label").attr("for", id);
                  }
  
                  // tools
                  $('<p class="tools">\
  						<a class="edit-link">Edit HTML<a> | \
  						<a class="remove-link">Remove</a></p>').appendTo($el);
              } else {
                  if($(this)[0]!=$orig.parent()[0]) {
                      var $el = $orig
                          .clone()
                          .css({"position": "static", "left": null, "right": null})
                          .appendTo(this);
                      $orig.remove();
                  }
              }
          }
      }).sortable();
  
  }
  
  var get_modal = function(content) {
      var modal = $('<div class="modal" style="overflow: auto;" tabindex="-1">\
  			<div class="modal-dialog">\
  				<div class="modal-content">\
  					<div class="modal-header">\
  					<h4 class="modal-title">Edit HTML</h4>\
  						<button type="button" class="btn-close" data-bs-dismiss="modal"></button>\
  					</div>\
  					<div class="modal-body ui-front">\
  						<textarea class="form-control btn-square" \
  							style="min-height: 200px; margin-bottom: 10px;\
  							font-family: Monaco, Fixed">'+content+'</textarea>\
  						<button class="btn btn-light btn-square">Update</button>\
  					</div>\
  				</div>\
  			</div>\
  			</div>').appendTo(document.body);
  
      return modal;
  };
  
  $(document).on("click", ".edit-link", function(ev) {
      var $el = $(this).parent().parent();
      var $el_copy = $el.clone();
  
      var $edit_btn = $el_copy.find(".edit-link").parent().remove();
  
      var $modal = get_modal(html_beautify($el_copy.html())).modal("show");
      $modal.find(":input:first").focus();
      $modal.find(".btn-theme").click(function(ev2) {
          var html = $modal.find("textarea").val();
          if(!html) {
              $el.remove();
          } else {
              $el.html(html);
              $edit_btn.appendTo($el);
          }
          $modal.modal("hide");
          return false;
      })
  });
  
  $(document).on("click", ".remove-link", function(ev) {
      $(this).parent().parent().remove();
  });
  