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

{% block stylesheets %}
	{{ parent() }}
	
	    	<style>
		#layout
    	{
    		width:100%;
    		display:flex;
    		flex-direction:column;
    		justify-content:center;
    		min-height:1000px;
    	}
    	
    	#container
		{
			display:flex;
			flex-direction:row;
			min-height:800px;
		}
		
    	#bloc_left
    	{
    		flex:0.8;
    		border-radius:20px 0px 0px 20px;
    		display:flex;
    		flex-direction:column;
    		/*background: linear-gradient(#141414, 80%,#a0845f);*/
    		margin-left:15%;
    		border:solid 1px;
    		background-color:white;
    		box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5);
    	}
    	
    	h1
    	{
    		text-align:center;
    		text-transform: capitalize;
    		color:black;
    	}
    	
    	form
    	{
    		display:flex;
    		flex-direction:column;
    		margin:5%;
    		height:70%;
    	}
    	
    	#game_form
    	{
    		height:100%;
    	}
    	
    	form input
    	{
    		height:40px;
    		font-size:20px;
    		background-color:white;
    		box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5) inset;
    		width:100%;
    	}
    	
    	#game_form_description
    	{
    		min-width:100%;
    		max-width:100%;
    		min-height:180px;
    		max-height:180px;
    	}
    	
    	form div
    	{
    		width:100%;
    		margin-top:6%;
    		margin-bottom:6%;
    	}
    	
    	form div label
    	{
			font-size:20px;

    	}
    	
    	
    	
    	#game_form_valider
    	{
    		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);
    	}
    	
    	
    	#bloc_right
    	{
    		flex:0.5;
    		border-radius:0px 20px 20px 0px;
    		background: linear-gradient(#141414, 80%,#a0845f);
    		border:solid 1px;
    		color:white;
    		display:flex;
    		flex-direction:column;
    		margin-right:15%;
    		justify-content:space-around;
    		box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5);
    	}
    	
    	#bloc_right h2
    	{
    		text-align:center;
    		margin:5%;
    	}
    	
    	#bloc_right p
    	{
    		text-align:center;
    		margin:5%;
    		
    	}
	
		</style>
	
{% endblock %}	

{% block breadcrumb %}
	<a href="{{ path('homepage') }}">accueil</a> > <a href="{{ path('dashboard') }}">tableau de bord</a> > <a href="{{ path('admin') }}">tableau de bord administrateur</a> > <a href="{{ path('admin_games') }}">jeux</a> > <a>nouveau jeu</a>
{% endblock %}
	
	
{% block admin_content %}

    <div id="layout">
    		<div id="container">
    			<div id="bloc_left">
    			
    			<h1>nouveau jeu</h1> 
    			
    			{{ form(form) }}

    			</div>
    			
    			<div id="bloc_right">
    				<h2>
            			nouveau jeu
            		</h2>
            		<p>Le nom court identifie de manière unique le jeu. Pour prendre un exemple connu, AD&D1 sera le nom court et Avancée Donjons et Dragons 1ère édition sera le nom complet. Il est décisif que le code soit une chaine de caractères sans espace.</p>
            		<p>Le fichier image permet d'agrémenter la vue dans la liste.</p>
            		<p>Enfin, une brève description permet de savoir notamment si les règles officielles sont prises en charges ou pas et dans quelle mesure.</p>
            		
                        {% for flashError in app.flashes('verify_email_error') %}
                            <div class="alert alert-danger" role="alert">{{ flashError }}</div>
                        {% endfor %}
    			</div>
    		</div>	
    </div>



	
{% endblock %}