{% extends "base.html" %}
{% block title %}Registra’t i participa{% endblock %}
{% load staticfiles %}
{% block content %}

	<div class="maincontent">
		<div id="register">
			<b style="float:right"><span>*</span> Camps obligatoris</b>
			<span class="title">Registra’t i participa</span>
			<script type="text/javascript" src="{% static "js/verifyRegister.js" %}"></script>
			<form name="reg" method="post" onsubmit="return validateForm()">{% csrf_token %}
				<div class="form-group">
					<label for="fname">Nom</label><br>
					<input type="text" name="fname" id="fname">
					<div class="alert" id="fname-alert"></div>
				</div>
				<div class="form-group">
					<label for="lname">Cognom</label><br>
					<input type="text" name="lname" id="lname">
					<div class="alert" id="lname-alert"></div>
				</div>
				<div class="form-group">
					<label for="username">Nom d'usuari <span>*</span></label> <b>Entre 4 i 20 caràcters, només lletres bàsiques, números i _</b><br>
					<input type="text" name="username" id="username" onblur="validateUsername()">
					<div class="alert" id="username-alert"></div>
				</div>
				<div class="form-group">
					<label for="email">E-mail <span>*</span></label> <br>
					<input type="email" name="email" id="email" onblur="validateEmail()">
					<div class="alert" id="email-alert"></div>
				</div>
				<div class="form-group">
					<label for="password">Contrasenya <span>*</span></label> <b>Entre 8 i 30 caràcters, només lletres bàsiques, números i @ . + - _</b><br>
					<input type="password" name="password" id="password" onblur="validatePassword()">
					<div class="alert" id="password-alert"></div>
				</div>
				<div class="form-group">
					<label for="password2">Repeteix la contrasenya <span>*</span></label><br>
					<input type="password" name="password2" id="password2" onblur="validatePassword2()">
					<div class="alert" id="password2-alert"></div>
				</div>
				<div class="form-group">
					<input type="checkbox" name="condicions" id="condicions" value="Condicions"> He llegit i accepto les <a class="link" href="#popup" data-effect="mfp-zoom-out">condicions d'ús</a>. <span>*</span>
					<div class="alert alert-error" id="condicions-alert"></div>
					<br><input type="submit" value="Enviar" />
				</div>
		    </form>
		    <a href="#" class="overlay" id="popup"></a>
		    <div class="popup">
		    	<span class="title">Condicions d'ús</span>
		    	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan ac ante a ullamcorper. Nulla et porta sapien. Nam egestas sollicitudin tortor, eget consectetur ante pharetra eu. Curabitur viverra turpis ultricies libero pretium ultrices. Integer ac lacus vitae odio faucibus rhoncus. Nam ullamcorper tincidunt tortor, ac vulputate tellus scelerisque ac. Curabitur sagittis nisi quis enim pellentesque vehicula. Donec non lorem nec justo interdum volutpat. Duis a tortor urna. Pellentesque eget convallis quam. Cras eu turpis tortor.
		    	<a class="close" href="#"><i class="fa fa-times"></i></a>
		    </div>
		</div>
	</div>

{% endblock %}