<header id="header">
	<h1>todos</h1>
	<input id="new-todo" placeholder="What needs to be done?" autofocus>
</header>

<section id="main" class="<%= todos.attr("length") === 0 ? "hidden" : "" %>">
	<input id="toggle-all" type="checkbox" <%= todos.allComplete() ? "checked" : "" %>>
	<label for="toggle-all">Mark all as complete</label>
	<ul id="todo-list">
    <% todos.each(function( todo ) { %>
		<li class="todo
			<%= todo.matches(state.attr('filter')) ? '' : 'hidden' %>
			<%= todo.attr('complete') ? 'completed' : '' %>
			<%= todo.attr('editing') ? 'editing' : '' %>"
			<%= (el)-> el.data('todo', todo) %>>
			<div class="view">
				<input class="toggle" type="checkbox" <%= todo.attr('complete') ? 'checked' : '' %>>
				<label><%= todo.attr('text') %></label>
				<button class="destroy"></button>
			</div>
			<input class="edit" value="<%= todo.attr('text') %>">
		</li>
	<% }) %>
  </ul>
</section>
<footer id="footer" class="<%= todos.attr('length') === 0 ? 'hidden' : '' %>">
	<span id="todo-count">
		<strong><%= todos.remaining() %></strong>
		item<%= todos.remaining() == 1 ? "" : "s" %> 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() === 0 ? 'hidden' : '' %>">
		Clear completed (<%= todos.completed() %>)
	</button>
</footer>
