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

{% block stylesheets %}
	{{ parent() }}
	
	<style>
	
	#step5
	{
		background-color:white;
	}
	
	/*
	
	#form_figure
	{
		min-height:600px;
		display:flex;
		flex-direction:column;
		border:solid;
	}
	
	#form_figure h1
	{
		flex:1;
	}
	
	#form_figure div
	{
		flex:2;
		border:solid;
	}
	
	
	.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_figure div
	{
		flex:2;
	}
	
	
	#form_figure div
	{
		display:flex;
		flex-direction: column;
		align-items: center;
		height:300px;
		width:100%;
	}
	*/
	
	/*#form_figure div form*/
	/*
	form
	{
		width:30%;
		height:300px;
		border:solid;
		background-color:white;
    	box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5);
	}
	
	#form_figure div form div 
	{
		display:flex;
		flex-direction: column;
		align-items: flex-start;
		
	}
	
	#form_figure div form div input
	{
		height:40px;
    	font-size:20px;
    	background-color:white;
    	box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5) inset;
    	width:99%;
    	margin:20px 0px 20px 0px ;
	}
	
	#form_figure div form div button
	{
		height:40px;
        width:180px;
    	background-color:#EDCF40;
    	font-size:0.9em;
    	border-radius:15px 15px 15px 15px;
    	border-color:none;	
    	box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5);
    	margin:30px 0px 0px 0px;
    	
	}
	
	#form_figure select
	{
		height:40px;
		width:200px;
		text-align:center;
	}
	
	#description
	{
		width:100%;
		border:solid;
		display:flex;
		flex-direction:row;
		block:inline;
	}
	
	#description ul
	{
		border:solid;

		min-width:200px;
	}
	*/
	#form_figure
	{
		min-height:600px;
		display:flex;
		flex-direction:column;
	}
	
	#form_figure h1
	{
		flex:1;
	}
	
	.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_figure div
	{
		flex:2;
	}
	
	
	#form_figure div
	{
		display:flex;
		flex-direction: column;
		align-items: center;
		height:300px;
		width:100%;
	}
	
	
	/*#form_figure div form*/
	form
	{
		width:30%;
		height:250px;
		border:solid;
		background-color:white;
    	box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5);
	}
	
	#form_figure div form div 
	{
		display:flex;
		flex-direction: column;
		align-items: flex-start;
		
	}
	
	#form_figure div form div input
	{
		height:40px;
    	font-size:20px;
    	background-color:white;
    	box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5) inset;
    	width:99%;
    	margin:20px 0px 20px 0px ;
	}
	
	#form_figure div form div button
	{
		height:40px;
        width:180px;
    	background-color:#EDCF40;
    	font-size:0.9em;
    	border-radius:15px 15px 15px 15px;
    	border-color:none;	
    	box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5);
    	
	}
	
	#form_figure select
	{
		height:40px;
		width:200px;
		text-align:center;
	}
	
	#description
	{
		width:100%;
		display:flex;
		flex-direction:row;
		justify-content:center;
	}
	
	#description ul
	{
		border:solid;
		margin:0px 10px 0px 10px;
		min-width:200px;
		box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5) inset;
		background-color:#93fab4;
		color:black;
	}
	
	.hidden
	{
		display:none;
	}
	
	
	</style>
{% endblock %}	


	
{% block initialisation_figure %}

<h1>page de creation de personnage : choix de l'interdit de départ</h1>

<p class="resume">Les interdits blablabla blablabla </p>

<div>
    {{ form(form) }}
</div>

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

<div >
	<ul id="prohibiteds_list" class="hidde">
    {% for prohibited in prohibiteds %}   
		<li id="{{ prohibited.name }}" >{{ prohibited.id }} {{ prohibited.name }} {{ prohibited.description }}</li>	
	{% endfor %}
	</ul>
</div>
		
{% endblock %}
	

{% block javascripts %}
	<script>
	
	function selected()
	{
		//vars
		let index = this.selectedIndex;
        let prohibitedsList = document.getElementById('prohibiteds_list');
        let prohibiteds = prohibitedsList.getElementsByTagName('li');
        
        //display first prohibited        
        //titre pour la description des interdits
        let prohibitedDescription = document.getElementById('prohibited');
        prohibitedDescription.innerHTML = "";
        let prohibitedTitleLine = document.createElement ("h3");
        let prohibitedTitle = document.createTextNode('description de l interdit');
        prohibitedDescription.appendChild(prohibitedTitleLine);
        prohibitedTitleLine.appendChild(prohibitedTitle);
        
        for(let elem of prohibiteds)
		{
    		let elementId = elem.getAttribute('id'); 
    		if(this.options[index].text == elementId)
    		{
    			let li = document.createElement("li");
    			let content = document.createTextNode(elem.innerHTML);
    			li.appendChild(content);
    			prohibitedDescription.appendChild(li);
    		}	
		}
        
	}
	
	
	//display first prohibited
    let select = document.querySelector('select');
    let prohibitedsList = document.getElementById('prohibiteds_list');
    let prohibiteds = prohibitedsList.getElementsByTagName('li');
    let prohibited = prohibiteds[0];
    
    //titre pour la description des interdits
    let prohibitedDescription = document.getElementById('prohibited');
    let prohibitedTitleLine = document.createElement ("h3");
    let prohibitedTitle = document.createTextNode('description de l interdit');
    prohibitedDescription.appendChild(prohibitedTitleLine);
    prohibitedTitleLine.appendChild(prohibitedTitle);
    
    for(let elem of prohibiteds)
	{
		let elementId = elem.getAttribute('id'); 
		if(select.options[0].text.toLowerCase() == elementId)
		{
			let li = document.createElement("li");
			let content = document.createTextNode(elem.innerHTML);
			li.appendChild(content);
			prohibitedDescription.appendChild(li);
		}	
	}
       
    
	select.addEventListener('change', selected);
	
	</script>
{% endblock %}