{% extends 'main_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;
			height:800px;
		}
		
    	#bloc_left
    	{
    		flex:0.8;
    		border-radius:20px 0px 0px 20px;
    		display:flex;
    		flex-direction:column;
    		margin-left:15%;
    		border:solid 1px;
    		background-color:white;
    		box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5);
    		max-height:100%;
    	}
    	
    	h1
    	{
    		text-align:center;
    		text-transform: capitalize;
    		color:black;
    	}
    	
    	form
    	{
    		margin:5%;
    		max-height:100%;
    		display:flex;
    		flex-direction:column;
    		justify-content: center;
    		height:600px;

    	}
    	

    	
    	form input
    	{
    		height:40px;
    		font-size:20px;
    		background-color:white;
    		box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5) inset;
    		width:99%;
    		display:flex;
    		flex-direction:row;
    		justify-content: center;
    	}
    	
    	form textarea
    	{
    		min-width:99%;
    		max-width:99%;
    		min-height:150px;
    		max-height:150px;
    		margin-top:100px;
    		margin-bottom:100px;
    	}
    	

		#message_contact_form_submit
    	{
    		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:center;
    		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:justify;
    		margin:3%;
    		
    	}
		
	</style>
		
{% endblock %}	



{% block main_content %}

    <div id="layout">	
    	
    	<div id="container">
    		<div id="bloc_left">
    			<h1>formulaire de contact</h1>
    			{{ form(form) }}
    		</div>
    		
    		<div id="bloc_right">
    			<h2>
        			formulaire pour nous contacter
        		</h2>
        		<p>Vous souhaitez nous contactez au sujet d'un problème que vous rencontrez sur la plateforme, et vous ne trouvez aucune solution? 
            		Vous souhaitez obtenir des informations plus spécifiques ou simplement nous adresser un message, ça tombe bien vous trouverez à votre gauche un formulaire
            		dédié pour celà.
            	<p>
            	
            	<p>Si vous possédez déjà un compte, il est impératif de vous authentifier au préalable.
            	<p>
            		
            	<p>Le message est destiné à notre responsable de la communication et sera traité dans un délai pouvant aller jusqu'à trois semaines. Alors merci de ne pas le relancer
            		régulièrement. Un retour vous sera fait par voie de message privé sur cette plateforme.
            	</p> 
    		</div>
    	
    	</div>
	
	
	
	
	
	
		
	
		
	
		
	    
		
		
	</div>

{% endblock %}