% layout 'ui';

<style type="text/css">
/*
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
*/
</style>
<script type="text/javascript">

$(document).ready(function() {
	$("#sortable").sortable();
	$("#sortable").disableSelection();
});

</script>




<h2>Select and reorder columns</h2>

<form method=post>

<input type=submit value="Select">

<%= include 'all_checkboxes' %>

<ul id="sortable">
% foreach my $n ( @$columns ) {
<li>
<label>
<input type=checkbox name=columns value="<%= $n %>" <%= $checked->{$n} ? 'checked' : '' %>>
<%= $n %>
<span class="count"><%= $stats->{$n}->{count} %></span>
</label>
% }
</ul>

<input type=submit value="Select">

from <input type=text name=path value="<%= session('path') %>" readonly>

</form>

<pre class=debug>
$columns = <%= dumper $columns %>
$stats = <%= dumper $stats %>
</pre>