{% extends "./base_site.html" %}
{% load i18n static %}




{% block coltype %}colMS{% endblock %}

{% block bodyclass %}{{ block.super }}{% endblock %}


{% block content %}
<script type="text/javascript" src="{% static 'js/Chart.min.js' %}"></script>
<style>
		.container{
			width: 1200px;
			margin: 0 auto;
		}



		ul.tabs{
			margin: 0px;
			padding: 0px;
			list-style: none;
		}
		ul.tabs li{
			background: none;
			color: #222;
			display: inline-block;
			padding: 10px 15px;
			cursor: pointer;
		}

		ul.tabs li.current{
			background: #ededed;
			color: #222;
		}

		.tab-content{
			display: none;
			background: #ededed;
			padding: 15px;
		}

		.tab-content.current{
			display: inherit;
		}

</style>
<script type="text/javascript">

$(document).ready(function(){
    $('select').change(function(){
 		cl = $(this).attr('class');
 		tt = 'select.' + cl +' option:selected'
    	tot = 0;
    	max = $(tt).length * 3;
    	$(tt).each(function(){
    		tot = tot + parseInt($(this).val());
    	}); 
    	$('#tot_' + cl).text(Math.round(tot/max*100) + ' %');
    });
    $('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current');

		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
	});
}); 

</script>
<div id="content-main">
<h1>Evaluation des compétences</h1>
<div class="container">
	<div>
	<ul class="tabs">
		<li class="tab-link current" data-tab="P01">P01</li>
		<li class="tab-link" data-tab="P02">P02</li>
		<li class="tab-link" data-tab="P03">P03</li>
		<li class="tab-link" data-tab="P04">P04</li>
		<li class="tab-link" data-tab="P05">P05</li>
		<li class="tab-link" data-tab="P06">P06</li>
		<li class="tab-link" data-tab="P07">P07</li>
		<li class="tab-link" data-tab="P08">P08</li>
	</ul>
	<hr/>
	</div>
	{% for p in object_list %}
	<div id="{{p.code}}" class="tab-content">
	<table>
	<tr><th>{{p}}</th><td width="100px"><div id="tot_{{p.code}}"></div></td></tr>
		{% for c in p.competence_set.all %}
		<tr><td>{{c}}</td><td><select class="{{p.code}}" ><option value="0">0</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option></select></td></tr>
		{% endfor %}
	</table>
	</div>
	{% endfor %}
	

</div><!-- container -->




</div>
{% endblock %}


