<!doctype html>

<html>


<head>
  <title>Nutrients Per Calorie</title>
  <meta charset="utf-8">
  <link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <div ng-app="nutrients-per-calorie">

    <div ng-controller="MainCtrl" id="wrapper" ng-cloak>
    
      <div id="header-container">
        <h1 id="title">Nutrients Per Calorie</h1>
        <a id="help-link" href="" 
            target="_blank" ng-show="foodData.loaded">
          Video walkthrough (TODO!)
        </a>
        <div id="nav-container">
          <h3 id="loading-message" ng-show="!foodData.loaded">Loading</h3>
          <ul class="tabs" ng-show="foodData.loaded">
            <li ng-repeat="navLink in navLinks" ng-class="{active: navLinks.isActive(navLink)}">
              <a href="{{navLink.getPath()}}">{{navLink.text}}</a>
            </li>
          </ul>
        </div>
      </div>

      <ng-view ng-show="foodData.loaded"></ng-view>

    </div>
    
  </div>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.12/d3.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
  <script src="dist/app.js"></script>

</body>

</html>