{% extends "layout.html" %}
{% block title %}Locker Zone{% endblock %}
{% block body %}
<center>
	<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

	<section class="section">
		<div class="container">
			<h1 class="title">🔒 Locker Zone</h1>
			<img style="width: 25rem;" src="/locker.jpg">
			<div>
				<p><strong>Locker zone seems locked.</strong> But someone left their notes here. Can you unlock them?</p>
			</div>
			<br/>
			<div class="card" style="width: 50rem;">
				<header class="card-header">
				  <p class="card-header-title" style="font-size: 1.3rem;">Notes Application</p>
				</header>
				<div class="card-content">
				  <div class="content" id="boxer" style="display: none;">
					<label style="color: black;display:block;text-align: left;" for="kc">Keycloak:</label>
					<input class="input" type="text" id="kc" readonly value="http://keycloak:8080/auth">
					<br>
					<label style="color: black;display:block;text-align: left;"for="goapp">Application:</label>
					<input class="input" type="text" id="goapp" readonly value="http://goapp:8080">
					<br>
					<div style="margin-top:0.5rem;">

						<label style="color: black;display:block;text-align: left;" for="kc"><strong>Created</strong>: <span id="crated-min"></span> minutes ago (<span id="left-min"></span> minutes left)</label>
					</div>
				  </div>
				</div>
				<footer class="card-footer">
						<div id="starterbox" style="justify-content: center; display: flex; width: 100%;">
							<Form id="dispatchstart" method="POST" action="/start" enctype="multipart/form-data">
								<!-- TODO: Remove maintenance firmware upload -->
								<!-- <input type="file" name="firmware" id=""> -->

								<div class="cf-turnstile" data-sitekey="0x4AAAAAAAiHM7WUouxJKAql"></div>
								<button type="submit" id="instance-start" href="#" class="card-footer-item" style="font-weight: 600; cursor: pointer; font-size: 1.1rem; color: rgb(0, 165, 82);border: none;background: transparent;width: 100%;text-align: center;justify-content: center;">Start Instance</button>
							</Form>
						
						</div>
							<Form id="stopform" method="POST" action="/stop" style="width: 100%; display: none;">
								<div style="justify-content: center; display: flex; width: 100%;">

						<button type="submit" id="instance-stop" href="#" class="card-footer-item" style="display:none; font-weight:  600; cursor: pointer; font-size: 1.1rem; color: red;border: none;background: transparent;width: 100%;text-align: center;justify-content: center;">Stop Instance</button>
					</div>
					
					</Form>
						

				</footer>
			  </div>
			  <div class="card" style="width: 50rem; margin-top: 3rem; display: none;" id="adminbot">
				<header class="card-header">
				  <p class="card-header-title" style="font-size: 1.3rem;">Admin Bot</p>
				</header>
				<div class="card-content">
				  <div class="content" id="boxer2" style="display: none;">
			
				  </div>
				</div>
				<footer class="card-footer">
						<div id="starterbotbox" style="justify-content: center; display: flex; width: 100%;">
							<Form id="dispatchbot" method="POST" action="/bot">
								<div class="cf-turnstile" data-sitekey="0x4AAAAAAAiHM7WUouxJKAql"></div>
								<button type="submit" id="instance-bot" href="#" class="card-footer-item" style="font-weight: 600; cursor: pointer; font-size: 1.1rem; color: rgb(0, 119, 255);border: none;background: transparent;width: 100%;text-align: center;justify-content: center;">Dispatch Bot</button>
							</Form>
						</div>
					</Form>	
						

				</footer>
			  </div>
</center>
<script>


	if(window.localStorage.getItem('testing_token')){
		document.getElementById("dispatchstart").action = '/start?testing_token='+window.localStorage.getItem('testing_token');
		document.getElementById("dispatchbot").action = '/bot?testing_token='+window.localStorage.getItem('testing_token');
	}
	const start_btn = document.getElementById('instance-start');
	const stop_btn = document.getElementById('instance-stop');
	const created_min = document.getElementById('crated-min');
	const left_min = document.getElementById('left-min');
	const kc_url = document.getElementById('kc');
	const goapp_url = document.getElementById('goapp');
	const adminbot = document.getElementById('adminbot');
	const starterbox = document.getElementById('starterbox');
	const stopform = document.getElementById('stopform');
	const boxer = document.getElementById('boxer');
	
	const val_kc = "{{ details['kc_url'] }}";
	const val_goapp = "{{ details['go_url'] }}";
	const val_started_at = parseInt("{{ details['started_at'] }}");
	const val_ends_at = parseInt("{{ details['ends_at'] }}");
	if(val_kc !== ""){
		kc_url.value = val_kc;
		goapp_url.value = val_goapp;
		boxer.style.display = "block";
		start_btn.style.display = "none";
		stop_btn.style.display = "block";
		starterbox.style.display = "none";
		adminbot.style.display = "block";
		stopform.style.display = "flex";
		
	

		setInterval(function(){
			const now = new Date();
			const started_at = new Date(val_started_at * 1000);
			const ends_at = new Date(val_ends_at * 1000);
			const diff = Math.abs(ends_at - now);
			const diff_start = Math.abs(now - started_at);
			const diff_min = Math.ceil(diff / (1000 * 60));
			const diff_start_min = Math.ceil(diff_start / (1000 * 60));
			created_min.innerText = diff_start_min;
			left_min.innerText = diff_min;
		}, 1000);

	}





</script>
</p>

</div>

</section>
</center>
{% endblock %}