<!-- Predefined "head" template -->
<head>
  <title>Todo List</title>
</head>

<!-- Predefined "body" template -->
<body>
<div class="container">
  <header>
    <h1>Todo List</h1>

    <label class="hide-completed">
      <input type="checkbox" checked="{{hideCompleted}}" />
      Hide completed tasks
    </label>

    <!-- add a form below the h1 -->
    <form class="new-task">
      <input type="text" name="text" placeholder="Type to add new tasks" />
    </form>
  </header>

  <ul>
    {{#each tasks}}
      {{> task}}
    {{/each}}
  </ul>
</div>
</body>

<!-- Custom "task" template -->
<template name="task">
  <li class="{{#if checked}}checked{{/if}}">
    <button class="delete">&times;</button>
    <input type="checkbox" checked="{{checked}}" class="toggle-checked" />
    <span class="text">{{text}}</span>
  </li>
</template>