{% extends "base.html" %} 
{% load i18n %} 
{% load display_functions %} 
{% if course_list %}
	{% block extra_scripts %}
	<script type='text/javascript' src='https://www.google.com/jsapi'></script>
	<script type="text/javascript">
	
		// Load the Visualization API and the piechart package.
		google.load('visualization', '1.0', {'packages':['corechart']});
	
		// Set a callback to run when the Google Visualization API is loaded.
		google.setOnLoadCallback(drawChart);
		function drawChart() {
	
			{% for course in course_list %}
				var data = new google.visualization.DataTable();
				data.addColumn('string', "{% trans 'Date' %}");
				data.addColumn('number', "{% trans 'Total' %}");
				
				data.addRows( {{ course.activity|length }} );
				
				{% for date,count in course.activity %}
					data.setValue({{ forloop.counter0 }},0,'{{ date }}');
					data.setValue({{ forloop.counter0 }},1,{{ count }});
				{% endfor %}
		
		        var chart = new google.visualization.AreaChart(document.getElementById('activity_chart_div_{{course.id}}'));
		        chart.draw(data, {	width: 100, 
		                			height: 50,
		                			vAxis: {minValue:0},
		                			pointSize:0,
		                			chartArea: {left:0,top:0,width:"100%",height:"100%"},
		                			backgroundColor: 'transparent',
		                			legend: 'none',
		                			series: [{areaOpacity:0.2}]
		                			});
	        {% endfor %}
	      }
	</script>
	{% endblock extra_scripts %}
{% endif %} 
{% block content %}

<h2>{% trans 'courses' %}</h2>
{% if course_list %}

	 <div class="table-responsive">
         <table class="table table-striped-expandable">
         	 <thead>
                <tr>
                  <th>{% trans 'table_header_course' %}</th>
                  <th>{% trans 'table_header_course_downloads' %}</th>
                  <th>{% trans 'table_header_activity_graph' %}</th>
                </tr>
              </thead>
              <tbody>
	{% for course in course_list %}
		<tr>
				<td><a href="{% url 'oppia_recent_activity' course.id %}">
				<strong>{{ course.title|title_lang:LANGUAGE_CODE }}</strong></a>
				{% if course.is_draft %}
					- <i>{% trans 'draft' %}</i>
				{% endif %}	
				{% if course.is_archived %}
					- <i>{% trans 'archived' %}</i>
				{% endif %}<br/>
				<small>{% trans 'Tags:' %} {{ course.get_tags}}</small></td>
				<td>{{course.no_downloads}} downloads by {{course.no_distinct_downloads}} users</td>
				<td><div id="activity_chart_div_{{course.id}}" class="graph">{% trans 'graph_generating'%}</div></td>

			</tr>
	{% endfor %}
			</tbody>
 		</table>
	</div>
{% else %}
	{% url 'oppia_upload' as url_upload %}
	{% blocktrans %}
		<p>You don't yet have any courses uploaded, why not <a href="{{ url_upload }}">upload one now</a>?</p>
	{% endblocktrans %}
{% endif %}

{% endblock %}
