{% load static %}

<style>
button {
  font-size: 20px;
}
</style>

<form action="{% url 'facility_rules' %}" method="post">

	{% csrf_token %}

	<div id="slide_01">
		<table align="center" style="width:100%">
			<tr>
				<td align="center" style="color: white;  margin: 0; padding: 10px 0;" bgcolor="lightblue" colspan="2">
					<h1 style="max-width: 90%; margin: 0 auto; padding: 0;">
						COVID-19 <br>Safety Protocols and Policies
					</h1>
				</td>
			</tr>
			<tr>
				<td style="margin: 10px 10px 20px; padding: 10px;">
					<h4>
					<ul>
					<li>This safety briefing describes the changes implemented to protect against the spread of COVID-19.</li>
					<li>All users are expected to follow the guidelines outlined in this training.</li>
					</ul>
					</h4>
				</td>
			</tr>
			<tr>
				<td>
					<button type="button" class="btn btn-success" onclick="window.location.href='/'">Exit</button>
				</td>
				<td>
					<button type="button" class="btn btn-success" onclick="$('#slide_01').hide(); $('#slide_02').show(); window.scrollTo(0,0);">Next</button>
				</td>
			</tr>
		</table>
	</div>


	<div id="slide_02" style="display:none">
		<table align="center" style="width:100%">
			<tr>
				<td align="center" style="color: white;  margin: 0; padding: 10px 0;" bgcolor="lightblue" >
					<h1 style="max-width: 90%; margin: 0 auto; padding: 0;">
						Safety Protocols and Policies
					</h1>
				</td>
			</tr>
			<tr>
				<td style="margin: 10px 10px 20px; padding: 10px;">
					<h4>
					<ul>
						<li>Maintain social distancing guidelines.</li>
						<li>Follow entering and exiting procedures.</li>
						<li>Adhere to occupancy limits for each space.</li>
						<li>Minimize material brought into the NanoFab.</li>
						<li>Sanitize surfaces, equipment, computers, chairs, etc… before and after each use.</li>
					</ul>
					</h4>
				</td>
			</tr>
			<tr>
				<td>
					<button type="button" class="btn btn-success" onclick="$('#slide_02').hide(); $('#slide_01').show(); window.scrollTo(0,0);">Back</button>
				</td>
				<td align="right">
					<button type="button" class="btn btn-success" onclick="$('#slide_02').hide(); $('#slide_11_question').show(); window.scrollTo(0,0);">Next</button>
				</td>
			</tr>
		</table>
	</div>

	<div id="slide_11_question" style="display:none">
		<table align="center" style="width:100%">
			<tr>
				<td align="center" style="color: white;  margin: 0; padding: 10px 0;" bgcolor="lightblue" colspan="2">
					<h1 style="max-width: 90%; margin: 0 auto; padding: 0;">
						Knowledge Check
					</h1>
				</td>
			</tr>
			<tr>
				<td>
				<h4>You have tried several times to make a reservation for an area and have been declined due to the occupancy limit. What do you do?</h4>
				<ul><h3>
					<li><a href="javascript:void(0)" onclick="$('#wrong_NEMO').hide(); $('#right_NEMO').show();">Contact staff for assistance.</a></li>
					<li><a href="javascript:void(0)" onclick="$('#wrong_NEMO').show(); $('#right_NEMO').hide();">Wait until everyone goes home and try to sneak in one of the doors.</a></li>
					<li><a href="javascript:void(0)" onclick="$('#wrong_NEMO').show(); $('#right_NEMO').hide();">Lash out at other users for working to much.</a></li>
				</h3></ul>
				</td>
			</tr>
		</table>
		<div id="wrong_NEMO" style="display:none">
			<div class="panel panel-danger">
				<div class="panel-heading">The answer you selected is not correct. Try again, and please choose the correct answer.</div>
				<div class="panel-body">Subverting rules or manners could lead to the revocation of your access which won't help get your work done.</div>
			</div>
		</div>
		<div id="right_NEMO" style="display:none">
			<div class="panel panel-success">
				<div class="panel-heading">This is the correct answer.</div>
				<div class="panel-body">If you are having trouble please let us know. It is important that everyone has a fair chance to access the areas to perform their research.</div>
			</div>
			<button type="button" class="btn btn-success" onclick="$('#slide_11_question').hide(); $('#conclusion').show(); window.scrollTo(0,0);">Continue</button>
		</div>
	</div>


	<div id="conclusion" style="display:none">
		<table align="center" style="width:100%">
			<tr>
				<td align="center" style="color: white;  margin: 0; padding: 10px 0;" bgcolor="lightblue">
					<h1 style="max-width: 90%; margin: 0 auto; padding: 0;">
						Safety Protocols and Policies
					</h1>
				</td>
			</tr>

			<tr>
				<td style="margin: 10px 10px 20px; padding: 10px;">
					<h4>
					<p>This is the end of the training session.  Please remember to wear a face mask at all times, wipe down areas before and after you work, and practice social distancing while working in the laboratories.</p>
					</h4>
				</td>
			</tr>
			<tr>
				<td align="center">
					<h1>
					<button type="submit" style="white-space: normal" class="btn btn-success">Click here to officially complete your training</button>
					</h1>
				</td>
			</tr>
		</table>
	</div>
</form>