<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title><%- name %> <%- title %></title>
		<!-- Favicon -->
		<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
		<!-- CSS are placed here -->
		<link rel="stylesheet" href="/static-modules/bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="/static-modules/@fortawesome/fontawesome-free/css/all.min.css">

		<link rel='stylesheet' href='/static/css/styles.css' />
		<!-- Scripts are placed here -->
		<script type="text/javascript" src="/socket.io/socket.io.js"></script>
		<script type="text/javascript" src='/static-modules/jquery/dist/jquery.js'></script>
		<!-- <script type="text/javascript" src="/static/lib/js/popper-1.16.0.min.js"></script> -->
		<!-- <script type="text/javascript" src="/static-modules/bootstrap/dist/js/bootstrap.min.js"></script> -->
		<script type="text/javascript" src="/static-modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
		<script type="text/javascript" src="/static-modules/@fortawesome/fontawesome-free/js/all.min.js"></script>
		<script type="text/javascript" src='/static-modules/mustache/mustache.min.js'></script>
		<script type="text/javascript" src='/static-modules/jq-repeat/dist/js/jq-repeat.js'></script>
		<script type="text/javascript" src='/static/lib/js/val.js'></script>
		<script type="text/javascript" src="/static-modules/moment/moment.js"></script>
		<script type="text/javascript" src="/static/lib/js/app-base.js"></script>
		<script type="text/javascript" src="/static/js/app.js"></script>
	</head>
	<body>

		<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
			<a class="navbar-brand" href="#"><img src="<%- logo %>" height="28" class="me-2" alt=""><%- name %> <%- titleIcon %></a>
			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
				<ul class="navbar-nav top-nav">
					<li class="nav-item">
						<a class="nav-link active" href="/hosts">
							<i class="fa-solid fa-network-wired"></i>
							Hosts
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="/dns"><i class="fa-solid fa-record-vinyl"></i>
							DNS
						</a>
					</li>
					<li class="nav-item nav-admin" style="display: none;">
						<a class="nav-link" href="/users"><i class="fa-solid fa-users"></i>
							Users
						</a>
					</li>
					<li class="nav-item nav-admin" style="display: none;">
						<a class="nav-link" href="/permissions"><i class="fa-solid fa-user-shield"></i>
							Permissions
						</a>
					</li>
					<li class="nav-item nav-admin" style="display: none;">
						<a class="nav-link" href="/groups"><i class="fa-solid fa-users-gear"></i>
							Groups
						</a>
					</li>
				</ul>
				<div class="form-inline mt-2 mt-md-0">
					<a id="cl-username" class="navbar-text text-light me-3" href="/profile" style="display: none;">
						<i class="fa-solid fa-user me-1"></i><span id="cl-username-text"></span>
					</a>
					<a id="cl-login-button" class="btn btn-outline-danger my-2 my-sm-0" onclick="app.auth.forceLogin()" style="display: none;">
						<i class="fas fa-sign-out"></i>
						Login
					</a>

					<button id="cl-logout-button" class="btn btn-outline-danger my-2 my-sm-0" onclick="app.auth.logOut(e => window.location.href='/')" style="display: none;">
						<i class="fas fa-sign-out"></i>
						Log Out
					</button>
				</div>
			</div>
		</nav>

		<!-- Admin-only "a newer release is available" notice (services/update_check.js).
		     Dismissal is per-browser-session only (sessionStorage), not persisted server-side.
		     Fixed-positioned below the fixed navbar (a plain in-flow div here would render
		     UNDER the nav, since fixed elements are taken out of document flow) -- shown/hidden
		     dynamically, so #spa-shell's margin-top is adjusted in JS to make room for it. -->
		<div id="update-banner" class="alert alert-info alert-dismissible mb-0 rounded-0 text-center" style="display:none; position:fixed; left:0; right:0; z-index:1029;">
			<span id="update-banner-text"></span>
			<button type="button" class="btn-close" onclick="dismissUpdateBanner()"></button>
		</div>

		<script type="text/javascript">
			function showUpdateBanner(){
				let $nav = $('nav.fixed-top');
				let $banner = $('#update-banner');
				$banner.css('top', $nav.outerHeight() + 'px').show();
				$('#spa-shell').css('margin-top', ($nav.outerHeight() + $banner.outerHeight()) + 'px');
			}

			function dismissUpdateBanner(){
				$('#update-banner').hide();
				$('#spa-shell').css('margin-top', '');
				sessionStorage.setItem('update-banner-dismissed', '1');
			}

			$(document).ready(function(){

				// Set the correct link to active in the top nav bar
				$('.top-nav a').each(function(index){
					let $this = $(this);
					$this.removeClass('active');
					if($this.attr('href').toLocaleLowerCase() === window.location.pathname.toLocaleLowerCase()){
						$this.addClass('active')
					}
				})

				// Set the correct login/logout button, and reveal admin-only nav
				// items for global admins.
				app.auth.isLoggedIn(function(error, data){
					if(data){
						$('#cl-logout-button').show();
						if(data.username){
							$('#cl-username-text').text(data.username);
							$('#cl-username').css('display', '');
						}
					}else{
						$('#cl-login-button').show();
					}

					if(data && data.isAdmin){
						$('.nav-admin').css('display', '');

						if(!sessionStorage.getItem('update-banner-dismissed')){
							app.api.get('update-check', function(error, info){
								if(error || !info || !info.updateAvailable) return;
								$('#update-banner-text').html(
									'A newer version of the proxy is available: <b>v' + info.latestVersion + '</b> ' +
									'(running v' + info.currentVersion + ') — ' +
									'<a href="' + info.releaseUrl + '" target="_blank" class="alert-link">see what changed</a>.'
								);
								showUpdateBanner();
							});
						}
					}
				});

			});
		</script>


		<!-- Container -->
		<div id="spa-shell" class="container-fluid">