<!DOCTYPE html>
<html data-ng-app="todoApp">

<head>
    <title>TO DO List</title>
    <link rel="stylesheet" href="../libs/bootstrap/dist/css/bootstrap.min.css">
    <script src="../libs/angular-1.2.29/angular.min.js"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="ToDoCtrl">

    <header class="page-header container">
        <h1>
            To Do List
            <span class="label" ng-class="warningClass()" ng-hide="incompleteCount() == 0">
                {{incompleteCount()}}
            </span>
        </h1>
    </header>

    <div class="panel container">
        <div class="input-group">
            <input class="form-control" ng-model="actionText" />
            <span class="input-group-btn">
                <button class="btn btn-default" ng-click="addNewItem(actionText)">
                    Add
                </button>
            </span>
        </div>

        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Description</th>
                    <th>Done</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in items | checkedItems:showComplete | orderBy:'action'">
                    <td>{{item.action}}</td>
                    <td>
                        <input type="checkbox" ng-model="item.done" />
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="checkbox-inline">
            <label>
                <input type="checkbox" ng_model="showComplete"> Show Complete</label>
        </div>
    </div>

</body>

</html>
