<!DOCTYPE html>
<html>
<head>
  <title>Todos</title>

  <link rel="stylesheet" href="styles/style.css" type="text/css" charset="utf-8">

  <script src="scripts/vendor/require.js" type="text/javascript" data-main="scripts/main" ></script>

  <!-- switch to underscore templating, handlebars or something else soon -->
  <script type="text/x-jquery-tmpl" id="taskTemplate">
    <div class="item {{if done}}done{{/if}}">

      <div class="view" title="Double click to edit...">
        <input type="checkbox" {{if done}}checked="checked"{{/if}}>
        <span>${name}</span><span class="special"></span> <a class="destroy"></a>
      </div>

      <div class="edit">
        <input type="text" value="${name}">
      </div>
    </div>
  </script>

</head>
<body>
  <div id="views">
    <div id="tasks">
      <h1>Yeoman Todos</h1>

      <form>
        <input type="text" placeholder="What needs to be done?">
      </form>

      <div class="items"></div>

      <div class="alert alert-info">
          <small><strong>Welcome!</strong> Create a todo or double-click to edit an existing one</small>
      </div>

      <footer>
        <a class="clear">Clear completed</a>
        <div class="count"><span class="countVal"></span> left</div>
      </footer>
    </div>
    <div id="audio"></div>
  </div>
</body>
</html>
