{% extends "hmi-adv-diag-screen.html" %}

{% block header-extras %}
{{ block.super }}
<script>
	$(function() {
		var moveAdjValues = ["0.01", "0.05", "0.1", "0.5", "1", "2", "3", "4", "5"];
		var moveAdjIndex = 3;
		var moveVal = $('#slider-move-amount').val();

		if (moveVal.length > 0) {
			for (var i = 0; i < moveAdjValues.length; i++) {
				if (moveVal == moveAdjValues[i]) {
					moveAdjIndex = i;
					break;
				}
			}
		}

		$('#minus-amount').click(function() {
			moveAdjIndex--;
			if (moveAdjIndex < 0) {
				moveAdjIndex = 0;
			}
			$('#slider-move-amount').val(moveAdjValues[moveAdjIndex]);
		});

		$('#plus-amount').click(function() {
			moveAdjIndex++;
			if (moveAdjIndex > moveAdjValues.length - 1) {
				moveAdjIndex = moveAdjValues.length - 1;
			}
			$('#slider-move-amount').val(moveAdjValues[moveAdjIndex]);
		});
	}); 
</script>
{% endblock %}

{% block adv-diag-content %}
<form class="full-screen-form" name="sealerDiagForm" id="sealerDiagForm" method="post">
	{% csrf_token %}
	<div class="grey-background">
		<table style="width: 100%;">
			<tr>
				<td style="width: 320px; height: 465px;">
				<fieldset class="titled-border" style="height:98%; width: 98%;">
					<legend class="titled-border-legend">
						Lids
					</legend>
					<table style="width: 100%; height: 437px;">
                    {% if not has_stpc %}
						<tr>
							<td align="center">
							<button id="roller-left" name="roller-left" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_left.png"></td>
										<td class="settings-bottom-button-cell">Roller<br>Left</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							<button id="roller-right" name="roller-right" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_right.png"></td>
										<td class="settings-bottom-button-cell">Roller Right</td>
									</tr>
								</table>
							</button></td>
						</tr>
						<tr style="height: 6px; line-height: 6px;">
							<td style="height: 6px;">&nbsp;</td>
						</tr>
                    {% endif %}
						<tr>
							<td align="center">
							<button id="slider-left" name="slider-left" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_left.png"></td>
										<td class="settings-bottom-button-cell">Slider<br>Left</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							<button id="slider-right" name="slider-right" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_right.png"></td>
										<td class="settings-bottom-button-cell">Slider Right</td>
									</tr>
								</table>
							</button></td>
						</tr>
						<tr style="height: 6px; line-height: 6px;">
							<td style="height: 6px;">&nbsp;</td>
						</tr>
						<tr>
							<td align="center">
                            {% if has_stpc %}
                            <button id="slider-print" name="slider-print" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_2leftarrow.png"></td>
										<td class="settings-bottom-button-cell">Go Slider<br>Print</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							<button id="slider-peel" name="slider-peel" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_2rightarrow.png"></td>
										<td class="settings-bottom-button-cell">Go Slider<br>Peel</td>
									</tr>
								</table>
							</button>
                            {% else %}
							<button id="slider-left-full" name="slider-left-full" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_2leftarrow.png"></td>
										<td class="settings-bottom-button-cell">Slider<br>Left Full</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							<button id="slider-right-full" name="slider-right-full" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_2rightarrow.png"></td>
										<td class="settings-bottom-button-cell">Slider Right Full</td>
									</tr>
								</table>
							</button>{% endif %}</td>
						</tr>
						<tr style="height: 6px; line-height: 6px;">
							<td style="height: 6px;">&nbsp;</td>
						</tr>
						<tr>
							<td align="center">
							<button id="present-lid" name="present-lid" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_run.png"></td>
										<td class="settings-bottom-button-cell">Present Lid</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							<button id="re-zero-slider" name="re-zero-slider" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_gohome.png"></td>
										<td class="settings-bottom-button-cell">Re-Zero Slider</td>
									</tr>
								</table>
							</button></td>
						</tr>
                    {% if has_stpc %}
						<tr style="height: 6px; line-height: 6px;">
							<td style="height: 6px;">&nbsp;</td>
						</tr>
                        <tr>
							<td align="center">
							<button id="peel-lid" name="peel-lid" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_run.png"></td>
										<td class="settings-bottom-button-cell">Peel Lid</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							&nbsp;
							</td>
						</tr>
                     {% endif %}
                        <tr style="height: 100%;">
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td align="left" colspan="2" style="padding-left: 10px;">Move Amt:
							<input id="slider-move-amount" name="slider-move-amount" type="text" style="width: 50px;"
							value="{{ sliderIncrement }}" class="diag-short-input">
							in.</td>
						</tr>
						<tr>
							<td align="left" colspan="2" style="padding-left: 10px;">
							<button id="minus-amount" name="minus-amount" type="button" class="diag-move-adjust-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_remove.png">
							</button>
							<button id="plus-amount" name="plus-amount" type="button" class="diag-move-adjust-button">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_add.png">
							</button></td>
						</tr>
					</table>
				</fieldset></td>
				<td style="width: 480px; height: 465px;">
				<fieldset class="titled-border" style="height:98%; width: 98%;">
					<legend class="titled-border-legend">
						Sealer/Flipper
					</legend>
					<table style="width: 100%; height: 437px;">
						<tr>
							<td align="center">
							<button id="flipper-up" name="flipper-up" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_up.png"></td>
										<td class="settings-bottom-button-cell">Flipper<br>Up</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							<button id="flipper-down" name="flipper-down" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_down.png"></td>
										<td class="settings-bottom-button-cell">Flipper Down</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							<button id="flipper-pump" name="flipper-pump" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell">{% 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 %}</td>
										<td class="settings-bottom-button-cell">Flipper Pump</td>
									</tr>
								</table>
							</button></td>
						</tr>
						<tr>
							<td align="center">
							<button id="sealer-back" name="sealer-back" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_up.png"></td>
										<td class="settings-bottom-button-cell">Sealer Back</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							<button id="sealer-front" name="sealer-front" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_action_build_down.png"></td>
										<td class="settings-bottom-button-cell">Sealer Front</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							<button id="re-zero-sealer" name="re-zero-sealer" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_gohome.png"></td>
										<td class="settings-bottom-button-cell">Re-Zero Sealer</td>
									</tr>
								</table>
							</button></td>
						</tr>
						<tr>
							<td align="center">
							<button id="flipper-stick-label" name="flipper-stick-label" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_2uparrow.png"></td>
										<td class="settings-bottom-button-cell">Flipper Stick Label</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							<button id="flipper-pickup-label" name="flipper-pickup-label" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_2downarrow.png"></td>
										<td class="settings-bottom-button-cell">Flipper Pickup Label</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							<button id="re-zero-flipper" name="re-zero-flipper" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_gohome.png"></td>
										<td class="settings-bottom-button-cell">Re-Zero Flipper</td>
									</tr>
								</table>
							</button></td>
						</tr>
						<tr>
							<td align="center">
							<button id="sealer-back-wall" name="sealer-back-wall" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_2uparrow.png"></td>
										<td class="settings-bottom-button-cell">Sealer Back Wall</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							<button id="sealer-front-wall" name="sealer-front-wall" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_2downarrow.png"></td>
										<td class="settings-bottom-button-cell">Sealer Front Wall</td>
									</tr>
								</table>
							</button></td>
							<td align="center">
							<button id="sealer-label-brush" name="sealer-label-brush" class="diag-action-button">
								<table class="settings-button-table">
									<tr>
										<td class="settings-bottom-button-cell"><img class="img-rounded" src="{{ STATIC_URL}}img/cc_2uparrow.png"></td>
										<td class="settings-bottom-button-cell">Sealer Label Brush</td>
									</tr>
								</table>
							</button></td>
						</tr>
						<tr>
							<td align="right" colspan="3">
							<button id="all-stop" name="all-stop" class="diag-action-button" style="margin-right: 7px;">
								<img class="img-rounded" src="{{ STATIC_URL}}img/cc_stop.png"> STOP
							</button></td>
						</tr>
					</table>
				</fieldset></td>
			</tr>
		</table>
	</div>
	<input type="hidden" name="flipper-pump-icon" id="flipper-pump-icon" value="{{ flipperpump }}"/>
</form>
{% endblock %}