<div class = "myProjects">
	<h1 layout-margin style="margin-left:15px"><i class="fa fa-cube"></i> {{user.name}}'s projects</h1>
	<div ng-if="loadingData" layout-paddig layout-margin class="loader">
		<md-progress-circular md-mode="indeterminate"></md-progress-circular>
	</div>
	<div ng-if = "myProjectsEmpty && !loadingData" layout-padding layout-margin>
		You Are Not Related To Any Project.
	</div>
	<div ng-if="!myProjectsEmpty">
		<md-card class="cardAllProjects">	
			<div flex = "99" layout = "row" ng-repeat = "t in arrayHolder" value = "{{t}}" layout-padding>
				<div flex = "32" layout = "column" ng-repeat = "project in t" value = "{{project}}" layout-padding>
					<div ng-if="t.length != 1"> 
						<md-button ng-click="goToProject(project.id)" style="width:100%; height:32%;" layout-padding class = "md-raised">
							<md-card-content>
								{{project.projectName}}
								<div layout-align="center center" style=" width:70%;">
									<canvas layout-padding layout-margin id="project.projectName" class="chart chart-bar" data="project.info.stats.macro.data" labels="project.info.stats.macro.labels"></canvas> 
								</div>
							</md-card-content>
						</md-button>
					</div>
					<div ng-if="t.length == 1">
						<md-button ng-click = "goToProject(project.id)" style="width:32%; height:32%;" layout-padding class = "md-raised">
							<md-card style="width:97%;height:97%">
				      			<md-card-content>
						        	{{project.projectName}}
						        	<canvas layout-padding layout-margin id="project.projectName" class="chart chart-bar" data="project.info.stats.macro.data"
							labels="project.info.stats.macro.labels"></canvas> 
				      			</md-card-content>
	    					</md-card>
						</md-button>
					</div>
					<div class="spacer"></div>
				</div>
			</div>
		</md-card>
	</div>
</div>