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

{% block stylesheets %}
	{{ parent() }}
	<style>
		#member_content
		{
			min-height:1000px;
			/*background-color:#d8c694;*/
		}
	
		
		#breadcrumb
        {
        	display:flex;
        	flex;direction:row;
        	width:100%;
        	color:blue;
        	font:bold;
        	font-size:1em;
        	background-color:#f0dfb1;
        	height:50px;
        	align-items:center;
        	
        }
        
        #breadcrumb a
        {
        	margin:5px;
        	text-decoration: none;
        }
        
	
		#breadcrumb a:visited
		{
			color:blue;
		}
	
	
		h1
		{
			width:100%;
			text-align:center;
			text-transform:capitalize;
		}
		
		#steps
		{
			display:flex;
			flex-direction:row;
			list-style-type:none;
			background-color:grey;
		}
		
		#steps li
		{
			display:flex;
			flex-direction:column;
			flex:1;
			border:solid;
		}
		
		#steps li a img
		{
			width:60px;
			height:60px;
		}
		
		#form_figure
		{
			margin:2% 0% 0% 0%;
		}
	
	</style>
{% endblock %}

{% block breadcrumb %}
<a href="{{ path('homepage') }}">accueil</a> > <a href="{{ path('dashboard') }}">tableau de bord</a> > <a>création de personnage</a>
{% endblock %}
   
{% block member_content %}

	<ul id="steps">
    	<li id="step1"><a><img src="{{ asset('img/medaille200px.png') }}" alt="etape 1 : augure de naissance">etape 1 : création</a></li>
		<li id="step2"><a><img src="{{ asset('img/medaille200px.png') }}" alt="etape 2 : augure de naissance">etape 2 : augure de naissance</a></li>
		<li id="step3"><a><img src="{{ asset('img/medaille200px.png') }}" alt="etape 3 : age de depart">etape 3 : age de départ</li></a>
		<li id="step4"><a><img src="{{ asset('img/medaille200px.png') }}" alt="etape 4 : choix de la caste">etape 4 : choix de la caste</li></a>
		<li id="step5"><a><img src="{{ asset('img/medaille200px.png') }}" alt="etape 5 : interdit de caste">étape 5 : interdit de caste</li></a>
		<li id="step6"><a><img src="{{ asset('img/medaille200px.png') }}" alt="etape 6 : caractéristiques de départ">étape 6 : caractéristiques de départ</li></a>
		<li id="step7"><a><img src="{{ asset('img/medaille200px.png') }}" alt="etape 7 : attributs majeurs">etape 7 : attributs majeurs</li></a>
		<li id="step8"><a><img src="{{ asset('img/medaille200px.png') }}" alt="etape 8 : attributs mineurs">etape 8 : attributs mineurs</li></a>
		<li id="step9"><a><img src="{{ asset('img/medaille200px.png') }}" alt="etape 9 : nation d'origine">etape 9 : nation d'origine</li></a>
		<li id="step10"><a><img src="{{ asset('img/medaille200px.png') }}" alt="etape 10 : tendances de départ">etape 10 : tendances de départ</li></a>
		<li id="step11"><a><img src="{{ asset('img/medaille200px.png') }}" alt="etape 11 : désavantages de départ">etape 11 : désavantages de départ</li></a>
		<li id="step12"><a><img src="{{ asset('img/medaille200px.png') }}" alt="etape 12 : avantages de départ">etape 12 : avantages de départ</li></a>
		<li id="step13"><a><img src="{{ asset('img/medaille200px.png') }}" alt="etape 13 : compétences de départ">etape 13 : compétences de départ</li></a>
		<li id="step14"><a><img src="{{ asset('img/medaille200px.png') }}" alt="etape 14 : sortilèges de départ">etape 14 : sortilèges de départ</li></a>
		<li id="step15"><a><img src="{{ asset('img/medaille200px.png') }}" alt="etape 15 : équipement de départ">etape 15 : équipement de départ</li></a>
	</ul>
	
	
	<div id="form_figure">
	{% block initialisation_figure %}
	{% endblock %}
	</div>

{% endblock %}



{% block javascripts %}

<script>
</script>

{% endblock %}