{{^login}}
<div class="step step1 active">

</div>
<div class="step step2">
	<h2>Check in:</h2>
	<div class="step_inner">

		<h3>Edit your website and publish it now</h3>
		
		<div class="login_cont">
		
			<div class="row mt-1">
				<div class="col-sm-12 col-12">
					<div class="text-field">
						<label>E-mail</label>
						<input type="text" class="form-control useremail2" name="email2" placeholder="Your email here" required value="{{empailp}}">
						<div class="inv-feedback inv-email2"></div>
					</div>
				 </div>
			</div>

			<div class="row mt-1">
				<div class="col-sm-12 col-12">
					<div class="text-field">
						<label>Password</label>
						<input type="password" minlength="6" maxlength="30" class="form-control" name="pass2"  placeholder=" " required autocomplete="off"><span class="showpwd"><i class="bi bi-eye"></i></span>
						<div class="inv-feedback inv-pass2"></div>
					</div>
				 </div>
			</div>
			
			<div class="row mt-1">
				<div class="col-sm-12 col-12 text-center">
					<button class="btn-login-account">Login</button>
				</div>
			</div>
			
			<!--
			<div class="row mt-1">
				<div class="col-sm-12 col-12 text-center">
					<p class="minilegal">By submitting this form, you consent to the use of your information in accordance with our Privacy Policy. We respect your privacy and will only use your data for the intended purpose. We do not share your information with third parties without your consent. For more details, review our <a href="{{config.rooti}}/privacy-policy/" target="_blank">Privacy Policy</a>. If you have questions, contact us at <a href="mailto:info@kweb.ai">info@kweb.ai</a>. Thank you.</p>
				</div>
			</div>
			-->
			<div class="ihaveaccount" onClick="showReg()">I don't have a user account</div>
		</div>


		<div class="register_cont">

			<div class="row mt-3">
				<div class="col-12">
					<div class="text-field">
						<label>Name</label>
						<input type="text" class="form-control username" name="name" placeholder="Your name here" required value="">
						<div class="inv-feedback inv-name"></div>
					</div>
				 </div>
			</div>
			
			<div class="row mt-1">
				 <div class="col-12">
					<div class="text-field">
						<label>Last name</label>
						<input type="text" class="form-control userlname" name="lname" placeholder="Your last name" required value="">
						<div class="inv-feedback inv-lname"></div>
					</div>
				 </div>
			</div>			
			
			<div class="row mt-1">
				<div class="col-sm-12 col-12">
					<div class="text-field">
						<label>E-mail</label>
						<input type="text" class="form-control useremail" name="email" placeholder="Your email here" required value="{{empailp}}">
						<div class="inv-feedback inv-email"></div>
					</div>
				 </div>
			</div>

			<div class="row mt-1">
				<div class="col-sm-12 col-12">
					<div class="text-field">
						<label>Password</label>
						<input type="password" minlength="6" maxlength="30" class="form-control" name="pass"  placeholder=" " required autocomplete="off"><span class="showpwd"><i class="bi bi-eye"></i></span>
						<div class="inv-feedback inv-pass"></div>
					</div>
				 </div>
			</div>			
			<div class="row mt-1">
				<div class="col-sm-12 col-12">
					<div class="text-field">
						<label>Confirm Password</label>
						<input type="password" minlength="6" maxlength="30" class="form-control" name="re_pass"  placeholder=" " required autocomplete="off"><span class="showpwd"><i class="bi bi-eye"></i></span>
						<div class="inv-feedback inv-re_pass"></div>
					</div>
				 </div>
			</div>
			
			<div class="row">
				<div class="col-12"><p class="minilegal">By continuing, you agree to our <a href="#" class="open-pp">Privacy Policy</a> and <a class="open-tu" href="#">Terms of Service</a></p></div>
			</div>
			
			<div class="row">
				<div class="col-sm-12 col-12 text-center">
					<button class="btn-create-account">Create account</button>
				</div>
			</div>
			<div class="row mt-1">
				<div class="col-sm-12 col-12 text-center">
					<!--<button class="btn-google"><i class="bi bi-google"></i>Sign in with Google</button>-->
					<div id="g_id_onload" data-auto_prompt=false data-client_id="599819786201-d8jf3bh2o9rq93okki548nbd06imeo3p.apps.googleusercontent.com" data-callback="handleCredentialResponse"></div>
					<div class="g_id_signin" data-type="standard" data-scope="profile email" data-callback="handleCredentialResponse"></div>
					<div class="inv-feedback3"></div>
					<!--<div class="ihavecode" onClick="toStep1()">Choose template again</div>-->
					<div class="ihaveaccount" onClick="showLogin()">I already have an user account</div>
					<div class="ihavecode" onClick="toStep3()">I already have my validation code</div>

				</div>
			</div>

			

			<!--
			<div class="post-share text-center">
				<p>Share this page</p>
				<button class="sharer" data-sharer="facebook" data-url="{{page.canonical}}"><i class="bi bi-facebook"></i></button>
				<button class="sharer" data-sharer="twitter" data-url="{{page.canonical}}"><i class="bi bi-twitter-x"></i></button>
				<button class="sharer" data-sharer="email" data-url="{{page.canonical}}"><i class="bi bi-envelope"></i></button>
				<button class="sharer" data-sharer="whatsapp" data-url="{{page.canonical}}"><i class="bi bi-whatsapp"></i></button>
			</div>
			-->

		</div>
	</div>

</div>

<div class="step step3">
	<h2>Verify your account:</h2>
	<div class="step_inner">
		<div class="response-success"></div>
		<div class="codeval_cont">
			<div class="row">
				<div class="col-3"><input autofocus type="number" class="form-control text-center kwvn kwvn1" maxlength="1"></div>
				<div class="col-3"><input type="number" class="form-control text-center kwvn kwvn2" maxlength="1"></div>
				<div class="col-3"><input type="number" class="form-control text-center kwvn kwvn3" maxlength="1"></div>
				<div class="col-3"><input type="number" class="form-control text-center kwvn kwvn4" maxlength="1"></div>
			</div>
			<div class="inv-feedback2"></div>
			<div class="row mt-1">
				<div class="col-12"><button class="btn-verify-account">Verify account</button></div>
			</div>
			<div class="row mt-2">
				<div class="col-12"><span class="backtosign">Re-enter my email and password</span></div>
			</div>
			
		</div>
	</div>

</div>

<div class="step step4">

	<h2>Publish your website:</h2>

	<div class="step_inner">

		<p class="text-center mt-2">Configure your website now or do it later</p>

		<div class="form-group row mt-3 mb-0">
			<label>Project name</label>
			<div class="col-12">
				<input type="text" class="form-control nameproject" name="nameproject" placeholder="Project name" value="{{namep}}">
			</div>
		</div>
		<div class="inv-feedback inv-nameproject"></div>

		<div class="form-group row mt-3 mb-0">
			<div class="col-12">
				<label>Customize the URL of your website</label>
				<div class="input-group mb-3">
					<input type="text" class="form-control metainput seourl" name="projecturl" placeholder="username" value="{{urlp}}">
					<span class="input-group-text">.kweb.ai</span>
				</div>
			</div>
		</div>
		<div class="inv-feedback inv-seourl"></div>

		<div class="seocontset">

			<div class="form-group row mb-0">
				<label>Title and description for home page</label>
				<div class="col-md-12">
					<input type="text" name="seotit" value="{{pag.seotit}}" class="form-control seotit metainput" placeholder="Title" />
				</div>
			</div>			
			<div class="form-group row">
				<div class="col-md-12">
					<textarea name="seodes" class="form-control metainput seodes" placeholder="Meta Description" style="height: 100px" maxlength="160">{{pag.seodes}}</textarea>
					<div class="row">
						<div class="col-12 text-right"><span class="info-text mt-2">Max. 160 characters <span class="meta-left-char"></span></span></div>
					</div>
				</div>
			</div>
			<div class="inv-feedback inv-seodes"></div>

			<div class="google-preview">
				<div id="seopreview-google">
					<div class="js-seo-preview md-js-cleanslate">
						<div class="js-seo-preview__google-inner">
							<span class="js-seo-preview__google-title truncate">{{pag.seotit}}</span>
							<span class="js-seo-preview__google-url truncate">{{pag.canonical}}</span>
							<span class="js-seo-preview__google-desc">{{pag.seodes}}</span>
						</div>
					</div>
				</div>
			</div>

			<div class="form-group row mt-3">
				<div class="col-12">
					<label>Website visibility</label>
					<select class="form-select seonoindex" name="noindex">
						<option value="1">Hide this page for search engines</option>
						<option value="0">Show and publish this page for search engines</option>
					</select>
				</div>
			</div>
			
			<div class="form-group row mt-3">
				<div class="col-12">
					<button title="Finish" type="button" class="btn-finish">Finish</button>
				</div>
			</div>
			
		</div>
	</div>

</div>
{{/login}}

{{#login}}
<div class="step step5">
	
	{{#user}}
	<div class="infouser_cont">
		<div class="infouser">
			{{{img}}}
			<h3>{{nom}} {{ape}}</h3>
			<p>{{mai}}</p>
		</div>
	</div>
	{{/user}}	

	<h2>Edit page:</h2>
	<div class="step_inner">
		<p class="text-center mt-2">The page has been added to your user account. Choose a template and start editing right now.</p>
		<p><a href="{{config.rooti}}/pages/{{pag.cod}}/1/" title="Edit page" type="button" class="bactnolog btn-edit-page"><i class="bi bi-pencil"></i> EDIT PAGE</a></p>
	</div>
</div>
{{/login}}

<script>

	function showLogin() {
		$(".register_cont").hide();
		$(".login_cont").show();
	}

	function showReg() {
		$(".register_cont").show();
		$(".login_cont").hide();
	}

	
	$(".btn-finish").click(function() {

		preok();
		$(".inv-feedback").hide();
		$(".leftbar").append('<div class="pre_side"><span><img src="{{config.root}}/img/load.gif" width="50"></span></div>');
		
		$.post("https://my.kweb.ai/php/ajx.php", { 

			acc:"finish", 
			nameproject: $(".nameproject").val(), 
			projectedit:$("#projectedit").val(), 
            tokenproject:$("#tokenproject").val(),
            pageedit: '{{pag.cod}}',
			seourl: $(".seourl").val(),
			seotit: $(".seotit").val(),
			seodes: $(".seodes").val(),
			seonoindex: $(".seonoindex").val(),

		}, function(data) {

			if(data.res==1) {

                //ok(data.msg, 5000);
				//toStep4();
				document.location.href=data.url;
				
			} else if(data.res==2) {

				$(".pre_side").remove();
				alert(data.msg);

			} else {

				$(".pre_side").remove();
				$("."+data.field).show().html(data.msg);
			}
		},'json');
		return false;
	});
	
	
	

	function updateMeta(cod){

		var seotit = $(".seotit").val(); $(".js-seo-preview__google-title").html(seotit);
		var seodes = $(".seodes").val(); $(".js-seo-preview__google-desc").html(seodes);
		var seourl = $(".seourl").val(); $(".js-seo-preview__google-url").html("https://"+seourl+".kweb.ai");

		var metaLength = $(".seodes").val().length;
		var leftChar = 160 - metaLength;
		if(leftChar<6) { $(".meta-left-char").addClass("less5"); } else { $(".meta-left-char").removeClass("less5"); }
		if(leftChar >= 0){ $(".meta-left-char").text(leftChar); }
	}

	$(".metainput").keyup(function(){
		updateMeta();
	});

	$(".metainput").keyup(function(){
		updateMeta();
	});

	$(".nominput").keyup(function(){
		$(".infopage span").html($(this).val());
	});	


	function showeditmode() {
		
		$(".btn-edit-page").addClass("active");
		setTimeout(function(){
			$(".btn-edit-page").removeClass("active");
		},1000);
		
		ko("Create your user account for free to access editing mode.",5000);
	}
		
	function showSignupForm() {

		if(!$(".step2").hasClass("active")) {
			
			$(".step2").addClass("active");
			$(".step2 .step_inner").show();
			
			$(".step1, .step3, .step4, .step5").removeClass("active");
			$(".step1 .step_inner, .step3 .step_inner, .step4 .step_inner, .step5 .step_inner").hide();
		}
	}
		

	$(".btn-login-account").click(function() {

		preok();
		$(".inv-feedback").hide();
		$(".leftbar").append('<div class="pre_side"><span><img src="{{config.root}}/img/load.gif" width="50"></span></div>');

        projectedit=$(".start_templates_cont.active").attr("data-projectedit");
        pageedit=$(".start_templates_cont.active").attr("data-pageedit");

		$.post("https://my.kweb.ai/php/ajx.php", { 

			acc:"loginnewweb", 
			project:projectedit,
			page:pageedit,
			email:$(".useremail2").val(), 
			pass:$("input[name=pass2]").val(), 
			color: $("#colorproject").val()

		}, function(data) {

			if(data.res==1) {

				$(".pre_side").remove();
				ok(data.msg, 5000);
				document.location.href=data.url;

			} else {

				$(".pre_side").remove();
				ko(data.msg, 5000);
			}
		},'json');
		return false;
	});
	
	

	$(".btn-create-account").click(function() {

		preok();
		$(".inv-feedback").hide();
        
        projectedit=$(".start_templates_cont.active").attr("data-projectedit");
        pageedit=$(".start_templates_cont.active").attr("data-pageedit");

		$.post("https://my.kweb.ai/php/ajx.php", { 

			acc:"newaccount", 
			project:projectedit,
			page:pageedit,
			email:$(".useremail").val(), 
			name:$(".username").val(), 
			lname:$(".userlname").val(), 
			pass:$("input[name=pass]").val(), 
			re_pass:$("input[name=re_pass]").val(),
			color: $("#colorproject").val()
		
		}, function(data) {

			if(data.res==1) {

				toStep3();
				ok(data.msg, 4000);
				$(".response-success").html(data.msg);
				$("#empailproject").val(data.emailproject);

			} else if(data.res==2) {

				ko(data.msg, 4000);
				document.location.href=data.url;

			} else {

				ko(data.msg, 4000);
				$(".inv-"+data.field).html(data.msg);
				$(".inv-"+data.field).show();
			}
		},'json');
		return false;
	});
		
		
	$(".backtosign").click(function() {
		toStep2();
	});
		
		
	$(".btn-verify-account").click(function() {

        pageedit=$(".start_templates_cont.active").attr("data-pageedit");
		
		preok();
		$(".inv-feedback").hide();
		
		$.post("https://my.kweb.ai/php/ajx.php", { 

			acc:"verifyaccount", 
			email:$(".useremail").val(), 
			projectedit:$("#projectedit").val(), 
            tokenproject:$("#tokenproject").val(),
            pageedit: pageedit,
			kwvn1: $(".kwvn1").val(),
			kwvn2: $(".kwvn2").val(),
			kwvn3: $(".kwvn3").val(),
			kwvn4: $(".kwvn4").val(),
			color: $("#colorproject").val()

		}, function(data) {

			if(data.res==1) {

                ok(data.msg, 5000, "reload");
				document.location.href=data.url;
				
			} else if(data.res==2) {

				ko(data.msg, 4000);
				document.location.href=data.url;

			} else {

				ko(data.msg, 4000);
				$(".inv-feedback2").html(data.msg);
			}
		},'json');
		return false;
	});
		
		
		
	function handleCredentialResponse(response) {

		try {

			if (response && response.credential) {
			  // Accede a los datos del perfil del usuario
				var userCredential = response.credential;

				const tokenParts = userCredential.split('.');
				const decodedPayload = atob(tokenParts[1]);
				const payloadObject = JSON.parse(decodedPayload);
				const userEmail = payloadObject.email;
				const userName = payloadObject.name;
				const userLastName = payloadObject.family_name;
				const userProfilePicture = payloadObject.picture;
				const userId = payloadObject.sub;

				preok();
				$(".inv-feedback").hide();

				projectedit=$(".start_templates_cont.active").attr("data-projectedit");
				pageedit=$(".start_templates_cont.active").attr("data-pageedit");

				$.post("https://my.kweb.ai/php/ajx.php", { 

					acc:"newgoogleaccount", 
					project: projectedit,
					page: pageedit,
					email: userEmail, 
					userId: userId,
					userProfilePicture: userProfilePicture,
					userName: userName,
					userLastName: userLastName,
					color: $("#colorproject").val()

				}, function(data) {

					if(data.res==1) {

						ok(data.msg, 5000, "reload");
						document.location.href=data.url;

					} else if(data.res==2) {

						ko(data.msg, 4000);
						document.location.href=data.url;

					} else if(data.res==3) {

						ok(data.msg, 5000, "reload");
						if(data.url) { document.location.href=data.url; }

					} else {

						ko(data.msg, 4000);
						$(".inv-feedback3").show().html(data.msg);
					}
				},'json');
				return false;

			} else {

				$(".inv-feedback3").html('Login failed');
				$(".inv-feedback3").show();				
			}

		} catch (error) {

			$(".inv-re_pass").html('Error handling response:', error);
			$(".inv-re_pass").show();	
		}
	}
		
		
	function toStep1() {
		
		$(".step1").show();
		$(".step2").show();
		$(".step3").hide();
		$(".step4").hide();

		$(".step1").addClass("active");
		$(".step1 .step_inner").show();

		$(".step2, .step3, .step4").removeClass("active");
		$(".step2 .step_inner, .step3 .step_inner, .step4 .step_inner").hide();	
		
		$(".btn-save-page").removeClass("active");
	}		
		
	function toStep2() {
		
		$(".step1").hide();
		$(".step2").show();
		$(".step3").hide();
		$(".step4").hide();

		$(".step2").addClass("active");
		$(".step2 .step_inner").show();

		$(".step1, .step3, .step4").removeClass("active");
		$(".step1 .step_inner, .step3 .step_inner, .step4 .step_inner").hide();	
	}
				
	function toStep3() {
		
		$(".step1").hide();
		$(".step2").hide();
		$(".step3").show();
		$(".step4").hide();

		$(".step3").addClass("active");
		$(".step3 .step_inner").show();

		$(".step1, .step2, .step4").removeClass("active");
		$(".step1 .step_inner, .step2 .step_inner, .step4 .step_inner").hide();	
	}
		
	function toStep4() {
		
		$(".step1").hide();
		$(".step2").hide();
		$(".step3").hide();

		$(".step4").addClass("active");
		$(".step4 .step_inner").show();

		$(".step1, .step2, .step3").removeClass("active");
		$(".step1 .step_inner, .step2 .step_inner, .step3 .step_inner").hide();	
	}


	$('.kwvn').on('input', function() {

		var inputValue = $(this).val().slice(0, 1);
		$(this).val(inputValue);

		var currentIndex = $('.kwvn').index(this);

		if(currentIndex < $('.kwvn').length - 1 && inputValue !== '') {
			$('.kwvn').eq(currentIndex + 1).focus();
		}
	});


    $(".showpwd").on('click', function(event) {
		
		e=$(this).prev("input");
        event.preventDefault();

        if(e.attr("type") == "text"){
            e.attr('type', 'password');
            $(this).find("i").removeClass("bi bi-eye-slash");
            $(this).find("i").addClass("bi bi-eye");
        }else if(e.attr("type") == "password"){
            e.attr('type', 'text');
            $(this).find("i").addClass("bi bi-eye-slash");
            $(this).find("i").removeClass("bi bi-eye");
        }
    });
	</script>


{{#login}}
<script>
	$(".guidebg").show();
	$(".guidebg").html('<div class="texthelp"><i class="bi bi-arrow-down"></i></div>');	
</script>
{{/login}}

{{^login}}
{{^empailp}}
<script>
	toStep2();
	$(".guidebg").show();
	$(".guidebg").html('<div class="texthelp"><i class="bi bi-arrow-down"></i></div>');	
	
	function showaccountmode() {

		$("#tab1").show();
		$(".bactnolog").removeClass("active");
		$(".btn-save-page").addClass("active");
		toStep2();
	}
	</script>
{{/empailp}}

{{#empailp}}
{{^validated}}
<script>
	toStep3();
	$(".response-success").html("{{{msgempailp}}}");
	function showaccountmode() {
		$("#tab1").show();
		$(".bactnolog").removeClass("active");
		$(".btn-save-page").addClass("active");
		toStep3();
	}
</script>
{{/validated}}

{{#validated}}
<script>
	toStep4();
	function showaccountmode() {

		$("#tab1").show();
		$(".bactnolog").removeClass("active");
		$(".btn-save-page").addClass("active");
		toStep4();
	}
	</script>
</script>
{{/validated}}
{{/empailp}}

{{/login}}

{{#login}}
<script>$(".step5").addClass("active");</script>
{{/login}}