<header id="header">
  <h1>todos</h1>
  <input id="new-todo" {{ (el) -> el.val('').focus() }} placeholder="What needs to be done?" autofocus="">
</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.displayList}}
      <li class="todo {{#complete}}completed{{/complete}} {{#editing}}editing{{/editing}}" {{data 'todo'}}>
        <div class="view">
          <input class="toggle" type="checkbox" {{#complete}}checked{{/complete}}>
          <label>{{text}}</label>
          <button class="destroy"></button>
        </div>
        <input class="edit" type="text" value="{{text}}">
      </li>
    {{/todos.displayList}}
  </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>
