{% extends 'master.twig' %}

{% block title %}Dar de alta
{% 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 ">
		Oficial de Registro
	</h2>
	<div class="columns is-centered">
		<div class="column is-6">
			<div class="card">
				<div class="card-content">
					<h1 class="title is-5">Paso 1.</h1>
					<div class="content">
						<p>
							Envie el siguiente link al usuario
						</p>
						<p>
							<textarea type="text" id="LeLink" class="textarea is-static is-small" readonly rows="4">http://autenticar.lyris.com.ar/ingresar?token={{usuario}}</textarea>
						</p>
						<p>
							<div class="is-clearfix">
								<button class="button is-link is-pulled-left" id="botonCopiar" data-clipboard-target="#LeLink">
									<i class="fas fa-paste"></i>&nbsp;&nbsp;Copiar al portapapeles</button>
								<p class="has-text-link is-size-7 is-pulled-right has-text-right" id="notificationCopy" style="display:none;">
									<i class="fas fa-check-circle fa-lg"></i>&nbsp;&nbsp;¡La url fue copiado<br>al portapapeles!</p>
							</div>
						</p>
					</div>
				</div>
			</div>
			<br>
			<div class="card">
				<div class="card-content">
					<h1 class="title is-5">Paso 2.</h1>
					<div class="content">
						<p>Espere a que el usuario ingrese al link. El usuario deberá ingresar la contraseña.</p>
						<p>
							Una vez que el usuario haya ingresado la contraseña y su certificado fue generado exitosamente, puede descargar el certificado.
						</p>
						<p>
							<a href="/descargar?token={{usuario}}">
								<u>Descargar el certificado</u>&nbsp;<i class="fas fa-download"></i>
							</a>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}
{% block helpdesk %}
<p class="has-text-centered is-size-7"><a href="https://soporte-lyris.atlassian.net/servicedesk/customer/portals" style="color: #999999; color: font-size:0.9rem;" target="_blank">¿Problemas o error en el sistema?</a></p>
{% endblock %}
{% block javascripts %}
	<script>
		var clipboard = new ClipboardJS('#botonCopiar');

		$(function () {
			$('#botonCopiar').on('click', function () {
			$("#notificationCopy").show().delay(3000).fadeOut();
			})
		})
	</script>
{% endblock %}