{################################################################################################################## 
    name      : register.html.twig
    Role      : form template for creating new user account 
    author    : tristesire
    date      : 21/03/2022  
###################################################################################################################}

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

{% block title %}Register page{% endblock %}

{% 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%;
    		justify-content: space-around;
    	}
    	
    	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%;
    	}
    	
    	form textarea
    	{
    		min-width:100%;
    		max-width:100%;
    		min-height:60px;
    		max-height:80px;
    	}
    	
    	form div
    	{
    		width:100%;
    		border:solid 1px:
    	}
    	
    	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%;
    	}
    	
    	
    	#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: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 main_content %}

	<div id="layout">
		<div id="container">
			<div id="bloc_left">
    			<h1>enregistrement</h1>
    			{{ form_start(registrationForm) }}
                    {% for flashError in app.flashes('verify_email_error') %}
                        <div class="alert alert-danger" role="alert">{{ flashError }}</div>
                    {% endfor %}
				{{ form_row(registrationForm.email) }}
                {{ form_row(registrationForm.username) }}
                {{ form_row(registrationForm.plainPassword) }}
                {# {{ form_row(registrationForm.avatar) }} #}
                {{ form_row(registrationForm.description) }}
                <div id="conditions">
                	<label>accepter les conditions d'utilisation</label>
                	
                    {{ form_row(registrationForm.agreeTerms) }} 
                    <a href="{{ asset('cgu/cgu.html') }}" target="_blank"   }>voir conditions</a>
                </div>
            
                 <button type="submit"  id="submit">valider</button>
                 {{ form_end(registrationForm) }}
    		</div>
    		
    		<div id="bloc_right">
        		<h2>
        			formulaire d'enregistrement
        		</h2>
        		<p>Saisissez les informations demandées pour créer un compte sur Univertuel.</p>
        		<p>Personnalisez-le à l'aide <strike>d'un avatar et </strike>d'un court texte pour vous présenter, <strike>ces deux éléménts sont </strike> cet élément est totalement optionnel.</p>
                    {% for flashError in app.flashes('verify_email_error') %}
                        <div class="alert alert-danger" role="alert">{{ flashError }}</div>
                    {% endfor %}
    		</div>
    	</div>
    </div>


{% for flashError in app.flashes('verify_email_error') %}
                        <div class="alert alert-danger" role="alert">{{ flashError }}</div>
                    {% endfor %}





{% endblock %}