{% load i18n l10n %}

<style type="text/css">

	.connectedSortable{ 
		list-style-type: none; 
		margin: 0;
		padding: 0 0 2.5em;
		float: left;
		margin-right: 10px; 
		width: 143px;
		border:1px solid grey;
		border-radius: 3px;
		margin:5px;
		padding: 5px
	}

	.connectedSortable li {
		margin: 0 5px 5px 5px; 
		padding: 5px;
		font-size: 1.2em;
	   	width: 120px; 
	}

	.drag_and_drop_str{
		/*border:1px solid red;*/
		display: inline-block;
		width: 150px;
		float:left;
	}

	.drag_and_drop_title_sortable{
		/*border:1px solid red;*/
		text-align: center;
		padding: 3px;
		display:inline-block;
		float:left;
		margin-left: 27px;
	}

	.drag_and_drop{
		float:left;
	/*	border: 1px solid grey;
		border-radius: 5px;
		padding:;
	*/
	}



	</style>
	{% get_current_language as LANGUAGE_CODE %}


		<div id = '{{view_name}}_drag_and_drop' class='drag_and_drop'>

			<div id = '{{view_name}}_atr' class= 'drag_and_drop_str'>
				<div class='drag_and_drop_title_sortable'> Column Show </div>
				<p class="clear-fix"></p>
				<ul id="{{view_name}}_sortable1" class="connectedSortable"> 
					
					{% for key in group_by_column_show %}
						<li id = '{{key.1}}'  class="ui-state-default">{{key.0}}</li>
					{% endfor%}
				</ul>
				<p class="clear-fix"></p>

			<div class='drag_and_drop_title_sortable'> Column Hide </div>
			<p class="clear-fix"></p>
				
				<ul id="{{view_name}}_sortable2" class="connectedSortable"> 
					{% for key in group_by_column_hide %}
						<li id = '{{key.1}}'  class="ui-state-default">{{key.0}}</li>
					{% endfor%}
				</ul>
			</div>	

		</div>



	<script type="text/javascript" lang="text/javascript">

		$( "#{{view_name}}_sortable1, #{{view_name}}_sortable2" ).sortable({
			connectWith: ".connectedSortable",
			 beforeStop: function( event, ui ) { 

				$('#{{view_name}}_sortable1 li').each(function(){
					{{view_name}}DragAndDropShow();
				});

				$('#{{view_name}}_sortable2 li').each(function(){

					{{view_name}}DragAndDropHide();
				});

				{{view_name}}_UpdateHeight(total_height);
			 },
		}).disableSelection();
	

		function {{view_name}}DragAndDropShow()
		{
			$("#{{view_name}}_table_grid").showCol($(this).attr('id'));
		}

		function {{view_name}}DragAndDropHide()
		{
			$("#{{view_name}}_table_grid").hideCol($(this).attr('id'));
		}


	</script>