{% extends "base.html" %}


{% block header-extras %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/hmi.css" />
<script>
	$(function() {
		$("#cancelusermaint").click(function() {
			window.location.href = "/hmi/close_maintenance/"
		});
	}); 
</script>
{% endblock %}

{% block body %}

<table>
	<tr>
		<td style="height: 60px; width: 800px;">
		<div class="nav-tab-div">
			<ul class="nav nav-tabs nav-tab-ul">
                <li {% if currentPage == 'hoop' %}class="active"{% endif %}>
					<a class="{% if currentPage != 'hoop' %}well {% endif %}maint-nav-tab-text" href="/hmi/hoopmaint/">Replace
					<br>
					Hoop</a>
				</li>
				<li {% if currentPage == 'packaging' %}class="active"{% endif %}>
					<a class="{% if currentPage != 'packaging' %}well {% endif %}maint-nav-tab-text" href="/hmi/usermaintenance/">Packaging System</a>
				</li>
				<li {% if currentPage == 'eoat' %}class="active"{% endif %}>
					<a class="{% if currentPage != 'eoat' %}well {% endif %}maint-nav-tab-text" href="/hmi/eoatmaint/">End Of Arm Tooling</a>
				</li>
			</ul>
		</div></td>
	</tr>
	<tr>
		<td class="grey-background" style="height: 470px; width: 800px;">
		<div class="grey-background">
			{% block user-maintenance-content %}{% endblock %}
		</div></td>
	</tr>
	<tr>
		<td class="grey-background" style="height: 50px; width: 800px;">
		<div id="formButtons" class="grey-background">
			<button style="width: 130px; height: 50px; margin-top: 5px; float: right;" type="button" id="cancelusermaint" name="cancelusermaint">
				Close
			</button>
		</div></td>
	</tr>
</table>
{% endblock %}