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

{% block title %}AquaProtect - Inscription
{% endblock %}

{% block body %}
	<div class="container py-5">
		<div class="row justify-content-center">
			<div class="col-md-8 col-lg-6">
				<div class="card shadow-sm">
					<div class="card-header bg-primary text-white py-3">
						<h1 class="h3 mb-0">
							<i class="fas fa-user-plus me-2"></i>Inscription
						</h1>
					</div>

					<div class="card-body p-4">
						{% if form_errors(registrationForm) %}
							<div class="alert alert-danger">
								{{ form_errors(registrationForm) }}
							</div>
						{% endif %}

						{{ form_start(registrationForm) }}
						<div class="row">
							<div class="col-md-6 mb-3">
								{{ form_row(registrationForm.firstname, {
                                   
                                }) }}
							</div>
							<div class="col-md-6 mb-3">
								{{ form_row(registrationForm.lastname, {
                                    
                                }) }}
							</div>
						</div>

						<div class="mb-3">
							{{ form_row(registrationForm.email, {
                               
                            }) }}
						</div>

						<div class="mb-3">
							{{ form_row(registrationForm.phone, {
                              
                            }) }}
						</div>

						<div class="mb-4">
							{{ form_row(registrationForm.plainPassword, {
                                'label': 'Mot de passe',
                                'attr': {'class': 'form-control-lg'},
                                'label_attr': {'class': 'fw-bold'}
                            }) }}
						</div>

						<div class="card bg-light border-0 mb-4">
							<div class="card-body">
								<h5 class="card-title">
									<i class="fas fa-shield-alt me-2 text-primary"></i>
									Protection de vos données personnelles
								</h5>
								<p class="card-text small">Les informations recueillies sur ce formulaire sont enregistrées dans un fichier informatisé pour permettre la création et la gestion de votre compte utilisateur. Elles sont conservées pendant la durée de votre inscription sur notre site et sont destinées uniquement à l'administration du site.</p>

								<p class="card-text small mb-2">Conformément à la loi « informatique et libertés » et au RGPD, vous disposez des droits suivants :</p>
								<ul class="small text-muted">
									<li>Droit d'accès, de modification et de suppression de vos données</li>
									<li>Droit à la portabilité de vos données</li>
									<li>Droit d'opposition au traitement de vos données</li>
									<li>Droit de retirer votre consentement à tout moment</li>
								</ul>
							</div>
						</div>

						<div class="mb-4">
							{{ form_row(registrationForm.agreeTerms, {
                                'label': "J'accepte les conditions d'utilisation et la politique de confidentialité décrites ci-dessus",
                                'label_attr': {'class': 'fw-normal'}
                            }) }}
						</div>

						<div class="mb-4">
							<small class="text-muted">
								<i class="fas fa-info-circle me-1"></i>
								Pour plus d'informations sur le traitement de vos données, consultez notre
								<a href="{{path('app_policy')}}" target="_blank" class="text-primary">politique de confidentialité</a>.
							</small>
						</div>

						<div class="d-grid gap-2">
							<button type="submit" class="btn btn-primary btn-lg">
								<i class="fas fa-user-plus me-2"></i>Créer mon compte
							</button>
						</div>
						{{ form_end(registrationForm) }}

						<div class="text-center mt-4">
							<small class="text-muted">
								Déjà inscrit ?
								<a href="{{ path('app_login') }}" class="text-primary">Connectez-vous</a>
							</small>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	{% block stylesheets %}
    {{ parent() }}
		<style>
			.card {
				border-radius: 0.5rem;
				border: none;
			}
			.card-header {
				border-radius: 0.5rem 0.5rem 0 0;
			}
			.form-control-lg {
				border-radius: 0.4rem;
			}
			.form-control:focus {
				box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
			}
			.btn {
				border-radius: 0.4rem;
			}
			.form-check-input:checked {
				background-color: var(--bs-primary);
				border-color: var(--bs-primary);
			}
		</style>
	{% endblock %}

{% endblock %}