{% extends 'base.html.twig' %}

{% block title %}Moyenne
{% endblock %}
{% block stylesheets %}
	{{parent()}}
	<link rel="stylesheet" href="{{ asset('assets/css/moyenne.css?v=<?= time() ?>')}}"/>
{% endblock %}
{% block body %}

	<div id="main" class="container ">
		<div class="row div-instant-entrainement jc-c col-md-12 div-instant" id="div-instant-entrainement">
			<div id="first-div" class="col-md-12 jc-c">
				<h4>Moyenne :</h4>
			</div>


			<label for="periode">Période :
			</label>
			<select id="periode" class="form-select input-moyenne">
				<option value="3">3 jours</option>
				<option value="7">7 jours</option>
				<option value="28">28 jours</option>
			</select>

			<label for="idJoueur">Joueur :
			</label>
			<select id="idJoueur" class="form-select input-moyenne">
				<option value="">Choisir...</option>
				{% for joueur in allJoueurs %}
					<option value="{{joueur.email}}">{{joueur.prenom}}
						{{joueur.nom}}</option>
				{% endfor %}
			</select>
			<button class="btn btn-primary hide btn-create-instant" context="entrainement" isinstant="1" id="btn-instant-entrainement">Questionnaire instantané</button>
		</div>
		<table id="table-moyenne" class="table table-striped table-bordered">
			<thead>
				<th>Intensité</th>
				{# FIXME: AJOUTER LES JAUGES #}
				{# TODO:ANCIENNE VERSION <th>Douleur</th>
												<th>Fatigue</th>			
												<th>Sommeil</th>
												<th>Stress</th>
												<th>Humeur</th> #}
			</thead>
			<tbody>
				<tr>
					<td id="intensite"></td>
					{# FIXME: AJOUTER LES JAUGES #}
					{# TODO:ANCIENNE VERSION  <td id="douleur"></td>
										<td id="fatigue"></td>
										<td id="sommeil"></td>
										<td id="stress"></td>
										<td id="humeur"></td> #}
				</tr>
			</tbody>
		</table>
		<div id="container-canvas" width="500" height="500">
			<canvas id="line"></canvas>
		</div>
	</div>

{% endblock %}
{% block javascripts %}
	{{ parent() }}
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script type="text/javascript" src="{{ asset('assets/js/moyenne/initMoyenne.js?v=<?= time() ?>') }}"></script>
	<script type="text/javascript" src="{{ asset('assets/js/moyenne/moyenne.js?v=<?= time() ?>') }}"></script>
	<script type="text/javascript" src="{{ asset('assets/js/moyenne/ajaxMoyenne.js?v=<?= time() ?>') }}"></script>
{% endblock %}