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

{% block stylesheets %}
	<link rel="stylesheet" href="{{ asset('css/security.css') }}">

	<meta name="viewport" content="width=device-width, initial-scale=1"/>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
	<script src="https://js.stripe.com/v3/"></script>
{% endblock %}
{% block title %}S'inscrire
{% endblock %}
{% block body %}
	<style>

		input {
			padding: 10px;
			width: 100%;
			font-size: 17px;
			font-family: 'M PLUS Rounded 1c', sans-serif;
			border: 1px solid #8c8c8c;
			margin-bottom: 3%;
			border-radius: 3px;
		}
		input.invalid {
			background-color: #ffdddd;
		}


		.box-term {
			margin-top: 40px;
			margin-left: 30px;
			margin-bottom: 30px;
		}


		/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
		.StripeElement {
			box-sizing: border-box;
			height: 40px;
			width: 100%;
			padding: 10px 12px;
			border: 1px solid transparent;
			border-radius: 4px;
			background-color: white;
			box-shadow: 0 1px 3px 0 #e6ebf1;
			-webkit-transition: box-shadow 150ms ease;
			transition: box-shadow 150ms ease;
		}
		.StripeElement--focus {
			box-shadow: 0 1px 3px 0 #cfd7df;
		}
		.StripeElement--invalid {
			border-color: #0A9B01;
		}
		.StripeElement--webkit-autofill {
			background-color: #fefde5 !important;
		}
		.my-input {
			padding: 10px;
			border: 1px solid #ccc;
		}

		.fiels-pay-part {
			margin-top: 40px;
		}
		.label-pay-part {
			margin-bottom: 20px;
		}
		.text-sub-price {
			margin-top: -14px;
			margin-bottom: 22px;
			font-size: 14px;
			color: #c0c0c0;
		}
		.text-sub-price span a {
			text-decoration: none;
			margin-top: -14px;
			margin-bottom: 22px;
			font-size: 14px;
			color: #5672f9;
		}
		.form_reg {
			margin-top: -2px;
		}
	</style>
	{# {% if app.request.attributes.get('_route') == 'users_offers_edit' %}
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																										<h4>Modifier une annonce</h4>
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																									{% else %}
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																										<h4>Ajouter une annonce</h4>
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																									{% endif %} #}

	<div class="container-fluid">
		<div class="container">
			<div class="login-container">
				<div class="row">
					<div class="col-lg-5  no-padding">
						<div class="register-box-text">
							<h4>Bienvenue sur Maman Julienne</h4><br/><br/>
							<p>Dites nous en plus ...</p>
						</div>
						<div class="form_reg" id="regForm" autocomplete="off">
							{{ form_start(registrationForm, {attr: {id:"payment-form"}}) }}
							<div class="tab" autocomplete="off">

								{{ form_row(registrationForm.name) }}
								{{ form_row(registrationForm.firstname) }}
								<label>Photo de profil</label>
								{{ form_row(registrationForm.avatar) }}

								<div class="login-row row no-margin">
									<p class="linkin">Vous avez déjà un compte ?
										<a href="{{ path('app_login') }}">
											Se connecter
										</a>
									</p>
								</div>
							</div>

							<div class="tab">
								{{ form_row(registrationForm.country) }}
								{{ form_row(registrationForm.phone) }}
								{{ form_row(registrationForm.email) }}
								{{ form_row(registrationForm.plainPassword) }}
							</div>

							<!-- Fields for payment

							<div class="fiels-pay-part">
								<div id="">
									<div class="form-row">
										<strong>
											<label for="card-element" class="label-pay-part">
												Carte de credit
											</label>
										</strong>
										<div class="text-sub-price">
											<span>* Souscription sans engagement
																																																																																																																																																																																																												de 10.000 fcfa/mois.
												<br/>
												<a href="{{ path('about') }}">plus d'information ?</a>
											</span>

										</div>
										<div id="card-element"></div>
										<div id="card-errors" role="alert"></div>
									</div>

								</div>
							</div>

							-->

							<div class="box-term row">
								{{ form_row(registrationForm.agreeTerms) }}
							</div>
							<input type="hidden" name="lookup_key" value="offre">
							<button type="submit" class="btn-singUp">S'inscrire</button>
							{{ form_end(registrationForm) }}
						</div>

					</div>
					<div class="col-lg-7 right_column">
						<img src="../../images/illustrations/design/alert_offer.svg" alt="register_icon"/>
					</div>
					
				</div>

				
				{{ form_end(registrationForm) }}
			</div>
		</div>
	</div>
</div>{% endblock %}{% block javascripts %}
<script type="text/javascript" src="/javascripts/jquery-3.1.1.min.js"></script>

{% endblock %}