{% 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">
						Replace EOAT Hoop
					</legend>
					<table style="width: 100%; height: 94px;">
						<tr>
							<td align="center">
							<button id="eoat-do-replace-hoop" name="eoat-do-replace-hoop" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_run.png"> Replace Hoop
							</button></td>
							<td align="center"><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>
							<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;">&nbsp;</td>
			</tr>
		</table>
	</div>
<input type="hidden" name="eoat-lights-icon" id="eoat-lights-icon" value="{{ eoatlights }}"/>
</form>
{% endblock %}