{% extends 'member_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%;
    	}
    	
    	#campaign_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%;
    	}
    	
    	#campaign_form_description
    	{
    		min-width:100%;
    		max-width:100%;
    		min-height:180px;
    		max-height:180px;
    	}
    	
    	form div
    	{
    		width:100%;
    		margin-top:4%;
    		margin-bottom:4%;
    	}
    	
    	form div label
    	{
			font-size:20px;

    	}
    	
    	#conditions
    	{
    		border:solid;
    		display:flex;
    		flex-direction:row;
			box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5) inset;
    	}
    	
    	#conditions label
    	{
    		width:85%;
    	}
    	
    	#conditions checkbox
    	{
    		width:5%;
    	}
    	
    	#conditions a
    	{
    		width:14%;
    	}
    	
    	
    	#campaign_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('campaigns') }}">mes campagnes</a> > <a>nouvelle campagne</a>
{% endblock %}
	
	
{% block member_content %}

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

    			</div>
    			
    			<div id="bloc_right">
    				<h2>
            			nouvelle campagne
            		</h2>
            		<p>Le nom identifie de manière unique votre campagne, et sera visible dans le menu recherche de campagnes.</p>
            		<p>Saisissez en description ce qui définit votre campagne, sa durée, ses spécificités.</p>
            		<p>Enfin, définissez à quel jeu elle correspond.</p>
                        {% for flashError in app.flashes('verify_email_error') %}
                            <div class="alert alert-danger" role="alert">{{ flashError }}</div>
                        {% endfor %}
    			</div>
    		</div>	
    </div>



	
{% endblock %}