% layout 'ui';
<h2>Latest actions</h2>

<form class=action_filter>
<input type=submit value="Filter">
<ul>
% foreach my $type ( sort keys %$stats ) {
<li><label>
<input type=checkbox name=action_filter value="<%= $type %>">
<%= $type %><span class=count><%= $stats->{$type} %></span>
</label>
% }
</ul>
<input type=submit value="Filter">
</form>

<table>
<tr><th>action</th><th>timestamp</th></tr>
% foreach my $action ( @$actions ) {
<tr><td>
<a class="view" href="<%= url_for( controller => 'actions', action => 'view' )->query( uid => $action->{uid} ) %>"><%= $action->{action} %></a>
</td><td>
<tt class=ts><%= $action->{t} %></tt>
</td></tr>
% }
</table>

% my $more = ( $#$actions ) * 10;
Show <a href="<%= url_for( controller => 'actions', action => 'index' )->query( max => $more ) %>"><%= $more %> actions</a>

<script type="text/javascript" src="/js/date_pretty.js"></script>
<script type="text/javascript">
$(document).ready( function(){
	console.debug('convert timestamps');
	$('tt.ts').each( function(){
		$(this).text( date_pretty( new Date(this.textContent * 1000) ) );
	});

	$('a.view').live( 'click', function() {
		console.debug(this.href);
		var e = $(this).parent();
		var link_html = e.html();
		$.ajax({
			url: this.href,
			success: function(data){
				var form = $(data).filter('form');
				console.debug('ajax',e,form);
				e.html( form )
				.addClass( 'action_box' )
				.append(
					$('<input type=button value=hide>').click( function() {
console.debug(this,link_html);
					e.html( link_html ).removeClass( 'action_box' ).addClass( 'action_viewed' );
					})
				)
				;
			}
		})
		return false;
	});

	$('form input[name=_master]').live( 'click', function(){
		var master = this.value;
		console.debug('replication master', master);

		$(this).closest('form').attr('action', function() {
			return master + this.action;
		}).css({ 'background': '#ffe' });
	});

	$('label.checkbox_to_text span.value' ).live( 'dblclick', function() {
		console.debug('checkbox to text',this);
		var $checkbox = $(this).find('input[type=checkbox]');
		$(this).html(
			'<input type=text name="'+$checkbox.attr('name')+'" value="'+$checkbox.attr('value')+'">'
		);

	});

	console.debug('ready');
});
</script>