% 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>


<div style="float:right">
% if ( $views ) {
Load view:
<ul>
%  foreach my $view ( @$views ) {
<li><a href="/data/columns/<%= $view %>"><%= $view %></a>
%  }
</ul>
% }
</div>


<h2>Select and reorder columns</h2>

<form method=post>

<input type=submit value="Select">

%= include 'all_checkboxes', add_class_to => 'parent()'

<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>
% if ( defined $stats->{$n}->{unique} ) {
<span title="unique">&#9997;</span>
% }
% if ( defined $stats->{$n}->{numeric} ) {
<span title="numeric">&#8319;</span>
% }
</label>
% }
</ul>

<input type=submit value="Select">

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

<input type=text name=view placeholder="save view">

<a href="<%= url_for( action => 'stats' ) %>">rebuild stats</a>

</form>

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