{% extends "hmi-user-maintenance-screen.html" %}

{% block header-extras %}
{{ block.super }}
{% endblock %}

{% block user-maintenance-content %}
<form class="full-screen-form" name="eoatMaintForm" id="eoatMaintForm" method="post">
	{% csrf_token %}
	<div class="grey-background">
		<table style="width: 100%;">
			<tr>
				<td style="width: 100%; height: 115px;">
				<fieldset class="titled-border" style="height:98%; width: 98%;">
					<legend class="titled-border-legend">
						Packaging Area
					</legend>
					<table style="width: 100%; height: 94px;">
						<tr>
							<td align="center">
							<button id="eoat-go-labelsealer" name="eoat-go-labelsealer" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_2leftarrow.png"> Label Sealer
							</button></td>
							<td align="center">
							<button id="eoat-go-blisterfeeder" name="eoat-go-blisterfeeder" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_2rightarrow.png"> Blister Feeder
							</button></td>
							<td align="center">
							<button id="eoat-safe-travel" name="eoat-safe-travel" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_gohome.png"> Safe Travel
							</button></td>
						</tr>
					</table>
				</fieldset></td>
			</tr>
			<tr>
				<td style="width: 100%; height: 350px;">
					<fieldset class="titled-border" style="height:98%; width: 98%;">
					<legend class="titled-border-legend">
						Canister Area
					</legend>
					<table style="width: 100%; height: 325px;">
						<tr>
							<td align="center" colspan="4">
							<button id="eoat-lights" name="eoat-lights" class="train-button">
								{% if eoatlights == "on" %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/light_switch_on.png">
								{% else %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/light_switch.png">{% endif %} Lights
							</button></td>
						</tr>
						<tr>
							<td align="center">
							<button id="eoat-go-left-door" name="eoat-go-left-door" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_left.png"> Left Door
							</button></td>
							<td align="center">
							<button id="eoat-spin-o" name="eoat-spin-o" class="train-button">
								{% if omotor == "on" %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_stop.png">
								{% else %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_reload.png">{% endif %} Top Left (O)
							</button></td>
							<td align="center">
							<button id="eoat-spin-p" name="eoat-spin-p" class="train-button">
								{% if pmotor == "on" %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_stop.png">
								{% else %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_reload.png">{% endif %} Top Right (P)
							</button></td>
							<td align="center">
							<button id="eoat-go-right-door" name="eoat-go-right-door" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_right.png"> Right Door
							</button></td>
						</tr>
						<tr>
							<td>&nbsp;</td>
							<td align="center">
							<button id="eoat-spin-m" name="eoat-spin-m" class="train-button">
								{% if mmotor == "on" %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_stop.png">
								{% else %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_reload.png">{% endif %} Low Left (M)
							</button></td>
							<td align="center">
							<button id="eoat-spin-n" name="eoat-spin-n" class="train-button">
								{% if nmotor == "on" %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_stop.png">
								{% else %}
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_reload.png">{% endif %} Low Right (N)
							</button></td>
							<td align="center">
							<button id="eoat-dump-card" name="eoat-dump-card" class="train-button">
								 Dump Card
							</button></td>
						</tr>
					</table>
				</fieldset></td>
			</tr>
		</table>
	</div>
	<input type="hidden" name="eoat-lights-icon" id="eoat-lights-icon" value="{{ eoatlights }}"/>
	<input type="hidden" name="o-motor-icon" id="o-motor-icon" value="{{ omotor }}"/>
	<input type="hidden" name="p-motor-icon" id="p-motor-icon" value="{{ pmotor }}"/>
	<input type="hidden" name="m-motor-icon" id="m-motor-icon" value="{{ mmotor }}"/>
	<input type="hidden" name="n-motor-icon" id="n-motor-icon" value="{{ nmotor }}"/>
</form>
{% endblock %}