{% 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 %}