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

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

{% block user-maintenance-content %}
<form class="full-screen-form" name="packagingSystemMaintForm" id="packagingSystemMaintForm" method="post">
	{% csrf_token %}
	<div class="grey-background">
		<table style="width: 100%;">
			<tr>
				<td style="width: 600px; height: 200px;" colspan="3">
				<fieldset class="titled-border" style="height:98%; width: 98%;">
					<legend class="titled-border-legend">
						Trolley
					</legend>
					<table style="width: 100%; height: 200px;">
						<tr>
							<td align="center">
							<button id="trolley-go-lid-roll" name="trolley-go-lid-roll" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_2leftarrow.png"> Lid Roll
							</button></td>
							<td align="center">
							<button id="trolley-go-sealer" name="trolley-go-sealer" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_2uparrow.png"> Sealer
							</button></td>
							<td align="center">
							<button id="trolley-go-output-bin" name="trolley-go-output-bin" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_2rightarrow.png"> Output Bin
							</button></td>
						</tr>
						<tr>
							<td align="center">
							<button id="trolley-present-lid" name="trolley-present-lid" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_run.png"> Present Lid
							</button></td>
							<td align="center">
							<button id="trolley-go-top" name="trolley-go-top" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_up.png"> Trolley Up
							</button></td>
							<td align="center">
							<button id="trolley-pump" name="trolley-pump" class="train-button">
								{% if trolleypump == '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 %} Trolley Pump
							</button></td>
						</tr>
					</table>
				</fieldset></td>
				<td style="width: 200px; height: 420px;" rowspan="2">
					<fieldset class="titled-border" style="height:98%; width: 98%;">
					<legend class="titled-border-legend">
						Blister Feeder
					</legend>
					<table style="width: 100%; height: 420px;">
						<tr>
							<td align="center">
							<button id="bsf-go-top" name="bsf-go-top" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_up.png"> Feeder Up
							</button></td>
						</tr>
						<tr>
							<td align="center">{% if show_bsf_in == True %}
							<button id="bsf-retract" name="bsf-retract" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_down.png"> Feeder In
							</button>{% endif %}</td>
						</tr>
						<tr>
							<td align="center">
							<button id="bsf-re-zero" name="bsf-re-zero" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_gohome.png"> Rezero Feeder
							</button></td>
						</tr>
						<tr>
							<td align="center">
							<button id="bsf-pump" name="bsf-pump" class="train-button">
								{% if bsfpump == '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 %} Feeder Pump
							</button></td>
						</tr>
					</table>
				</fieldset></td>
			</tr>
			<tr>
				<td style="width: 400px; height: 200px;" colspan="2">
					<fieldset class="titled-border" style="height:98%; width: 98%;">
					<legend class="titled-border-legend">
						Sealer
					</legend>
					<table style="width: 100%; height: 200px;">
						<tr>
							<td align="center">
							<button id="sealer-roller-back" name="sealer-roller-back" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_up.png"> Roller Back
							</button></td>
							<td align="center">
							<button id="flipper-go-top" name="flipper-go-top" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_up.png"> Flipper Up
							</button></td>
						</tr>
						<tr>
							<td align="center">
							<button id="sealer-roller-front" name="sealer-roller-front" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_down.png"> Roller Front
							</button></td>
							<td align="center">
							<button id="flipper-pump" name="flipper-pump" class="train-button">
								{% if flipperpump == '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 %} Flipper Pump
							</button></td>
						</tr>
					</table>
				</fieldset></td>
				<td style="width: 200px; height: 200px;">
					<fieldset class="titled-border" style="height:98%; width: 98%;">
					<legend class="titled-border-legend">
						Reset/Test
					</legend>
					<table style="width: 100%; height: 200px;">
						<tr>
							<td align="center">
							<button id="re-zero-all" name="re-zero-all" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_gohome.png"> Re-Zero All
							</button></td>
						</tr>
						<tr>
							<td align="center">
							<button id="test-printer" name="test-printer" class="train-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_fileprint.png"> Test Printer
							</button></td>
						</tr>
					</table>
				</fieldset></td>
			</tr>
		</table>
	</div>
	<input type="hidden" name="trolley-pump-icon" id="trolley-pump-icon" value="{{ trolleypump }}"/>
	<input type="hidden" name="bsf-pump-icon" id="bsf-pump-icon" value="{{ bsfpump }}"/>
	<input type="hidden" name="flipper-pump-icon" id="flipper-pump-icon" value="{{ flipperpump }}"/>
</form>
{% endblock %}