{% load static %}
<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		{% if title %}
			<title>IPG-HRMS - {{ title|upper }}</title>
		{% else %}
			<title>IPG-HRMS</title>
		{% endif %}
		<!-- Bootstrap CSS -->
		<link href="{% static 'main/css/print.css' %}" rel="stylesheet">

	</head>
	<body>
		{% block content %}{% endblock %}
		<!-- Footer -->
		<footer class="page-footer font-small blue">
			<!-- Copyright -->
			<div class="footer-copyright text-center py-3">
			</div>
			<!-- Copyright -->
		</footer>
		<!-- Footer -->

		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="{% static 'main/js/jquery.min.js' %}"></script>
		<script src="{% static 'main/js/bootstrap.min.js' %}" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
		<!-- Datatable -->
		<link href="{% static 'main/css/dataTables.bootstrap4.min.css' %}" rel="stylesheet" type="text/css" />
		<link href="{% static 'main/css/responsive.bootstrap4.min.css' %}" rel="stylesheet" type="text/css" />
		<link href="{% static 'main/css/table-responsive.css' %}" rel="stylesheet" media="screen">
		<script src="{% static 'main/js/jquery.dataTables.min.js' %}" type="text/javascript"></script>
		<script src="{% static 'main/js/dataTables.bootstrap4.min.js' %}" type="text/javascript"></script>
		<script src="{% static 'main/js/dataTables.responsive.min.js' %}" type="text/javascript"></script>
		<script src="{% static 'main/js/responsive.bootstrap4.min.js' %}" type="text/javascript"></script>
		<script>
			$(document).ready(function() {
				$('#example').DataTable();
			} );
		</script>		
		{% block scripts %}{% endblock %}
	</body>
</html>