<md-content layout-padding>
	<h1>
		<i class="fa fa-clipboard"></i> Tasks
	</h1>
	<div ng-if='loading'>
		
	</div>

	<div ng-if='!loading'>
		<md-content layout-padding>
			<md-tabs md-dynamic-height md-border-bottom>
		      <md-tab label="{{class.courseName}}" ng-repeat="class in tasks">
		        <md-content class="md-padding">
		          <h1 class="md-display-2">{{class.courseName}} Tasks</h1>
		          
		          <div>
						<div layout='row' layout-align="center center">
							<div class="spacer"></div>
							<div>
								<h2>Personal</h2>
							</div>
							<div class="spacer"></div>
							<div>
								<h2>Project</h2>
							</div>
							<div class="spacer"></div>
						</div>


			          	<div layout='row' style="width: 100%">
			          		<div layout='row' style="width: 100%">
			          			<div class='Personal' layout='row' flex='50'>
			          				<div>
										<h3>Task Name</h3>
									</div>
									<div class='spacer'></div>
									<div>
										 <h3>
										 	Submitters
										 </h3>
									 </div>
			          			</div>
			          			<div style='padding: 0px 5px 0px 5px; margin-top: auto; margin-bottom: auto'>
			          				|
			          			</div>
			          			<div class='Project' layout='row' flex='50'>
			          				<div>
										<h3>Task Name</h3>
									</div>
									<div class='spacer'></div>
									<div>
										 <h3>
										 	Submitters
										 </h3>
									 </div>
			          			</div>
			          		</div>
		          		
			          	</div>

			          	<div layout='row' style='width:100%'>
							<div layout='row' style='width:100%'>
								<div class="Personal" style='width:100%' >
									<div layout='column' ng-repeat="personalTask in class.PersonalTasks">
										<div>
											<md-button style='width: 100%' layout='row' ng-click="taskClicked(personalTask, class.courseId, true, class.master_id, $event)">
													<div>
														{{personalTask.title}}
													</div>
													<div class='spacer'></div>
													<div ng-if='user.id === class.master_id'> {{personalTask.submitted.done}} / {{personalTask.submitted.total}} </div>
													<div ng-if='user.id !== class.master_id'> {{personalTask.grade.grade || "Not Yet Reviewed"}} </div>
												</div>
											</md-button>
											
										</div>	
									</div>
								</div>
								<div style='padding: 0px 5px 0px 5px; margin-top: auto; margin-bottom: auto'>
			          			</div>
								<div class="Project" style='width:100%'>
									<div layout='column' ng-repeat="projectTask in class.projectTasks">
										
										<md-button style='width: 100%' layout='row' ng-click="taskClicked(projectTask, class.courseId, false, class.master_id, $event)">
												<div>
													{{projectTask.title}}
												</div>
												<div class='spacer'></div>
												<div ng-if='user.id === class.master_id'> {{projectTask.submitted.done}} / {{projectTask.submitted.total}} </div>
												<div ng-if='user.id !== class.master_id'> {{projectTask.grade.grade || "Not Yet Reviewed"}} </div>
											</div>
										</md-button>
									</div>
								</div>
							</div>
						</div>
					
		          	
		          </div>

		        </md-content>
		      </md-tab>
	      </md-tabs>
	      <div style='position:fixed;bottom:15px;right:15px'>
	      	<md-button class="md-fab md-primary" ng-click='createNewTask()'>
	      	<md-tooltip md-direction='top' >
	          Create New Task
	        </md-tooltip>
				<i class="fa fa-plus"></i>
	      	</md-button>
	      </div>
		</md-content>
	</div>
</md-content>