{% extends  'home.html' %}
<!-- <-- <ul>
	{% for val in table %}
	<li>{{ val }}</li>
	{% endfor %}
</ul> -->
{% block content  %}

<!-- {{data}} -->
{% if load %}

	<div class="container">
		<table class="table table-borderless text-center" align="center" style="margin: 0px auto;">
			<thead>
			<tr>
				<th scope="col">COURSE</th>
				<th scope="col">PERCENTAGE</th>
				<th scope="col">REMARK</th>
			</tr>
			</thead>
			<tbody>
				{% for key in data %}
				<tr>
					<td>{{ key['name'] }}</td>
					<td>{{key['percentage_of_attendance']}}</td>
					{% if key.get("class_to_bunk",0) != 0 %}
						<td>Take leave : {{key.get("class_to_bunk",0)}}</td>
					{% else %}
						<td>Attend : {{key.get("class_to_attend",0)}}</td>
					{% endif %}
				</tr>
				{% endfor %}
			</tbody>
		</table>
	</div>
	<br>
	<br>

	<hr style="width:50%;height:2px;border: width 6px;">
	<center class="container">
		<h3 style="color:blue;font-family: 'Bebas Neue', cursive;">CGPA upto {{ cgpa.get("lastest_sem") }} sem : {{ cgpa.get("latest_sem_cgpa") }}</h5>
	</center>
	<hr style="width:50%;height:2px;border: width 6px;">



{% for key in data %}
<br>
<center>
	<h1 style="font-family: 'Bebas Neue', cursive;">Course Code - {{ key['name'] }}</h1>
	{% if time_table.get(key['name'],"") != "" %}
		<h3 style="font-family: 'Bebas Neue', cursive;">{{ time_table.get(key['name'],"") }}</h3>
	{% endif %}

	<hr style="width:50%;height:2px;border: width 4px;">
	<h4 style="font-family: 'Bebas Neue', cursive;">Updated date : {{key['attendance_to']}}</h4>

	<h4 style="font-family: 'Bebas Neue', cursive;">Total Hours : {{key['total_hours']}}</h4>
	<h4 style="font-family: 'Bebas Neue', cursive;">Total Present : {{key['total_present']}}</h4>
	<h4 style="font-family: 'Bebas Neue', cursive;">Percentage of Attendance : {{key['percentage_of_attendance']}}</h4>
	{% if key.get("class_to_bunk",0) != 0 %}
	<h2 style="color:green;font-family: 'Bebas Neue', cursive;">Class To Take leave : {{key.get("class_to_bunk",0)}} 👍
	</h2>
	{% else %}
	<h2 style="color:red;font-family: 'Bebas Neue', cursive;">Class To Attend : {{key.get("class_to_attend",0)}} 👎</h2>
	{% endif %}


</center>

<br>

{% endfor %}
<br>
<hr style="width:100%;height:4px;border: width 8px;">
<!-- 
<center>
	<h1 style="font-family: 'Press Start 2P', cursive;">
		Stats for nerds
	</h1>
</center>

<center>
	<div id='chart' class='chart' ”></div>
</center>
<center>
	<div id='chart2' class='chart' ”></div>
</center>
<center>
	<div id='chart3' class='chart' ”></div>
</center>
<center>
	<div id='chart4' class='chart' ”></div>
</center> -->

<center>
	<h4 style="font-family: 'Press Start 2P', cursive;">
		App in development!!
	</h4>
</center>

<br>
<br>


<!-- <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<script type='text/javascript'>
	var graphs = {{ graphJSON | safe}};
	Plotly.plot('chart', graphs, {});

	var graphs = {{ graphJSON2 | safe}};
	Plotly.plot('chart2', graphs, {});

	var graphs = {{ graphJSON3 | safe}};
	Plotly.plot('chart3', graphs, {});

	var graphs = {{ graphJSON4 | safe}};
	Plotly.plot('chart4', graphs, {});


</script> -->


{% else %}

<script>
	alert('{{ text }}');
</script>

{% endif %}
{% endblock %}