<!DOCTYPE html>
<html ng-app>
<head>
    <script src="scripts/angular.js"></script>
    <script src="scripts/controller.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <div ng-controller="MainController">
        <div>
            <h1>{{readingList.Name}}'s Reading List</h1>
        </div>
        <br/>
        <div>
            <input type="text" ng-model="titleFilter" placeholder="Enter Title to filter" />
        </div>
        <br />
        <div>
            <input type="text" ng-model="newTitle" placeholder="Enter Title To Add" required >
            <input type="button" ng-click="addBook()" value="Add" class="btn" />
        </div>
        <br/>
        <div>
            <table class="table table-bordered table-condensed" >
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>IsComplete</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="book in readingList.Books | filter:titleFilter">
                        <td>{{book.Title | uppercase}}</td>
                        <td>{{book.isComplete}}</td>
                        <td><input type="checkbox" ng-model="book.isComplete" /></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
