{% extends 'w3bsite/classes/apps/defaults/html/base.html' %}
{% load static %}
{% block content %}

<!-- JS -->
<script type="text/javascript">
	toggle_top_bar("hide")
	toggle_left_bar("hide")
	toggle_right_bar("hide")
	check_authenticated(null, function(response) {
		if (response.error != null) {
			location.href = "/authentication/signin/"
		}
	})
	get_email_verified(function(email_verified) {
		if (email_verified == true || email_verified == "true" || email_verified == "True") {
			location.href = "/"
		}
	})
</script>

<!-- CONTENT -->
<div class="full_window_centered">
	<img src="{% static 'favicon.png' %}" width="45px" height="45px" style="display: block; margin: 0 auto; margin-bottom: 35px;">

	<!-- SIGN UP -->
	<div class="widget_container">
		<div class="widget_child">
			<h1 class="title">
				Activate Your Account
			</h1>		
			<p class="text" style="">
				Enter the verification code sent to your email address to activate your account.
			</p>
			<input id="code" type="text" placeholder="Verification Code" class="input" style="margin-bottom: 5px;">
			<p class="text" style="font-size: 12px; text-align: right; padding: 0px 20px 0px 20px; margin: 10px 0px 5px 0px;">
				<a href="#" class="empty_a" onclick="__resend_email__()">
					Resend Activation Email
				</a>
			</p>
			<p class="text" id="response" style="display: none; font-size: 12px; overflow: scroll;"></p>
			<div class="loader" id="loader" style="transform: scale(0.33); display: block; margin: 0 auto; display: none;"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
			<div style="display: flex;">
				<button class="button" style="width: 49%;" onclick="sign_out()">
					<a href="#" class="empty_a">
						Sign Out
					</a>
				</button>
				<div style="width: 2%; height: 1%;"></div>
				<button class="button" style="width: 49%;" onclick="__activate_account__()">
					<a href="#" class="empty_a">
						Activate
					</a>
				</button>
			</div>
		</div>
	</div>

	<h1 class="text_reversed" style="font-size: 6px; font-weight: 400; margin-top: 35px;">
		© 2020 VanDenBerghInc. All Rights Reserved.
	</h1>
</div>

<!-- JAVASCRIPT -->
<script type="text/javascript">
	
	// check id token.
	var EMAIL = localStorage.getItem("EMAIL")
	if (EMAIL == null || EMAIL == "null" || EMAIL == "None" || EMAIL == "") {
		get_email(function(email) {
			EMAIL = email
		})
	}

	// resend activation email.
	var response_element = document.getElementById("response")
	function __resend_email__() {
		function __do__() {
			try {
				request("/requests/authentication/send_code/", {
					response: response_element,
					loader:document.getElementById("loader"),
					email:EMAIL,
					mode:"activation",
				})
			} catch(e) {
				response_element.style.display = "block"
				response_element.style.color = "{{COLORS.red}}"
				response_element.innerHTML = "Refresh the web page."
			}
		}
		if (EMAIL == null || EMAIL == "null" || EMAIL == "None" || EMAIL == "") {
			get_email(function(email) {
				EMAIL = email
				__do__()
			})
		} else {
			__do__()
		}
	}

	// create encryption request.
	function __activate_account__() {
		var response_element = document.getElementById("response")
		request("/requests/authentication/activate/", {
			response: response_element,
			loader:document.getElementById("loader"),
			email:EMAIL,
			code:document.getElementById("code").value,
		}, function(response) {
			if (response.error == null) {
				location.href = "/account/settings/"
			}
		})
	}

</script>

{% endblock %}