{% load i18n l10n %}
{% get_current_language as LANGUAGE_CODE %}

<style type="text/css" media="screen">
	.box {
		padding-bottom: 15px !important;
	}

	#{{view_name}}_type_data {
		float: left;
		margin-top: 8px;
		font-size: 0.85em;
	}
	#{{view_name}}_table_container {
		float: left;
		overflow-y: auto;
		overflow-x: hidden;
		max-height: 130px;
		border: 2px solid grey;
		margin: 7px 5px 0px 0px;
	}
	#{{view_name}}_indicators_table {
		margin-bottom: 2px;
	}
	#titles_table {
		border-bottom: 1px solid #DDDDDD;
	}
	#{{view_name}}_indicators_table th, #{{view_name}}_indicators_table td {
		padding: 3px;
		width: 90px;
		text-align: center;
	}
	#first_col {
		width: 200px !important;
	}
	

	#{{view_name}}_table_container tr:nth-child(even) {background: #888}
	#{{view_name}}_table_container tr:nth-child(odd) {background: #555}
	
	#{{view_name}}_type_data label {
		width: 64px;
	}
</style>

<div id="{{view_name}}_table_container" class="grid_8">
	<table id="{{view_name}}_indicators_table">
		<tbody>
			{% for k,v in table_dict.items%}
				{% ifequal k 'titles_table'%}
					<tr id="{{k}}">
					{% for l in v%}
						{% ifequal forloop.counter 1%}
							<th id='first_col'>{{l}}</th>
						{% else %}
							<th>{{l}}</th>	
						{% endifequal %}
					{% endfor %}
					</tr>
				{% else %}
					{% ifequal k 'series'%}
						{% for m,t in v.items%}
							<tr id="{{m}}">
								{% for j in t%}
									<td>{{j}}</td>
								{% endfor %}
							</tr>
						{% endfor %}
					{% endifequal %}
				{% endifequal %}
			{% endfor %}
		</tbody>
	</table>
</div>

<script type="text/javascript">

	function reloadTableParam(view,table_url,param)
	{
		$.ajax({
			url: table_url+'?'+param,
			method: 'GET',
			dataType: 'json',
			success: function(response) {
				titles_table= response['titles_table']
				v_series=response['series']
				update_table(titles_table,v_series);
			}
		});
	}

	function update_table(titles_table,v_series){

		$('#{{view_name}}_indicators_table').html('');
		table_html = "<tr id='titles_table'><th id='first_col'>"+  titles_table[0] + "</th>";
		for (i=1;i<titles_table.length;i++)
		{
			table_html = table_html +  '<th>' + titles_table[i] + '</th>';
		}
		table_html = table_html + '</tr>';

		for (key in v_series){
			table_html = table_html +"<tr id='" + key + "'>";
			for(i=0; i< v_series[key].length; i++){
				table_html = table_html + "<td>" +  v_series[key][i] + "</td>";
			}
			table_html = table_html + '</tr>';
		}

		// for(i=0;i<v_indicators.length;i++){
		// 	table_html = table_html +"<tr><td><b>" +  v_indicators[i].name + "</b></td><td>" + v_indicators[i].asr + "%</td><td>" + v_indicators[i].acd + " min</td><td>" + v_indicators[i].answered_calls + " {% trans 'calls' %}</td><td>" + v_indicators[i].calls + " {% trans 'calls' %} </td></tr>";
		// }

		$('#asr_acd_indicators_table').append(table_html);
	}

</script>


