<nav class="navbar navbar-expand-lg shadow-sm">
	<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
		aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
		<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="white" class="bi bi-list"
			viewBox="0 0 16 16">
			<path fill-rule="evenodd"
				d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
		</svg>
	</button>

	<div class="collapse navbar-collapse" id="navbar">
		<ul class="navbar-nav mx-auto d-flex">
			<a class="navbar-brand" href="/">
				<img id="nav-logo" width="150" height="auto" src="/static/images/logo.png" alt="Mines ACM" />
			</a>

			<div class="inner-nav-container">
				<li class="nav-item">
					<% if(title === 'Home') { %>
						<a class="nav-link text-nowrap active" aria-current="page" href="/">Home</a>
					<% } else { %>
						<a class="nav-link text-nowrap" href="/">Home</a>
					<% } %>
				</li>
				<li class="nav-item">
					<% if(title === 'Schedule') { %>
						<a class="nav-link text-nowrap active" aria-current="page" href="/schedule">Schedule</a>
					<% } else { %>
						<a class="nav-link text-nowrap" href="/schedule">Schedule</a>
					<% } %>
				</li>
				<li class="nav-item">
					<% if(title === 'About Us') { %>
						<a class="nav-link text-nowrap active" aria-current="page" href="/about">About Us</a>
					<% } else { %>
						<a class="nav-link text-nowrap" href="/about">About Us</a>
					<% } %>
				</li>
				
				<li class="nav-item">
					<% if(title === 'Projects') { %>
						<a class="nav-link text-nowrap active" aria-current="page" href="/projects">Projects</a>
					<% } else { %>
						<a class="nav-link text-nowrap" href="/projects">Projects</a>
					<% } %>
				</li>

				<li class="nav-item">
					<% if(title === 'Presentations') { %>
						<a class="nav-link text-nowrap active" aria-current="page" href="/presentations">Presentations</a>
					<% } else { %>
						<a class="nav-link text-nowrap" href="/presentations">Presentations</a>
					<% } %>
				</li>

				<% if(typeof user=='object' && user) { %>
				<li class="nav-item dropdown">
					<a class="nav-link text-nowrap dropdown-toggle" href="#" id="userDropdown" role="button"
						data-bs-toggle="dropdown" aria-expanded="false">
						<%= user.name %>
					</a>
					<ul class="dropdown-menu shadow-sm" aria-labelledby="userDropdown">
						<li><a class="dropdown-item" href="/profile/<%= user.id %>">Profile</a></li>
						<% if(user.is_admin) { %>
							<li><a class="dropdown-item" href="/admin">Admin</a></li>
						<% } %>
						<li><a class="dropdown-item" href="/logout">Log Out</a></li>
					</ul>
				</li>
				<% } else { %>
				<li class="nav-item">
					<a class="nav-link text-nowrap" href="/login">Login</a>
				</li>
				<% } %>
			</div>
		</ul>
	</div>
</nav>