<html class="no-js" lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">

<head>
  <title>Mapper & AngularJS</title>
  <link rel="stylesheet" href="css/style.css" type="text/css"/>
  <script src="js/libs/modernizr-2.0.6.min.js" type="text/javascript">
  </script>
</head>

<body>

<div id="container">
  <div id="main" role="main">
    <!-- Todo App Interface-->
    <div id="todoapp">
      <div class="title">
        <h1>AngularJS Todos</h1>
      </div>

      <div class="content" ng-controller="TodoListCtrl">

        <div id="create-todo">
          <input id="new-todo" placeholder="What needs to be done?" type="text" on-enter="create()"
                 ng-model="text"/>
          <span style="display:none;" class="ui-tooltip-top">Press Enter to save this task</span>
        </div>

        <div id="todos">
          <ul id="todo-list">
            <li class="{{todo.editing && 'editing'}}" ng-repeat="todo in todos | orderBy:'id'">
              <div class="todo {{todo.done | isTruthy:'done'}}">
                <div class="display" ng-dblclick="editItem(todo)" ng-hide="todo.editing">
                  <!-- why does it need ng-model and ng-checked -->
                  <input class="check" type="checkbox" ng-model="todo.done" ng-checked="todo.done"
                         ng-change="updateItemDone(todo)"/>

                  <div class="todo-text">{{todo.text}}</div>

                  <span class="todo-destroy" ng-click="deleteItem(todo)"></span>
                </div>
                <div class="edit"><input type="text" ng-model="todo.text" class="todo-input" on-enter="updateItemText(todo)"/></div>
              </div>
            </li>
          </ul>
        </div>

        <div id="todo-stats">
          <div ng-show="remaining()">
            <span class="todo-count">
              <span class="number">{{remaining()}}</span>
              <span class="word">{{remaining() == 1 && 'item' || 'items' }}</span> left.
            </span>
          </div>

          <div ng-show="completed()">
            <span class="todo-clear"><a href="#" ng-click="deleteCompleted()"> Clear
              <span class="number-done">{{completed()}}</span> completed
              <span class="word-done">{{completed() == 1 && 'item' || 'items'}}</span></a>
            </span>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--<script src="js/libs/underscore.js" type="text/javascript"></script>-->
<script defer="defer" src="js/plugins.js" type="text/javascript"></script>

<script src="//code.angularjs.org/1.1.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.1.1/angular-resource.min.js"></script>
<script defer="defer" src="js/libs/underscore-min.js" type="text/javascript"></script>
<script defer="defer" src="js/angular/app.js" type="text/javascript"></script>

</body>
</html>
