{% extends "./core/setup.html" %}
{% load i18n %}
{% load static %}

{% block content %}
<div class="d-lg-flex half">
	<div class="bg order-1 order-md-2"
		 style="background-image: url('{% static 'user/assets/imgs/login-nature-1920.jpg' %}');"></div>
	<div class="contents order-2 order-md-1">
		<div class="container">
			<div class="row align-items-center justify-content-center">
				<div class="col-md-7">
					<div class="my-4">
						<h5>
							<div class="fancytexthover">
								<span class="textwrapper"><a href="{% url 'login' %}"><span
										class="icon-arrow-circle-left me-2"></span>{% trans 'Login' %}</a></span>
								<a href="{% url 'login' %}" class="text-danger"><span
										class="icon-arrow-circle-left me-2"></span>{% trans 'Login' %}</a>
							</div>
						</h5>
					</div>
					<div class="ms-4">
						<div class="my-4">
							<h3>
								{% trans 'Sign up' %}
							</h3>
						</div>
						<form method="POST">{% csrf_token %}

							{% if form.errors %}
							{{ form.non_field_errors }}
							{% endif %}

							<div class="form-group last mb-3">
								{{ form.username }}
							</div>
							<div class="form-group last mb-3">
								{{ form.email }}
							</div>
							<div class="form-group last mb-3">
								{{ form.password }}
							</div>
							<div class="form-group last mb-3">
								{{ form.password2 }}
							</div>

							<div class="d-flex mb-5 align-items-center">
								<label class="control control--checkbox mb-0 me-3">
									<span class="caption">
										Acconsento al trattamento dei dati
									</span>
									<input type="checkbox" name="condition_check" id="id_condition_check"/>
									<div class="control__indicator"></div>
								</label>
							</div>

							<button type="submit" class="w-100 btn btn-block btn-primary">
								{% trans 'Sign up' %}
							</button>

							<span class="d-block text-center my-4 text-muted">
								&mdash; {% trans 'or' %} &mdash;
							</span>

							<div class="social-login">
								<a href="#" class="facebook btn d-flex justify-content-center align-items-center">
									<span class="icon-facebook me-3"></span>
									{% trans 'Sign up with' %} Facebook
								</a>
								<a href="#" class="twitter btn d-flex justify-content-center align-items-center">
									<span class="icon-twitter me-3"></span>
									{% trans 'Sign up with' %} Twitter
								</a>
								<a href="#" class="google btn d-flex justify-content-center align-items-center">
									<span class="icon-google me-3"></span>
									{% trans 'Sign up with' %} Google
								</a>
							</div>

						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock content %}