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

{% block stylesheets %}
	{{ parent() }}
	
	<style>
	
	#step2
	{
		background-color:white;
	}
	
	/* A TRANSFERER AU TEMPLATE ???  */
	#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%;
		color:white;
		background-color:#800000;
		box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5);
	}
	
	#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:40%;
		height:200px;
		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%;
	}
	
	#omen
	{

		width:40%;
		padding:10px 0px 0px 0px;
		display:flex;
		flex-direction:column;
		align-items:center;
		background-color:#93fab4;
		box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5) inset;

	}
	
	#omen li
	{
		display:flex;
		flex-direction:row;
		width:100%;
		margin:5px 0px 5px 0px;
	}
	
	#omen li p
	{
		margin:0px 10px 0px 10px;
		width:100%;
	}
	
	
	.hidden ul
	{
		display:none;
	}
	
	</style>
	
{% endblock %}	


	
{% block initialisation_figure %}

<h1>choix de l'augure de naissance</h1>

<p id="resume">A la façon des signes du zodiaque, tous les personnages de Prophecy naissent sous un augure, majoritairement lié à l'un des neuf Grands Dragons. 
Ils définissent certaines des orientations du personnage et donnent une petite idée de la façon de celui-ci va aborder les évènements de sa vie. 
Les renseignements que donnent les Augures n'ont rien de rigide ou d'obligatoire. Ils déterminent les grandes lignes du caractère du personnage,
de ses motivations et de ses préférences. Choisissez l'augure de naissance de votre personnage et voyez avec votre maître de jeu comment intégrer
l'augure dans votre historique.</p>

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


<div id="description">
	<ul id="omen">
		<li><p>augure de naissance :</p><p id="omen_name"></p></li>
		<li><p>personnalité :</p><p id="omen_personnality">personnalité</p></li>
		<li><p>motivation :</p><p id="omen_motivation">motivation</p></li>
		<li><p>qualité :</p><p id="omen_quality"></p></li>
		<li><p>défaut :</p><p id="omen_fault"></p></li>
	</ul>
</div>

<div class="hidden">
	<ul id="omens_list">
    {% for omen in omenList %}
	
		<li name="{{ omen.name }}" personnality="{{ omen.personnality }}" motivation ="{{ omen.motivation }}"
		 quality="{{ omen.quality }}" fault="{{ omen.fault }}"</li>
	{% endfor %}
	</ul>
</div>
		
{% endblock %}


{% block javascripts %}
	<script>

function selected ()
{
	
	let index = this.selectedIndex;
    let omenList = document.getElementById('omens_list');
    let omens = omenList.getElementsByTagName('li');
    let omen = omens[index];
    document.getElementById('omen_name').innerHTML = omen.getAttribute('name');
    document.getElementById('omen_personnality').innerHTML = omen.getAttribute('personnality');
    document.getElementById('omen_motivation').innerHTML = omen.getAttribute('motivation');
    document.getElementById('omen_quality').innerHTML = omen.getAttribute('quality');
    document.getElementById('omen_fault').innerHTML = omen.getAttribute('fault');
    
}

//display first omen
let omenList = document.getElementById('omens_list');
let omens = omenList.getElementsByTagName('li');
let omen = omens[0];
document.getElementById('omen_name').innerHTML = omen.getAttribute('name');
document.getElementById('omen_personnality').innerHTML = omen.getAttribute('personnality');
document.getElementById('omen_motivation').innerHTML = omen.getAttribute('motivation');
document.getElementById('omen_quality').innerHTML = omen.getAttribute('quality');
document.getElementById('omen_fault').innerHTML = omen.getAttribute('fault');

let select = document.querySelector('select');
select.addEventListener('change', selected);

	
	
	</script>         
{% endblock %}