<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:fragment="left" class="col-sm-3 col-md-3 sidebar">

	<h4>Options</h4>

	<label class="navBarButtonLabel">Encoding</label>
	<div class="btn-group btn-group-toggle" data-toggle="buttons" id="encodingBtnGroup">
		<label class="btn btn-info active">
			<input type="radio" name="encoding" id="encode-default" value="" />(default)
		</label> 
		<label class="btn btn-info">
			<input type="radio" name="encoding" id="encode-xml" value="xml" />XML
		</label>
		<label class="btn btn-info">
			<input type="radio" name="encoding" id="encode-json" value="json" />JSON
		</label>
	</div>

	<br /> <label class="navBarButtonLabel">Pretty</label>
	<div class="btn-group btn-group-toggle" data-toggle="buttons" id="prettyBtnGroup" style="margin-top: 5px;">
		<label class="btn btn-info active"> <input
			type="radio" name="pretty" id="pretty-default" value="" />(default)
		</label> <label class="btn btn-info"> <input
			type="radio" name="pretty" id="pretty-true" value="true" />On
		</label> <label class="btn btn-info"> <input
			type="radio" name="pretty" id="pretty-false" value="false" />Off
		</label>
	</div>

	<br /> <label class="navBarButtonLabel">Summary</label>
	<div class="btn-group btn-group-toggle" data-toggle="buttons" id="summaryBtnGroup" style="margin-top: 5px;">
		<label class="btn btn-info active">
			<input type="radio" name="_summary" id="summary-default" value="" />(none)
		</label> 
		<label class="btn btn-info">
			<input type="radio" name="_summary" id="summary-true" value="true" />true
		</label> 
		<label class="btn btn-info">
			<input type="radio" name="_summary" id="summary-text" value="text" />text
		</label>
		<label class="btn btn-info">
			<input type="radio" name="_summary" id="summary-data" value="data" />data
		</label>
		<label class="btn btn-info">
			<input type="radio" name="_summary" id="summary-count" value="count" />count
		</label>
	</div>

	<script type="text/javascript" th:inline="javascript">
		
	$( document ).ready(function() {
		
		// Encoding buttons are wider, so set the shorter group to the same width
		// so that they wrap at the same time if the page is narrow
		$('#prettyBtnGroup').width($('#encodingBtnGroup').width());
		
		var encoding = [[${encoding}]];
		if (encoding == 'xml') {
				$('#encode-xml').trigger("click");
		} else if (encoding == 'json') {
				$('#encode-json').trigger("click");
		}
			
		var pretty = [[${pretty}]];
		if (pretty){
				$('#pretty-true').trigger("click");
		} else {
				$('#pretty-false').trigger("click");
		}

		var summary = [[${_summary}]];
		if (summary == 'true') {
				$('#summary-true').trigger("click");
		} else if (summary == 'text') {
				$('#summary-text').trigger("click");
		} else if (summary == 'data') {
				$('#summary-data').trigger("click");
		} else if (summary == 'count') {
				$('#summary-count').trigger("click");
		} else {
            $('#summary-default').trigger("click");
      }

		if ([[${!#strings.isEmpty(resultBody)}]]) {
			// When we're displaying a result page, the options buttons should
			// actually apply their values to the current search/action
			$('#encode-default').change( function(){ location.href=updateURLParameter(location.href, 'encoding', '') });
			$('#encode-xml').change( function(){ location.href=updateURLParameter(location.href, 'encoding', 'xml') });
			$('#encode-json').change( function(){ location.href=updateURLParameter(location.href, 'encoding', 'json') });
			$('#pretty-default').change( function(){ location.href=updateURLParameter(location.href, 'pretty', '') });
			$('#pretty-true').change( function(){ location.href=updateURLParameter(location.href, 'pretty', 'true') });
			$('#pretty-false').change( function(){ location.href=updateURLParameter(location.href, 'pretty', 'false') });
		}
		
	});
	
	function doAction(source, action, resourceName) {
		var target = $(source);
		setResource(target, resourceName);
		
		$("#outerForm").attr("action", [[@{'/'}]] + action);
		$('#outerForm').submit();
	}
	</script>

	<h4>Server</h4>

	<ul class="nav nav-sidebar">
		<li th:class="(${notHome} == null and ${resourceName} != null and ${resourceName.empty}) ? 'active' : ''">
			<a href="#" onclick="doAction(this, 'home', null);">Server Home/Actions</a>
		</li>
	</ul>

	<h4>Resources</h4>
	
	<ul class="nav nav-sidebar" th:unless="${conf.rest.empty}">
		<th:block th:each="resource, resIterStat : ${conf.rest[0].resource}">
			<li th:class="${resourceName} == ${resource.typeElement.valueAsString} ? 'active' : ''">

				<a
               th:id="'leftResource' + ${resource.typeElement.valueAsString}"
               href="#"
               th:data1="${resource.typeElement.valueAsString}"
               onclick="doAction(this, 'resource', this.getAttribute('data1'));">
					<th:block th:text="${resource.typeElement.valueAsString}" >Patient</th:block>
					<span class="badge badge-secondary" th:if="${resourceCounts[resource.typeElement.valueAsString]} != null" th:text="${resourceCounts[resource.typeElement.valueAsString]}"/>
				</a>
			</li>
		</th:block>
	</ul>
	
	<input th:if="${resourceName.empty} == false" type="hidden" id="resource" name="resource" th:value="${resourceName}"/>

</div>


</html>
