<!DOCTYPE html>
<html lang="en">
<div th:fragment="top" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target=".navbar-collapse">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand"
				th:href="'home?encoding=' + ${encoding} + '&amp;pretty=' + ${pretty}">
				<span class="fa fa-home topbarIcon"></span> Home
			</a> 
			<a class="navbar-left navbarBreadcrumb hidden-xs hidden-sm"
				th:if="${resourceName} != null and ${resourceName.empty} == false"
				th:href="'resource?encoding=' + ${encoding} + '&amp;pretty=' + ${pretty} + '&amp;resource=' + ${resourceName}">
				<span class="glyphicon glyphicon-chevron-right"></span> <span
				th:text="${resourceName}"></span>
			</a>
			<div class="navbar-left navbarBreadcrumb hidden-xs hidden-sm"
				th:if="${outcomeDescription} != null">
				<span class="glyphicon glyphicon-chevron-right"></span> <span
					th:text="${outcomeDescription}"></span>
			</div>
			<div class="navbar-left navbarBreadcrumb hidden-xs hidden-sm"
				th:if="${extraBreadcrumb} != null">
				<span class="glyphicon glyphicon-chevron-right"></span>&nbsp;<span
					th:text="${extraBreadcrumb}"></span>
			</div>
		</div>
		
		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav navbar-right">

				<!--
				Server Selection Dropdown 
				-->
				<li class="dropdown">
					<a href="#" class="dropdown-toggle"	data-toggle="dropdown">
					<span id="serverSelectorFhirIcon" class="glyphicon glyphicon-fire topbarIcon"></span>&nbsp;<span id="serverSelectorName" th:text="'Server: ' + ${baseName}"></span>&nbsp;<span class="caret" /></a>
					<ul class="dropdown-menu" role="menu">
						<li th:each="serverEntry : ${serverEntries}">
							<a th:href="'javascript:selectServer(\'' + ${serverEntry.key} + '\');'">
								<span class="fa fa-check-square-o" th:if="${serverEntry.key} == ${serverId}"></span>
								<span class="fa fa-square-o" style="color: #CCC;" th:unless="${serverEntry.key} == ${serverId}"></span>
								&nbsp;&nbsp;
								<th:block 	th:text="${serverEntry.value}"/>
							</a>
						</li>
					</ul>
				</li>
				
				<!--
				Security Dropdown 
				-->
				<th:block th:if="${apiKey != null}">
					<li class="dropdown">
						<a href="#" class="dropdown-toggle"	data-toggle="dropdown"><span class="fa fa-key topbarIcon"></span>&nbsp;API Key&nbsp;<span class="caret" /></a>
						<ul class="dropdown-menu" role="menu">
							<div style="padding: 10px;">
								<p>If your chosen server requires an API key / Bearer token, enter it here:</p>
								<input type="text" name="apiKey" id="apiKey" th:value="${apiKey}"/>
								
								<script type="text/javascript">
									$('#apiKey').on('click', function(event){
									    // The event won't be propagated up to the document NODE and 
									    // therefore delegated events won't be fired
									    event.stopPropagation();
									});
								</script>
							</div>
						</ul>
					</li>
				</th:block>
				
				<!-- 
				SourceCode / About this Server
				-->
				<th:block th:include="tmpl-navbar-top-farright :: farright"/>
				
			</ul>
		</div>
		
	</div>
</div>
</html>
