<div class = "tasks">
	<md-content layout-padding layout-margin>
		<h1 style="margin-left:15px"><i class="fa fa-file-text-o"></i> Tasks</h1>
			<div flex>
				<md-card>
					<md-content class="md-padding">
						<md-tabs md-dynamic-height md-border-bottom>
							<md-tab label="" <i class="fa fa-check"></i>
								<md-content class = "tabDesign">
									<table style="width:100%;" border = "1">
										<tr>
											<th style = "width:20%">Task Name</th>
											<th style = "width:20%">Date</th>
											<th style = "width:20%">Grade</th>
										</tr>
									</table>
								</md-content>
							</md-tab>
							<md-tab label="Delayed">
								<md-content class="md-padding">
									<h1 class="md-display-2">Delayed</h1>
									<p>Delayed...</p>
								</md-content>
							</md-tab>
							<md-tab label="Not Submitted">
								<md-content class="md-padding">
									<md-card ng-repeat = "task in lecturerTasks"> 
										<md-button ng-click="gotoTask(task.id)">
											{{task.title}}
										</md-button>

									</md-card>
									
								</md-content>
							</md-tab>
							<div ng-if = "user.isLecturer">
								<md-button ng-click="createTaskClicked()" ng class="md-raised md-primary">Create Task</md-button>
							</div>
						</md-tabs>
					</md-content>
				</md-card>
			</div>

			<!-- Should Be In Table List -->
			<div class = "allTasksShow" flex = "99" layout = "row" ng-repeat = "t in threeSizedArray" value = "{{t}}" layout-padding>
				<div flex = "32" layout = "column" ng-repeat = "task in t" value = "{{task}}">
					<md-button ng-click = "goToTask(task.id)" style="width:32%; height:32%;" flex="32" layout-padding class = "md-raised">
						<!-- <img src="{{campus.avatar_url}}" style = "width:14%; height:auto;"> -->
						{{task.title}}
					</md-button>
				</div>
			</div>
			<!-- Should Be In Table List -->
		</div>
	</md-content>
</div>