{% load static %}

<!DOCTYPE html>
<html>
<head>
	<title>{% block title %}GAP{% endblock %}</title>
	<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
  <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">

<!-- add before </body> -->
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
	<script src="https://cdn.datatables.net/1.10.22/js/dataTables.semanticui.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css" integrity="sha512-8Tb+T7SKUFQWOPIQCaLDWWe1K/SY8hvHl7brOH8Nz5z1VT8fnf8B+9neoUzmFY3OzkWMMs3OjrwZALgB1oXFBg==" crossorigin="anonymous" />
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.semanticui.min.css" />
	<style type="text/css">
		body{
			background-color: whitesmoke;
		}
		#navbar{
			font-size:medium;
			padding-top: 1vh;
			padding-bottom:1vh;
		}
		#navbar .header{
			font-size: x-large;
			font-family: monospace;
			color:#00b5ad;
		}
		{% block styling %}
		{% endblock styling %}
	</style>
</head>
<body>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=BioRhyme:wght@300&display=swap" rel="stylesheet">
	<div id="navbar" class="ui inverted segment tiny" style="margin-top: 0;padding: 4px; ">
		<div class="ui inverted secondary stackable menu">
			<div class="header item ">
				<p class="teal" style="font-family: 'BioRhyme', serif;letter-spacing: 4px;">Guide Allocation Portal</p>
			</div>
			
			<div class="right menu">
				<p class="item" style="font-size: large;">
					Welcome {{ request.user.get_full_name }}
				</p>
				<div class="item">
					<form action="{% url 'gap:logout' %}">
					<button class="ui button teal" type='submit'>Log out</button>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div class="ui container" style="width: 75%;">
		{% block content %}
		{% endblock %}
	</div>
	
	<div class="modals">
	{% block modals %}
	{% endblock %}
	</div>

	<script type="text/javascript">
		{% block scripts %}
		{% endblock %}
	</script>
</body>
</html>