{% load staticfiles %}
<html>
<head>
	<link rel="stylesheet" href="{% static "libs/angular-material/angular-material.min.css" %}">
	<link rel="stylesheet" href="{% static "css/reports.css" %}">
</head>
<body ng-app="dashboard" ng-controller="ReportsController" ng-cloak>

	{% include "reports_header.html" %}
	<section layout="row"  layout-sm="column" layout-xs="column" layout-align="center" layout-wrap layout-margin class="report-area">			
			{% for chart in data%}
			<md-whiteframe  class="card md-whiteframe-4dp" flex="45" flex-sm="100" flex-xs="100" layout="column" layout-wrap>
			<md-toolbar class="toolbar" layout="column" layout-padding>
			<span flex >Chart - {{chart.chart_id}} Query - {{chart.query_id}}</span>
			</md-toolbar>
			{% if chart.data.0.chart_type == 'highchart'%}
			<high-dash update="5000" id="{{chart.chart_id}}" chart = "{{chart.chart_id}}" query = "{{chart.query_id}}" type="{{chart.data.chart_type}}" ></high-dash>
			{% else %}
			<hi-dash update="5000" chart = "{{chart.chart_id}}" query = "{{chart.query_id}}" type="{{chart.data.chart_type}}" options="{width: '100%', height: 300, is3D: true, margin: 2}"></hi-dash>
			{% endif %}
			
			</md-whiteframe>
			{% endfor %}	
	</section>
	<script src="{% static "libs/angular/angular.min.js"  %}"></script>
	<script src="{% static "libs/angular-animate/angular-animate.min.js"  %}"></script>
	<script src="{% static "libs/angular-aria/angular-aria.min.js"  %}"></script>
	<script src="{% static "libs/angular-messages/angular-messages.min.js"  %}"></script>
	<script src="{% static "libs/angular-material/angular-material.min.js"  %}"></script>
	<script src="{% static "libs/google-chart/ng-google-chart.min.js"  %}"></script>
	<script src="{% static "js/hidash-app.js"  %}"></script>
	<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
	
	<script src="{% static "js/hidash.js"  %}"></script>
	
</body>
</html>
