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

{% block stylesheets %}
	{{ parent() }}
	
	<style>
	
	#step6
	{
		background-color:white;
	}
	
	#initialisation_caracteristics_layout
	{
		display:flex;
		flex-direction:row;
		border:solid;
		justify-content:center;
	}
	
	.resume
	{
		flex:1;
		margin:0% 5% 2% 5%;
		border:solid;
		padding:1%;
		background-color:#800000;
		color:white;
		box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5);
		list-style-type:none;
	}
	
	#form_choice
	{
		border:solid;
		width:350px;
	}
	
	#caracteristic_choices
	{
		display:flex;
		flex-direction:column;
		border:solid;
		width:100px;
	}
	
	#value_choices
	{
		display:flex;
		flex-direction:column;
		border:solid;
		width:100px;
	}
	
	#initialise_prophecy_figure_caracteristics_form_caracteristics div
	{
		display:flex;
		flex-direction:row;
		width:100px;
	}
	
	
	</style>

{% endblock %}	

	
{% block initialisation_figure %}

<h1>choix des caractéristiques</h1>

<p class="resume">Les caractéristiques blablabla blablabla </p>

<span id="initialisation_caracteristics_layout">
    <div id="form_choice">
        {{ form(form) }}
    </div>
    
    {#
    <div id="caracteristic_choices">
    {% for caracteristic in caracteristics %}
    	<input type="radio" id="{{ caracteristic }}"   disable>
    {% endfor %}
    </div>
    #}
    {# a supprimer a remplir par javascript #}
    <div id="value_choices">
        {% for value in startValues %}
        	<div><input type="radio" value ={{ value }} name="valueSelected" >{{ value }}</div>
		{% endfor %}
    </div>
    
    <div><input type="button" value="reinitialiser"></div>
</span>


<span id="description">
	<ul id="caracteristic" class="resume">
	</ul>
</span>

<div >
	<ul id="startvalues" class="hidde">
	    {% for value in startValues %}
        	<li value="{{ value }}" >{{ value }}</li>
		{% endfor %}
	</ul>
</div>



		
{% endblock %}

{% block javascripts %}
	<script>

let availableValue = 0;


if (document.querySelector('input[name="valueSelected"]')) {
  document.querySelectorAll('input[name="valueSelected"]').forEach((elem) => {
    elem.addEventListener("change", function(event) {
      var item = parseInt(event.target.value);
     //alert(item);
     availableValue += item;
     alert(availableValue);
    });
  });
}
	
	

	
	</script>
{% endblock %}