{% extends 'master.twig' %}

{% block title %}¡Bienvenido!{% endblock %}

{% block body %} 

<h2 class="title is-1 is-size-3-touch has-text-centered ">
	Dar de alta
</h2>
<h2 class="subtitle is-4 is-size-5-touch has-text-centered ">
	¡Hola!
</h2>
<div class="columns is-centered">
	<div class="column is-6">
			<div id="notificationCopy" class="notification is-warning" style="display:none;">
			
			</div>
		<div class="card">
			<div class="card-content">
				<form action="registrar?token={{token}}" method="POST">
					<div class="field">
						<label for="" class="label">
							Ingrese la contraseña de su certificado</label>
						<div class="control">
							<input type="password" id="password" name="password" class="input" placeholder="Contraseña">
						</div>
					</div>
					<div class="field">
						<label for="" class="label">
							Confirme la contraseña escribiendola</label>
						<div class="control">
							<input type="password" id="repassword" class="input" placeholder="Reescriba su contraseña">
						</div>
					</div>
					<div class="field">
						<div class="control has-text-right">
							<button type="submit" class="button is-link" id="submitButton">Enviar</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock %}


{% block javascripts %}
	<script>
		$(function () {
		$('#submitButton').click(function (e) {
			var firstPassword = $('#password').val()
			var secondPassword = $('#repassword').val()
			console.log(firstPassword)
			console.log(secondPassword)
			if(firstPassword == secondPassword){
				$(this).addClass('is-loading')
				$('#password').attr('readonly',true)
				$('#repassword').attr('readonly',true)
			} else {
				e.preventDefault()
				$("#notificationCopy").text('Las contraseñas no coinciden').slideDown().delay(3000).slideUp();
			}
			})
		})
	</script>
{% endblock %}