CPS header

<script src="jquery-2.2.4.min.js"></script>
<!-- Include individual JavaScript components from Bootstrap 4.1.1 -->
<script src="bootstrap/4.1.1/util.js"></script>
<script src="bootstrap/4.1.1/modal.js"></script>
<!-- Or include the full Bootstrap JavaScript but do not include both -->
<script src="bootstrap/4.1.1/bootstrap.js"></script>
<script type="text/javascript">var searchModalId = "<?=  ?>";</script>
<script src="coc.nav.js"></script>
<script>
	$( document ).ready(function() {
		COC.Nav.init();		
		const mainContent = document.getElementById('{{ Main container id }}')
	});
</script>


<header class="cui coc-header cps-header">
	<div class="header-inner">
		<!-- Skip links provide screen readers and keyboard users a shortcut to the main content area -->
		<ul class="skip-links">
			<li><button onclick="window.location.href = '#{{ Main container id }};" class="skip-link" id="skip-main-content">Skip to main content</button></li>
			<li><button onclick="window.location.href = '#search-field';" class="skip-link d-none d-sm-block" id="skip-search-bar">Skip to search</button></li>
			<li><button onclick="window.location.href = '#search-field-modal';" class="skip-link d-block d-sm-none" id="skip-search-bar-mobile" data-toggle="modal" data-target="#modal-search" aria-label="Click to open the search window">Skip to Search</button></li>
		</ul>

		<!-- Logo -->
		<a href="{{ Home page URL }}" class="coc-logo">
			<img src="../img/CPS-logo.svg" alt="Return to the Calgary Police Service homepage">
		</a>

		<!-- Mobile-UX-optimized Search Part 1. Real search box, hidden for xxs screens -->
		<div class="cui search-box d-none d-sm-block">
			<label for="search-field" class="sr-only">Search</label>
			<input id="search-field" class="form-control search-box-input" type="search">
			<button class="cui search-box-btn btn-md icon-only primary">
				<span class="cicon-search" aria-hidden="true"></span>
				<span class="sr-only">Submit search</span>
			</button>
		</div>

		<!-- Mobile-UX-optimized Search Part 2. Faux search box, clicking this will open up the modal, only visible for xxs screens -->
		<button class="cui search-box d-block d-sm-none" data-toggle="modal" data-target="#modal-search" aria-label="Click to open the search window">
			<span class="form-control search-box-input"></span>
			<span class="cui search-box-btn btn-md icon-only primary">
				<span class="cicon-search" aria-hidden="true"></span>
				<span class="sr-only">Submit search</span>
			</span>
		</button>

		<!-- Mega navigation menu button (for mobile) -->
		<button class="cui nav-mega-btn-open" aria-haspopup="true" aria-expanded="false" aria-label="Open menu" aria-controls="nav-mega">
			<span class="cicon-bars" aria-hidden="true"></span>
		</button>
	</div>

	<!-- Mega navigation menu -->
	<nav id="nav-mega" class="cui nav-mega">
		<button type="button" class="cui nav-mega-btn-close" aria-expanded="false" aria-label="Close menu" aria-controls="nav-mega">
			Close<span class="cicon-close-thin-large" aria-hidden="true"></span>
		</button>
		<!-- Simplified for brevity -->
		<ul class="nav-menu">
			<!-- Basic menu item -->
			<li class="nav-item">
				<a href="{{ URL }}">{{ Menu item name }}</a>
			</li>
			<li class="nav-item">
				<a href="{{ URL }}">{{ Menu item name }}</a>
			</li>
			...
		</ul><!-- End of .nav-menu -->
	</nav>

	<!-- Mobile-UX-optimized Search Part 3. Modal, activated by the mobile faux search box.
	Must be placed outside of the <header> -->
	<div id="modal-search" class="cui modal" tabindex="-1" role="dialog" aria-labelledby="modal-search-title" aria-hidden="true">
		<div class="modal-dialog modal-fs-mobile" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h2 id="modal-search-title" class="modal-title">Search</h2>
					<button type="button" class="btn-modal-close cui btn-md primary-text" data-dismiss="modal">Close</button>
				</div>
				<div class="modal-body">
					<div class="cui search-box">
						<label for="search-field-modal" class="sr-only">Search</label>
						<input id="search-field-modal" class="form-control search-box-input" type="search">
						<button class="cui search-box-btn btn-md icon-only primary">
							<span class="cicon-search" aria-hidden="true"></span>
							<span class="sr-only">Submit search</span>
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</header>