<html>
  <head>
    <meta charset="utf8">
    <link rel="stylesheet" href="style.css" />
  </head>
  <body ng-app="Todos">
    <div class="container" ng-controller="MainCtrl">
      <h1><img class="logo" src="img/vanilla.png" /> (Not) Vanilla Todos</h1>
      <div id="vanilla-todos">
        <table>
          <thead>
            <tr>
              <th>Mes tâches</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody class="todos-list">
            <tr ng-show="todos.length === 0">
              <td colspan="2" class="no-todo">Pas de tâches pour le moment !</td>
            </tr>
            <tr ng-repeat="todo in todos track by $index">
              <td>{{todo.text}}</td>
              <td><a href="#" ng-click="removeTodoByIndex($index);">Supprimer</a></td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="2">
                <input class="new-todo"
                  type="text"
                  ng-model="newTodo"
                  ng-keydown="newTodoKeydownHandler($event)"
                  placeholder="Créer une nouvelle tâche..."/>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
    <script src="../../node_modules/angular/angular.js"></script>
    <script src="todos.js"></script>
  </body>
</html>