<!DOCTYPE html>
<html>
<head>
	<link rel='stylesheet' type="text/css" href="{{ url_for('static',filename='styles/style.css') }}">
	<script src="{{url_for('static', filename='index.js')}}"></script>
	<title>inSPIRE-Interactive</title>
</head>
<body>
	<dev class = "page-wrapper">
	
		<!-- header -->
		{{ inspire_header|safe }}

		<div class = "contact-main-section">
			<div class = "contact-top-section">
				 <p> inSPIRE-Interactive Queue
				 </p>
			</div>
		</div>
		<br><br>

		<br><br>
		<center>
			{{ queue_svg|safe }}
		</center>

		<p class="contact-main-section" style="text-align: left; align-items: left;">
            You can cancel any job by entering the Job ID in the box below and clicking cancel:
			
			<div class="vertical-center" style="height:100px; margin-bottom: 0px;">
				<form id="cancel-job-form">
					<input type="text" id="cancel-job-input" name="cancel-job-input" style = "border:2px solid  rgb(5, 208, 141); width:250px;"  class="text-input" onkeypress="textSubmit(event, '{{ server_address }}', 'noAction')">
				</form>
			</div>
			<div class="vertical-center" style="height:100px; margin-bottom: 0px; margin-top: 0px;">
				<button id="cancel-job-button" class="job-button" onclick="cancelJobById('{{ server_address }}')">
					Cancel Selected Job
				</button>
			</div>
            <div id="cancel-text" class="adjusted-text"></div>
		</p>

		<br><br>

        {{ inspire_footer|safe }}
	</dev>
</body>
</html>
