
<html lang="en" ng-app="SeHub">
<head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="templates/css/theme.css">

    <!--charts css-->
    <link rel="stylesheet" href="templates/js/libs/angular-chart.js-0.7.2/dist/angular-chart.css"/>

    <!-- DatePicker CSS -->
    <link rel="stylesheet" href="templates/js/libs/date-picker/css/angular-datepicker.css">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1" />
</head>

<body layout="column" ng-controller="mainController">
<md-toolbar layout="row">
    <button ng-click="toggleSidenav('left')" hide-gt-sm class="menuBtn">
        <span class="visually-hidden">Menu</span>
    </button>
    <h1 class="md-toolbar-tools" layout-align-gt-sm="center">SE Hub</h1>
    <!-- fill up the space between left and right area -->
      <span flex></span>
      
</md-toolbar>
<div layout="row" flex>
    <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
        <md-content class="se-menu">
            <div ng-if="!isInRegisterMode">
                <div class="user-box" layout="row" layout-padding>
                    <div flex="30"> <!-- Avatar -->
                        <img ng-src="{{user.avatar_url}}" alt="">
                    </div>
                    <div class="user-data" layout="column" flex>
                        <div>
                            {{user.name}}
                        </div>
                        <div>
                            {{user.email}}
                        </div>
                    </div>
                </div>
                
                    <ul>
                        <a ng-repeat="item in menuItems" ng-click="menuClicked(item)">
                            <li ng-class="[item.style]"><i ng-class="item.icon"></i> {{item.title}}</li>
                            <md-divider ng-if="!$last"></md-divider>
                        </a>
                    </ul>
            </div>
            <div ng-if="isInRegisterMode"> <!-- User Needs To Register -->
                <md-card layout-padding>
                    <div layout=-"row">
                        <div class="spacer"></div>
                        <div>
                            <h3>
                                <i class="fa fa-exclamation-triangle"></i>
                            </h3>
                        </div>
                        <div class="spacer"></div>
                    </div>
                    <p>
                        You Are Currently Not Assigned To Any Campus Nor Course.
                        Please Fill The Form On your Right Hand Side, and Confirm Your Academic E-Mail.
                    </p>
                </md-card>
            </div>
        </md-content>
    </md-sidenav>
    <div layout="column" flex id="content">
    <ng-view></ng-view>
    </div>
</div>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-cookies.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>

<!-- Angular App -->
<script src="templates/js/app.js"></script>

<!--Angular Libs (Third Party)-->
<!--charts-->
<!--docs: http://jtblin.github.io/angular-chart.js/-->
<script src="templates/js/libs/angular-chart.js-0.7.2/dist/chart.js"></script>
<script src="templates/js/libs/angular-chart.js-0.7.2/dist/angular-chart.js"></script>
<!-- Date-Picker -->
<!-- docs: https://github.com/alongubkin/angular-datepicker/ -->
<script src="templates/js/libs/date-picker/js/angular-datepicker.js"></script>


<!-- Moments - Date Formmaing Help -->
<!-- Docs: http://momentjs.com/ -->
<script src="templates/js/libs/moments.js"></script>



<!-- Services -->
<script src="templates/js/services/apiService.js"></script>
<script src="templates/js/services/dataService.js"></script>

<!-- Controllers -->
<script src="templates/js/controllers/mainController.js"></script>
<script src="templates/js/controllers/homeController.js"></script>
<script src="templates/js/controllers/profileController.js"></script>
<script src="templates/js/controllers/registerController.js"></script>
<script src="templates/js/controllers/tasksController.js"></script>
<script src="templates/js/controllers/taskController.js"></script>
<script src="templates/js/controllers/myClassesController.js"></script>
<script src="templates/js/controllers/newTasksController.js"></script>
<script src="templates/js/controllers/classController.js"></script>
<script src="templates/js/controllers/newCourseController.js"></script>
<script src="templates/js/controllers/campusesController.js"></script>
<script src="templates/js/controllers/myProjectsController.js"></script>
<script src="templates/js/controllers/projectController.js"></script>

</body>
</html>