% layout 'ui';
<h2><%= $message %></h2>

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

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

% my $more = ( $#$changes ) * 10;
Show <a href="<%= url_for( controller => 'changes', action => 'index' )->query( max => $more ) %>"><%= $more %> changes</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( 'change_box' )
				.append(
					$('<input type=button value=hide>').click( function() {
console.debug(this,link_html);
					e.html( link_html ).removeClass( 'change_box' ).addClass( 'change_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' });
	});

});
</script>