{% load static %}
<!DOCTYPE html>
<html lang="en" ng-app="tweeterApp">
<head>
  <meta charset="UTF-8">
  <title>Tweeter</title>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="{% static 'tweeter/css/style.css' %}"/>
  <link rel="stylesheet" type="text/css" href="{% static 'tweeter/css/menu.css' %}"/>
</head>
<body>
<h1 class="leader-h">Tweeter</h1>

<div id='cssmenu'>
  <ul>
    <li ui-sref-active="active"><a ui-sref="tweets"><span>All Tweets</span></a></li>
    <li ui-sref-active="active"><a ui-sref="my-tweets({ userId:AuthUser})"> <span>My Tweets</span></a></li>
    <li ui-sref-active="active"><a ui-sref="profile"'><span>Profile</span></a></li>
  </ul>
</div>
<h3 class="user-h">logged in as: {{ user.get_username }}</h3>

<div ui-view></div>

<script type="text/javascript" src="{% static 'tweeter/lib/jquery-2.1.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'tweeter/lib/angular.min.js' %}"></script>
<script type="text/javascript" src="{% static 'tweeter/lib/angular-resource.min.js' %}"></script>
<script type="text/javascript" src="{% static 'tweeter/lib/angular-route.min.js' %}"></script>
<script type="text/javascript" src="{% static 'tweeter/lib/angular-ui-router.min.js' %}"></script>
<script type="text/javascript" src="{% static 'tweeter/js/app.js' %}"></script>
<script type="text/javascript" src="{% static 'tweeter/js/services.js' %}"></script>
<script type="text/javascript" src="{% static 'tweeter/js/controllers.js' %}"></script>


<script type="text/javascript">
  // This allows you to access the current user id in your angular controllers.
  angular
      .module('tweeterApp.services')
      .factory('AuthUser', function() {
        return {
          id: "{{ user.id|default:''}}",
        }
      });
</script>
</body>
</html>

