<script>
	import { page } from '$app/stores';
	import { navlinks } from '$lib/stores.js';
</script>

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
	<div class="container-fluid">
		{#if $navlinks.length > 0}
			{@const first = $navlinks[0]}
			<a class="navbar-brand" href={first.href || '#'} target={first.target}>{first.name || 'VistA-SSH'}</a>
		{:else}
			<a class="navbar-brand" href="#">VistA-SSH</a>
		{/if}
		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarCollapse">
			<ul class="navbar-nav me-auto mb-2 mb-md-0">
				{#if $navlinks.length > 0}
					{@const first = $navlinks[0]}
					{#if first.children}
						{#each first.children as item}{#if (item.name) && (item.href)}<li class="nav-item"><a class="nav-link" class:active={$page.url.pathname.includes(item.href)} href={item.href} target={item.target}>{item.name}</a></li>{/if}{/each}
					{/if}
					{#each $navlinks as parent, idx}
						{#if (idx > 0) && (parent.name)}
							{#if (parent.children) && (parent.children.length > 0)}
								<div class="btn-group">
									{#if parent.href}
										<a class="nav-link" class:active={$page.url.pathname.includes(parent.href)} href={parent.href} target={parent.target}>{parent.name}</a>
										<button type="button" class="nav-link btn dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
									{:else}
										<button type="button" class="nav-link btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">{parent.name}</button>
									{/if}
									<ul class="dropdown-menu dropdown-menu-dark">{#each parent.children as item}{#if (item.name) && (item.href)}<li><a class="dropdown-item" class:active={$page.url.pathname.includes(item.href)} href={item.href} target={item.target}>{item.name}</a></li>{/if}{/each}</ul>
								</div>
							{:else if parent.href}
								<li class="nav-item"><a class="nav-link" class:active={$page.url.pathname.includes(parent.href)} href={parent.href} target={parent.target}>{parent.name}</a></li>
							{/if}
						{/if}
					{/each}
				{/if}
			</ul>
			<form role="search" method="get" action="/lookup" target="_blank">
				<input class="form-control me-2" type="search" name="q" placeholder="Patient lookup..." aria-label="Patient lookup">
			</form>
		</div>
	</div>
</nav>

<style>
	:global(body) {
		padding-top: 4.5rem;
	}
</style>
