{{#if:todos.length}}
  <footer id="footer">
    <span id="todo-count">
      <strong>{{todos.length - todos.numCompleted}}</strong> todos left
    </span>
    <ul id="filters">
      <li>
        <a data-href="allTodos" data-bind="{{ css: { selected: models.states.page == 'all' }}}">All</a>
      </li>
      <li>
        <a data-href="activeTodos" data-bind="{{ css: { selected: models.states.page == 'active' }}}">Active</a>
      </li>
      <li>
        <a data-href="completedTodos" data-bind="{{ css: { selected: models.states.page == 'completed' }}}">Completed</a>
      </li>
    </ul>

    {{#if:todos.numCompleted}}
      <button id="clear-completed" data-bind="{{ onClick: todos.clearCompleted() }}">
        Clear completed ({{todos.numCompleted}})
      </button>
    {{/}}
  </footer>
{{/}}