<div class="gradeChart">
	<!--<h5 class="pageHeading">Grade</h5>-->
	<div class="col-sm-7 px-0">
		<div class="program_detail_header container">
		  <ul class="nav nav-tabs" role="tablist" id="tabs-course-format">
			<li class="active nav-item">
				<a href="grades.php" class="font-14 py-0 px-1" role="tab" aria-expanded="true">
				  Grades 
				</a>
			</li>
			<!--<li class=" nav-item">
				<a href="charts.php" class=" active font-14 p-0 px-1" role="tab" aria-expanded="true">
				Attendance
				</a>
			</li>-->
		  </ul>
	  </div>
	  </div>
	<div class='chartContent'>
        
		<div class='assignmentChart chartDiv'>
			<h5 class='chartTitle'> Assignment </h5>
			<h6 class='chartSubTitle'> Your performance for all the assignments </h6>
            <div class='displayOtherChart'>	
				<div class='otherChartContent'>
					<div><canvas id='gradeAssignment'></canvas></div>
					<div class='chartData'>	
									
						<h3>{{#assignment_data}} {{submitted}}/<span class="showTotal">{{assigned}}</span>{{/assignment_data}}</h3>
						<h6> Assignment submitted </h6>
						<h6 class='attSince'> <span class="attDot"></span>SUBMISSION RATE </h6>				
					</div>	
				</div>					
			</div>			
		</div>
		<div class='quizChart chartDiv'>
			<h5 class='chartTitle'> Quiz </h5>
			<h6 class='chartSubTitle'> Your performance for all the quizzes </h6>
			<div class='displayOtherChart'>	
				<div class='otherChartContent'>
					<div><canvas id='gradeQuiz'></canvas></div>
					<div class='chartData'>				
						<h3> {{#quiz_data}}{{submitted}}/<span class="showTotal">{{assigned}}</span>{{/quiz_data}} </h3>
						<h6> Quiz submitted </h6>
						<h6 class='attSince'> <span class="attDot"></span>SUBMISSION RATE </h6>				
					</div>	
				</div>					
			</div>
		</div>
		<div class='averageChart chartDiv' style="visibility: hidden;">
			<h5 class='chartTitle'> Average grade </h5>
			<h6 class='chartSubTitle'> Average score achieved across all assignments and quizzes. </h6>
            <div class='displayOtherChart'>	
				<div class='otherChartContent'>
					<div><canvas id='gradeAverage'></canvas></div>
					<div class='chartData'>				
						<h3> 11/<span class="showTotal">20</span> </h3>
						<h6> Grade in 11/20 courses </h6>
						<h6 class='attSince'> <span class="attDot"></span>80% Class average grade </h6>				
					</div>	
				</div>					
			</div>			
		</div>
	</div>
</div>