#{extends 'main.html' /}


<h1>Todo List</h1>

#{mustache.template 'task_item'}
	<li class="task" id="task_{{id}}">{{details}}</li>
#{/mustache.template}

<ul id="tasks">
#{list tasks, as: 'task'}
	#{mustache.print 'task_item', context:task /}
#{/list}
</ul>

<form id="add_task" action="/tasks/" method="post">
	<div><input type="text" name="task.details" /></div>
	<div><input type="submit" value="Add Task"></div>
</form>

<script type="text/javascript">
$('#add_task').submit(function(e){
	e.preventDefault();
	$.ajax({
		url: '/tasks.json',
		type: 'POST',
		data: $('#add_task').serialize(),
		success: function(data){
			var task_item = PlayMustache.to_html("task_item", data);
			$(task_item).appendTo($('#tasks'));
		}
	});
});
</script>