{% load static %}
{% load custom_tags_and_filters %}

<!DOCTYPE html>
<html lang="en">
<head>
	{# This meta-tag forcefully disables 'compatibility mode' in Internet Explorer because it causes rendering problems. #}
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta charset="UTF-8">
	<meta name="application-name" content="NanoFab Equipment Management and Operations (NEMO)">
	<meta name="author" content="Dylan Klomparens">
	<meta name="description" content="NEMO allows NanoFab users to make tool reservations, control access to tools in the NanoFab, and streamline logistics and communication">
	<meta name="keywords" content="NanoFab, logistics, operations, nano-technology, nano-fabrication, reservation, tool control, status">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

	{# Snippet to prevent clickjacking. Taken from https://www.codemagi.com/blog/post/194 #}
	<style id="antiClickjack">
		body
		{
			display: none !important;
		}
	</style>
	<script type="text/javascript">
		if(self === top)
		{
			var antiClickjack = document.getElementById("antiClickjack");
			antiClickjack.parentNode.removeChild(antiClickjack);
		}
		else
			top.location = self.location;
	</script>

	{# Moment #}
	<script type="text/javascript" src="{% static "moment.js" %}"></script>

	{# jQuery #}
	<script type="text/javascript" src="{% static "jquery.js" %}"></script>

	{# Bootstrap #}
	<script type="text/javascript" src="{% static "bootstrap/js/bootstrap.js" %}"></script>
	<link rel="stylesheet" type="text/css" href="{% static "bootstrap/css/bootstrap.css" %}"/>
	<link rel="stylesheet" type="text/css" href="{% static "bootstrap/css/bootstrap-theme.css" %}"/>

	{# Typeahead #}
	<script type="text/javascript" src="{% static "typeahead.jquery.js" %}"></script>

	{# NEMO #}
	<script type="text/javascript" src="{% static "nemo.js" %}"></script>
	<link rel="stylesheet" type="text/css" href="{% static "nemo.css" %}"/>

	{% block extrahead %}{% endblock %}

	<title>{% block title %}{% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nemo-navigation">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="{% url 'landing' %}">NEMO</a>
		</div>
		<div class="navbar-collapse collapse" id="nemo-navigation">
			<ul class="nav navbar-nav">
				<li><a href="{% url 'calendar' %}">Calendar</a></li>
				<li><a href="{% url 'tool_control' %}">Tool control</a></li>
				<li><a href="{% url 'status_dashboard' %}">Status dashboard</a></li>
				{% if user.is_staff %}
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Administration <b class="caret"></b></a>
						<ul class="dropdown-menu">
							{# The navigation_url tag will display the item if the URL name can be reversed. #}
							{# This allows items to be easily removed from the public facing version of NEMO. #}
							{% navigation_url 'abuse' 'Abuse' %}
							{% navigation_url 'accounts_and_projects' 'Accounts and projects' %}
							{% navigation_url 'alerts' 'Alerts' %}
							{% navigation_url 'area_access' 'Area access' %}
							{% navigation_url 'configuration_agenda' 'Configuration agenda' %}
							{% navigation_url 'customization' 'Customization' %}
							{% navigation_url 'admin:index' 'Detailed administration' %}
							{% navigation_url 'email_broadcast' 'Email' %}
							{% navigation_url 'maintenance' 'Maintenance' %}
							{% navigation_url 'qualifications' 'Qualifications' %}
							{% navigation_url 'remote_work' 'Remote work' %}
							{% navigation_url 'resources' 'Resources' %}
							{% navigation_url 'staff_charges' 'Staff charges' %}
							{% navigation_url 'consumables' 'Supplies' %}
							{% navigation_url 'training' 'Training' %}
							{% navigation_url 'users' 'Users' %}
						</ul>
					</li>
				{% endif %}
				{% if logout_allowed %}
					<li class="visible-xs"><a href="{% url 'logout' %}">Logout</a></li>
				{% endif %}
			</ul>
			<ul class="nav navbar-nav navbar-right hidden-xs">
				{% if user.is_staff and user.charging_staff_time %}
					<li class="hidden-sm">
						<p class="navbar-text">
							<a id="staff_charge_link" href="{% url 'staff_charges' %}" style="color:red; text-decoration: none" data-toggle="tooltip" data-placement="bottom" title="{% with user.get_staff_charge as staff_charge %}You are charging staff time to {{ staff_charge.customer }} for the project named {{ staff_charge.project }} since {{ staff_charge.start }}.{% endwith %}">
								Charging staff time
							</a>
						</p>
						<script>
							$("#staff_charge_link").tooltip();
						</script>
					</li>
				{% endif %}
				<li class="hidden-sm"><p class="navbar-text">Welcome, {{ user.first_name }}</p></li>
				{% if logout_allowed %}
					<li><a href="{% url 'logout' %}">Logout</a></li>
				{% endif %}
			</ul>
		</div>
	</div>
</nav>
{% block body %}
	<div class="container">
		{% block content %}{% endblock %}
	</div>
	{% block extra_whitespace %}
		<div style="height: 200px"></div>
	{% endblock %}
{% endblock %}

{# This division is used to display dialog messages via Bootstrap. #}
<div class="modal fade" id="dialog" tabindex="-1" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
		</div>
	</div>
</div>

<script>
	function csrf_token()
	{
		return '{{ csrf_token }}';
	}
	{# Add a global AJAX completion callback if sessions are able to timeout. #}
	{# When an AJAX request receives an HTTP 403 (unauthorized) reply the user is #}
	{# sent to the logoff page, which then redirects them back to the login page. #}
	{% if logout_allowed %}
		$(document).ajaxComplete(navigate_to_login_on_session_expiration);
	{% endif %}
</script>

</body>
</html>