<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 <%= todos.completed() %>
    completed item<%= todos.completed() == 1 ? "" : "s" %>
  </button>
</footer>
