@(message: String, todos: List[TodoItem])

@main("Todos - Play2.0") {
    
	<!-- Todo App Interface -->
	<div id="todoapp">
		
		<div class="title">
	    	<h1>Todos - Play2.0</h1>
	  	</div>

	  	<div class="content">

	    	<div id="create-todo">
	      		<input id="new-todo" placeholder="What needs to be done?" type="text">
	      		<span class="ui-tooltip-top" style="display:none;">Press Enter to save this task</span>
	    	</div>

	    	<div id="todos">
	      		<ul id="todo-list"></ul>            
	    	</div>

	    	<div id="todo-stats">
			</div>

		</div>
	</div>

	<ul id="instructions">
	  <li>Double-click to edit a todo.</li>
	  <li><a href="https://github.com/gguan/todos-play20">View the annotated source.</a></li>
	</ul>

	<div id="credits">
		Created by
		<br />
     	<a href="http://jgn.me/">J&eacute;r&ocirc;me Gravel-Niquet</a>
	  	<br />
		Ported by
	  	<br>
	  	<a href="https://github.com/gguan">Guan Guan</a> using playframework2.0 backend
	</div>

	<!-- Templates -->

	<script type="text/template" id="item-template">
	  <div class="todo <%= done ? 'done' : '' %>">
	    <div class="display">
	      <input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
	      <div class="todo-text"></div>
	      <span class="todo-destroy"></span>
	    </div>
	    <div class="edit">
	      <input class="todo-input" type="text" value="" />
	    </div>
	  </div>
	</script>

	<script type="text/template" id="stats-template">
	  <% if (total) { %>
	    <span class="todo-count">
	      <span class="number"><%= remaining %></span>
	      <span class="word"><%= remaining == 1 ? 'item' : 'items' %></span> left.
	    </span>
	  <% } %>
	  <% if (done) { %>
	    <span class="todo-clear">
	      <a href="#">
	        Clear <span class="number-done"><%= done %></span>
	        completed <span class="word-done"><%= done == 1 ? 'item' : 'items' %></span>
	      </a>
	    </span>
	  <% } %>
	</script>

}