<html ng-app="habitsApp">
<head>
  <meta charset="utf-8">
  <title>Habits</title>
  <link rel="stylesheet" href="/static/components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/template.css">
  <link rel="stylesheet" href="/static/css/app.css">
  <!-- <script src="/static/components/angular/angular.js"></script> -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="/static/js/controllers.js"></script>
</head>
<body ng-controller="HabitsCtrl">
    <div class="container">
        <div class="jumbotron">
            <h1>Habits</h1>
            <table class="dates">
                <tr class="date-row" ng-repeat="date in dates">
                    <td class="date-title" id="{{ date.slug }}">{{ date.name }}</td>
                    <td ng-repeat-start="(slug, entry) in habits[date.slug]"
                    class="habit" id="{{ slug }}"
                    ng-class="{true: 'completed', false:'uncompleted'}[entry.value]"
                    ng-click="toggleEntry(date.slug, slug)">
                      <span class="habit-name">{{ entry.name }}</span>
                    </td>
                    <td ng-repeat-end></td>
                </tr>
            </table>
            <h3>Configuration</h3>
            <table class="configuration">
              <tr>
                <td>Add a habit:&nbsp;&nbsp;&nbsp;</td>
                <td><input type="text" ng-model="newHabitName">
                <button type="button" ng-click="createHabit()">Add</button></td>
              </tr>
              <tr>
                <td>Delete a habit (by name):&nbsp;&nbsp;&nbsp;</td>
                <td><input type="text" ng-model="deleteHabitName">
                <button type="button">Remove</button></td>
              </tr>
              <tr>
                <td><a href="/api/entries/export">Export entries as JSON</a></td>
              </tr>
        </div>
    </div>
</body>
</html>