<templates>
  <section t-name="TodoList" class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input class="new-todo" autofocus="true" autocomplete="off" placeholder="What needs to be done?" t-on-keyup="addTodo"/>
    </header>
    <section class="main" t-if="store.tasks.length">
      <input class="toggle-all" id="toggle-all" type="checkbox" t-att-checked="allChecked" t-on-click="() => store.toggleAll(!allChecked)"/>
      <label for="toggle-all"></label>
      <ul class="todo-list">
        <t t-foreach="displayedTasks" t-as="todo" t-key="todo.id">
          <Todo id="todo.id" isCompleted="todo.isCompleted" text="todo.text"/>
        </t>
      </ul>
    </section>
    <footer class="footer" t-if="store.tasks.length">
      <span class="todo-count">
        <strong>
            <t t-esc="remaining"/>
        </strong>
        <t t-esc="remainingText"/>
      </span>
      <ul class="filters">
        <li>
          <a t-on-click="() => this.setFilter('all')" t-att-class="{selected: state.filter === 'all'}">All</a>
        </li>
        <li>
          <a t-on-click="() => this.setFilter('active')" t-att-class="{selected: state.filter === 'active'}">Active</a>
        </li>
        <li>
          <a t-on-click="() => this.setFilter('completed')" t-att-class="{selected: state.filter === 'completed'}">Completed</a>
        </li>
      </ul>
      <button class="clear-completed" t-if="store.tasks.length gt remaining" t-on-click="() => store.clearCompleted()">
        Clear completed
      </button>
    </footer>
  </section>

  <li t-name="Todo" class="todo" t-att-class="{completed: props.isCompleted, editing: state.isEditing}">
    <div class="view">
      <input class="toggle" type="checkbox" t-on-change="() => store.toggleTask(props.id)" t-att-checked="props.completed"/>
      <label t-on-dblclick="() => state.isEditing = true">
        <t t-esc="props.text"/>
      </label>
      <button class="destroy" t-on-click="() => store.deleteTask(props.id)"></button>
    </div>
    <input class="edit" t-ref="input" t-if="state.isEditing" t-att-value="props.text" t-on-keyup="handleKeyup" t-on-blur="handleBlur"/>
  </li>
</templates>
