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

{% block stylesheets %}
      <link href="{{ asset('style/base_template.css') }}" rel="stylesheet" media="all" >   
      {#<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />#}
      <style>
      	.notVisible
      	{
      		display:none;
      	}
      </style>
{% endblock %}






{% block body %}

<div id="main_layout">

	{% include 'header.html.twig' %}
	
	{% block main_content %}
	
	Initialisation de l'armure de votre personnage
	


	{{ form(form) }}
	<ul id="armors_list">
	

	{% for armor in armors %}
			
		<li name ="{{ armor.name }}" category ="{{ armor.category }}" weight="{{ armor.weight }}" villageprice="{{ armor.villagePrice }}" 
			cityprice="{{ armor.cityPrice }}"  protection="{{ armor.protection }}" penalty="{{ armor.movePenalty }}" >
		</li>

	{% endfor %}
	
	</ul>

	<ul id="armor">
		<li><p id="armor_name"></p></li>
		<li><p id="armor_category"></p></li>
		<li><p id="armor_weight"></p></li>
		<li><p id="armor_city_price"></p></li>
		<li><p id="armor_village_price"></p>pièces de fer</li>
		<li><p id="armor_protection"></p></li>
		<li><p id="armor_penalty"></p></li>
		<li><p id="armor_material"></p></li>
		<li><p id="armor_description"></p></li>
	</ul>
	
	{% endblock %}
	
	{% include 'footer.html.twig' %}

</div>
<script>

function selected ()
{
	
	let index = this.selectedIndex;
    let armorList = document.getElementById('armors_list');
    let armors = armorList.getElementsByTagName('li');
    let armor = armors[index];
    document.getElementById('armor_name').innerHTML = armor.getAttribute('name');
    document.getElementById('armor_category').innerHTML = armor.getAttribute('category');
    document.getElementById('armor_weight').innerHTML = armor.getAttribute('weight');
    document.getElementById('armor_city_price').innerHTML = armor.getAttribute('cityprice');
    document.getElementById('armor_village_price').innerHTML = armor.getAttribute('villageprice');
    document.getElementById('armor_protection').innerHTML = armor.getAttribute('protection');
    document.getElementById('armor_penalty').innerHTML = armor.getAttribute('penalty');
    document.getElementById('armor_material').innerHTML = armor.getAttribute('material');
    document.getElementById('armor_description').innerHTML = armor.getAttribute('description');
    
}

//display first armor
let armorList = document.getElementById('armors_list');
let armors = armorList.getElementsByTagName('li');
let armor = armors[0];
document.getElementById('armor_name').innerHTML = armor.getAttribute('name');
document.getElementById('armor_category').innerHTML = armor.getAttribute('category');
document.getElementById('armor_weight').innerHTML = armor.getAttribute('weight');
document.getElementById('armor_city_price').innerHTML = armor.getAttribute('cityprice');
document.getElementById('armor_village_price').innerHTML = armor.getAttribute('villageprice');
document.getElementById('armor_protection').innerHTML = armor.getAttribute('protection');
document.getElementById('armor_penalty').innerHTML = armor.getAttribute('penalty');
document.getElementById('armor_material').innerHTML = armor.getAttribute('material');
document.getElementById('armor_description').innerHTML = armor.getAttribute('description');

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


</script>


{% endblock %}