<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Thorax • TodoMVC</title>
	<link rel="stylesheet" href="../../../assets/base.css">
	<!--[if IE]>
	<script src="../../../assets/ie.js"></script>
	<![endif]-->
</head>
<body>
	<script type="text/template" data-template-name="app">
	  <section id="todoapp">
	  	<header id="header">
	  		<h1>todos</h1>
	  		<input id="new-todo" placeholder="What needs to be done?" autofocus>
	  	</header>
	  	{{^empty collection}}
	  	  <section id="main">
	  	  	<input id="toggle-all" type="checkbox">
	  	  	<label for="toggle-all">Mark all as complete</label>
	  	  	{{#collection item-view="todo-item" tag="ul" id="todo-list"}}
			  		<div class="view">
			  			<input class="toggle" type="checkbox" {{#if completed}}checked="checked"{{/if}}>
			  			<label>{{title}}</label>
			  			<button class="destroy"></button>
			  		</div>
			  		<input class="edit" value="{{title}}">
	  	  	{{/collection}}
	  	  </section>
	  	  {{view "stats" tag="footer" id="footer"}}
	  	{{/empty}}
	  </section>
	  <div id="info">
	  	<p>Double-click to edit a todo</p>
	  	<p>Written by <a href="https://github.com/addyosmani">Addy Osmani</a> &amp; <a href="https://github.com/eastridge">Ryan Eastridge</a></p>
	  	<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
	  </div>
	</script>
	<script type="text/template" data-template-name="stats">
		<span id="todo-count"><strong>{{remaining}}</strong> {{itemText}} left</span>
		<ul id="filters">
			<li>
				{{#link "/" class="selected"}}All{{/link}}
			</li>
			<li>
				{{#link "/active"}}Active{{/link}}
			</li>
			<li>
				{{#link "/completed"}}Completed{{/link}}
			</li>
		</ul>
		{{#if completed}}
			<button id="clear-completed">Clear completed ({{completed}})</button>
		{{/if}}
	</script>
	<script src="js/lib/thorax.js"></script>
	<script src="js/lib/backbone-localstorage.js"></script>
	<script>
		// Grab the text from the templates we created above
		Thorax.templates = {
			app: Handlebars.compile($('script[data-template-name="app"]').html()),
			stats: Handlebars.compile($('script[data-template-name="stats"]').html())
		};

		//initialize the app object
		window.app = {};
	</script>
	<script src="js/models/todo.js"></script>
	<script src="js/collections/todos.js"></script>
	<script src="js/views/todo-item.js"></script>
	<script src="js/views/stats.js"></script>
	<script src="js/views/app.js"></script>
	<script src="js/routers/router.js"></script>
	<script src="js/app.js"></script>
</body>
</html>
