{%- extends "templates/base.html" -%}

{%- block navbar -%}
{%- endblock -%}

{%- block content -%}
<section>
	<div class="mx-auto mt-20 mb-24 col-xl-4 col-lg-6 col-md-7 col-sm-9">
		<div class="card">
			<div class="text-center card-body">
				{%- if jingrow.form_dict.key -%}
				<h1>Your site is being prepared</h1>
				<p class="setup-message"></p>
				<svg class="spinner animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
					<circle style="color: var(--primary-light)" cx="12" cy="12" r="10" stroke="currentColor"
						stroke-width="4"></circle>
					<path style="opacity: 0.8; color: var(--primary)" fill="currentColor"
						d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
					</path>
				</svg>
				{%- else -%}
				<div>
					Invalid or expired key
				</div>
				{%- endif -%}
			</div>
		</div>
	</div>
</section>
{%- endblock -%}

{%- block footer -%}
{%- endblock -%}

{%- block script -%}
<script>
	let key = jingrow.utils.get_url_arg('key');
	let app = jingrow.utils.get_url_arg('app');

	jingrow.ready(() => {
		if (!key) {
			return;
		}

		poll_site_status();
	});

	function poll_site_status() {
		get_site_status()
			.then(site => {
				if (site.status != 'Active') {
					setTimeout(poll_site_status, 1000)
				} else {
					get_site_url_and_sid().then(url => {
						window.open(url, '_self');
					});
				}
			});
	}

	function get_site_status() {
		return jingrow.call('jcloude.api.saas.get_site_status', {
				key,
				app
			})
			.then(r => r.message);
	}

	function get_site_url_and_sid() {
		return jingrow.call('jcloude.api.saas.get_site_url_and_sid', {
				key,
				app
			})
			.then(r => r.message);
	}
</script>
{%- endblock -%}

{%- block style -%}
<style>
	body {
		background-color: #F3F5F8;
	}

	h1 {
		font-size: var(--font-size-lg);
		text-align: center;
	}

	.card {
		box-shadow: 0px 1px 42px rgba(97, 97, 97, 0.07), 0px 1px 4px rgba(255, 255, 255, 1);
		border-radius: 10px;
		border-color: transparent;
		padding: 0px 80px 60px 80px;
	}

	.card-body {
			padding: 0px;
	}

	.spinner {
		text-align: center;
		margin: 0 auto;
		color: var(--gray-600);
		width: 1.5rem;
		height: 1.5rem;
	}

	.animate-spin {
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>
{%- endblock -%}