{% block nav %}
	<!-- Navbar -->
	<nav class="navbar navbar-expand-lg blur border-radius-xl top-0 z-index-3 shadow position-absolute my-3 py-2 start-0 end-0 mx-4">
		<div class="container-fluid ps-2 pe-0">
			<a class="navbar-brand font-weight-bolder ms-lg-0 ms-3 " href="/index.php/dashboard">
				CM Tracker
			</a>
			<button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon mt-2">
					<span class="navbar-toggler-bar bar1"></span>
					<span class="navbar-toggler-bar bar2"></span>
					<span class="navbar-toggler-bar bar3"></span>
				</span>
			</button>
			<div class="collapse navbar-collapse" id="navigation">
				<ul
					class="navbar-nav mx-auto">
					<!-- @todo only display when logged in -->
					{% if app.user %}
						<li class="nav-item">
							<a class="nav-link d-flex align-items-center me-2 active" aria-current="page" href="/index.php/dashboard">
								<i class="fa fa-chart-pie opacity-6 text-dark me-1"></i>
								Dashboard
							</a>
						</li>
						<li class="nav-item">
							<a class="nav-link me-2" href="/index.php/profile">
								<i class="fa fa-user opacity-6 text-dark me-1"></i>
								Profile
							</a>
						</li>
					{% endif %}
					{% if not app.user %}
						<li class='nav-item'>
							<a class='nav-link me-2' href='/index.php/register'>
								<i class='fas fa-key opacity-6 text-dark me-1'></i>
								Register
							</a>
						</li>
						<li class="nav-item">
							<a class="nav-link me-2" href="/index.php/">
								<i class="fas fa-key opacity-6 text-dark me-1"></i>
								Sign In
							</a>
						</li>
					{% endif %}
				</ul>
				<ul class="navbar-nav d-lg-flex d-none"></ul>
			</div>
		</div>
	</nav>
	<!-- End Navbar -->
{% endblock %}