{{ form_errors(form) }}
<div class="row">
	<div class="col-md-8 form-group">{{ form_label(form.name) }} {{ form_widget(form.name) }}</div>
	<div class="col-md-4 form-group" style="float:right; width:100px;">
	  <button class="btn btn-sm btn-success" type="submit">Submit</button>
	  <button type="button" class="btn btn-sm" data-dismiss="modal">Cancel</button>
	</div>
</div>
<div class="row">
	<div class="col-md-12 form-group">{{ form_label(form.description) }} {{ form_widget(form.description) }}</div>
</div>
<div class="row">
	<div id="list-available-columns" class="col-md-5 form-group"><label class="control-label">Available Fields</label>
		<ul class="sortable available-columns list-group dragdrop" style="min-height:200px;">
			{% for column in available_columns %}
				<li class="list-group-item"><span class="hidden"><input type="checkbox" name="form[columns][]" value="{{column}}"/></span>{{column}}</li>
			{% endfor %}
		</ul>
	</div>
	<div class="col-md-2 form-group"></div>
	<div id="list-used-columns" class="col-md-5 form-group"><label class="control-label">Selected Fields</label>
		<ul class="sortable used-columns list-group dragdrop selected" style="min-height:200px;">
			{% for column in used_columns %}
				<li class="list-group-item static"><span class="hidden"><input type="checkbox" name="form[columns][]" value="{{column}}" checked="checked"/></span>{{column}} <i style="color:green;" class="fa fa-check-circle"></i></li>
			{% endfor %}
		</ul>
	</div>
</div>

<script type="text/javascript">
  $(function () {
    var oldList, newList, item;
    var doubleClickThreshold = 300; // Threshold time for double-click in milliseconds

    $('.sortable').sortable({
      cursor: "move",
      opacity: 0.5,
      start: function (event, ui) {
        item = ui.item;
        newList = oldList = ui.item.parent().parent();
      },
      stop: function (event, ui) {
        if ($(newList).prop('id') === 'list-used-columns') {
          $(item).find('input[type="checkbox"]').prop('checked', true);
        } else {
          $(item).find('input[type="checkbox"]').prop('checked', false);
        }
      },
      change: function (event, ui) {
        if (ui.sender) {
          newList = ui.placeholder.parent().parent();
        }
      },
      connectWith: ".sortable"
    }).disableSelection();

    var doubleClickTimer;

    $('#list-available-columns').on('click', 'li', function () {
      var $this = $(this);

      if (doubleClickTimer) {
        clearTimeout(doubleClickTimer);
        doubleClickTimer = null;

        // Perform action on double-click
        moveItem($this);
      } else {
        doubleClickTimer = setTimeout(function () {
          doubleClickTimer = null;

          // Perform action on single click
          console.log("Single-clicked");
          console.log($this.text());
        }, doubleClickThreshold);
      }
    });

    $('#list-used-columns').on('click', 'li', function () {
      var $this = $(this);

      if (doubleClickTimer) {
        clearTimeout(doubleClickTimer);
        doubleClickTimer = null;

        // Perform action on double-click
        moveItemBack($this, '#list-available-columns');
      } else {
        doubleClickTimer = setTimeout(function () {
          doubleClickTimer = null;

          // Perform action on single click
          console.log("Single-clicked");
          console.log($this.text());
        }, doubleClickThreshold);
      }
    });

    function moveItem(item) {
      var newItem = $('<li class="list-group-item ui-sortable-handle" style="position: relative; opacity: 1; left: 0px; top: 0px;"></li>').append(item.contents());
      $('#list-used-columns ul').append(newItem);
      $(newItem).find('input[type="checkbox"]').prop('checked', true);
      item.remove();
    }

    function moveItemBack(item) {
      var newItem = $('<li class="list-group-item ui-sortable-handle" style="position: relative; opacity: 1; left: 0px; top: 0px;"></li>').append(item.contents());
      $('#list-available-columns ul').append(newItem);
      $(newItem).find('input[type="checkbox"]').prop('checked', false);
      item.remove();
    }

  });
</script>




{% include 'include/insert_form_js.html.twig' %}