<div ng-if='loading' class='center_all'>
	<md-progress-circular md-mode="indeterminate"></md-progress-circular>
</div>


<div ng-if="readOnly && !loading">
	<md-card style='position:fixed;top:11%;right:15px;width:20%'  layout-padding>
		<h1>Submitter</h1>
		<div layout="row">
			<div flex="30"> <!-- Avatar -->
	            <img ng-src="{{group.avatar_url}}" alt="" style="max-width:auto;padding:5px" ng-if='task.isPersonal'>
	            <img ng-src="{{group.logo_url}}" alt="" style="max-width:auto;padding:5px" ng-if='!task.isPersonal'>
	        </div>
	        <div class="user-data" layout="column" flex>
	            <div ng-if='task.isPersonal'>
	                Student Name: {{group.name}}
	            </div>
	            <div ng-if='!task.isPersonal'>
	                Project Name: {{group.projectName}}
	            </div>
	            <div>
	            	Grade : {{task.grade.grade}}
	            </div>
	            <div>
	            	<md-slider flex class="md-primary" md-discrete ng-model="task.grade.grade" step="1" min="1" max="100" aria-label="rating" ng-disabled="!isMaster">
	      			</md-slider>
	            </div>
	            <div layout="row" ng-if='isMaster'>
	            	<div class="spacer"></div>
	            	<div>
	            		<md-button ng-click='submitGrade($event)'>Submit</md-button>
	            	</div>
	            </div>
	        </div>
		</div>
        

    </md-card>
</div>

<div layout='row' ng-if='!loading'>
	<div flex='10'></div>
	<div layout="coulumn" flex="60">
		<md-card layout-padding style="width:100%">
			<h1><i class="fa fa-clipboard"></i> {{task.title}}</h1>
			<h4>Due At: {{ task.date }}</h4>
			<p>{{ dueTimeFromNow }}</p>
			<p style="white-space: pre-wrap;">{{task.description}}</p>
			<p>{{(task.isPersonal) ? "Personal" : "Project"}} Task</p>

			<!-- <md-divider></md-divider> -->

			<div ng-repeat="component in task.components">
				<md-card layout-padding>
					<div ng-if="component.isMandatory && !(component.value && component.value != '')">
						<font color="red">
							<i class="fa fa-certificate"></i>
						</font>
					</div>
					<!-- if text box -->
					<div ng-if="component.type == 'textbox'">
						<md-input-container>
							<label>{{component.label}}</label>
							<input ng-model="component.value" ng-disabled="readOnly">
	    				</md-input-container>
					</div>
					<!-- if Text Area -->
					<div ng-if="component.type == 'textarea'">
						<md-input-container>
							<label>{{component.label}}</label>
							<textarea ng-model="component.value" ng-disabled="readOnly"></textarea>
	    				</md-input-container>
					</div>
					<!-- if Checkbox -->
					<div ng-if="component.type == 'checkbox'">
						<md-checkbox ng-model="component.value" aria-label="Checkbox 1" ng-disabled="readOnly">
				          {{ component.label}}
				        </md-checkbox>
					</div>
					<!-- if Link -->
					<div ng-if="component.type == 'link'" layout="column" ng-init="initLinkComp(component)" style="width: 100%" layout-align="center">
						<md-button ng-href="{{component.href}}" style="width: 100%" target="_blank">
							<i class="fa fa-link"></i> {{component.title}}
						</md-button>
					</div>
					<!-- if RadioButtons -->
					<div ng-if="component.type == 'radiobuttons'" ng-init="initRadioButtonsComp(component)">
						{{component.title}}
						<md-radio-group ng-model="component.value" ng-change="RB(component)" ng-disabled="readOnly">
					      <md-radio-button ng-repeat="option in component.values" value="{{option.text}}" class="md-primary">{{option.text}}</md-radio-button>
	    				</md-radio-group>
					</div>
				</md-card>
			</div>
			<div layout='row' ng-if='!readOnly'>
				<div class='spacer'></div>
				<div style='position:relative;'>
					<md-button class='md-primary' ng-click='submitTask($event)'>Submit</md-button>	
				</div>	
			</div>
		</md-card>
	</div>

	<div flex='20'></div>


</div>

		