<header id="header">
	<h1>todos</h1>
	<input id="new-todo" {{ (el) -> el.val('').focus() }} placeholder="What needs to be done?">
</header>

<section id="main" class="{{^todos}}hidden{{/todos}}">
	<input id="toggle-all" type="checkbox" {{#todos.allComplete}}checked="checked"{{/todos.allComplete}}>
	<label for="toggle-all" >Mark all as complete</label>
	<ul id="todo-list">
	{{#todos}}
		<li class="todo {{^matches}}hidden{{/matches}} {{#complete}}completed{{/complete}} {{#editing}}editing{{/editing}}" {{data 'todo'}}>
			<div class="view">
				<input class="toggle" type="checkbox" {{#complete}}checked="checked"{{/complete}}>
				<label>{{text}}</label>
				<button class="destroy"></button>
			</div>
			<input class="edit" type="text" value="{{text}}">
		</li>
	{{/todos}}
	</ul>
</section>

<footer id="footer" class="{{^todos}}hidden{{/todos}}">
	<span id="todo-count">
		<strong>{{todos.remaining}}</strong> {{plural "item" todos.remaining}} left
	</span>
	<ul id="filters">
		<li>
			<a class="selected" href="#!">All</a>
		</li>
		<li>
			<a href="#!active">Active</a>
		</li>
		<li>
			<a href="#!completed">Completed</a>
		</li>
	</ul>
	<button id="clear-completed" class="{{^todos.completed}}hidden{{/todos.completed}}">
		Clear completed ({{todos.completed}})
	</button>
</footer>
