{% extends "base.html" %}


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


        {% if auth_site_settings.security_enabled %}
        DosisAuth.HMI.setup({});
        {% endif %}
	}); 
</script>
{% endblock %}

{% block body %}

<table id="hmi-screen-content">
	<tr>
		<td style="height: 60px; width: 800px;">
		<div class="nav-tab-div">
			<ul class="nav nav-tabs nav-tab-ul">
				<li {% if currentPage == 'backplane' %}class="active"{% endif %}>
					<a class="{% if currentPage != 'backplane' %}well {% endif %}diag-nav-tab-text" href="/hmi/advdiag/">Backplane</a>
				</li>
				<li {% if currentPage == 'eoat' %}class="active"{% endif %}>
					<a class="{% if currentPage != 'eoat' %}well {% endif %}diag-nav-tab-text" href="/hmi/eoatdiag/">End Of Arm Tooling</a>
				</li>
				<li {% if currentPage == 'camera' %}class="active"{% endif %}>
					<a class="{% if currentPage != 'camera' %}well {% endif %}diag-nav-tab-text" href="/hmi/cameradiag/">Camera</a>
				</li>
				<li {% if currentPage == 'trolley' %}class="active"{% endif %}>
					<a class="{% if currentPage != 'trolley' %}well {% endif %}diag-nav-tab-text" href="/hmi/trolleydiag/">Packaging Trolley</a>
				</li>
				<li {% if currentPage == 'sealer' %}class="active"{% endif %}>
					<a class="{% if currentPage != 'sealer' %}well {% endif %}diag-nav-tab-text" href="/hmi/sealerdiag/">Lid Roll/Sealer</a>
				</li>
				<li {% if currentPage == 'bsf' %}class="active"{% endif %}>
					<a class="{% if currentPage != 'bsf' %}well {% endif %}diag-nav-tab-text" href="/hmi/bsfdiag/">Blister Feeder</a>
				</li>
			</ul>
		</div></td>
	</tr>
	<tr>
		<td class="grey-background" style="height: 470px; width: 800px;">
		<div class="grey-background">
			{% block adv-diag-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="canceladvdiag" name="canceladvdiag">
				Close
			</button>
		</div></td>
	</tr>
</table>
{% endblock %}