<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<title th:include="window-title :: result" />
		<th:block th:include="tmpl-head :: head" />
		<script th:include="tmpl-buttonclick-handler :: handler" />
	</head>

	<body>
		<form action="" method="get" id="outerForm">
		<input type="hidden" id="serverId" name="serverId" th:value="${serverId}"/> 

		<div th:replace="tmpl-navbar-top :: top" ></div>
		
		<div class="container-fluid">
			<div class="row">

				<div th:replace="tmpl-navbar-left :: left" ></div>

				<div class="col-sm-9 col-sm-offset-3 col-md-9 col-md-offset-3 main">

					<div th:replace="tmpl-banner :: banner"></div>

					<!-- *************************************************** -->
					<!-- ** Response                                      ** -->
					<!-- *************************************************** -->
					<div class="card" id="resultWell">
                  <div class="card-header">
                     Executed request against FHIR RESTful server in
                     <th:block th:text="${latencyMs} + 'ms'"/>
                  </div>
					</div>

					<div th:if="${clientCodeJson} != null" class="card" style="margin-top: 20px;">
						<div class="card-header">
							Client Code - 
							<small style="color: #888;">
								Use the following code snippet to execute this action in your
								own client.
							</small>
						</div>
						<div class="card-body clientCodeBox" id="clientCodeBody">
						</div>
						<script type="text/javascript" src="js/ClientCodeGeneratorHapi.js"></script>
						<script type="text/javascript" th:utext="'var jsonClientCode = ' + ${clientCodeJson} + ';'">
						</script>
						<script type="text/javascript" th:inline="javascript">
							generateHapi(jsonClientCode, $('#clientCodeBody'));
						</script>
					</div>
					 
					<div th:if="${requestUrl} != null" style="margin-top: 20px;">

						<table class="table table-bordered table-striped requestTable" id="requestTable">
							<colgroup>
								<col class="col-xs-1" />
								<col class="col-xs-7" />
							</colgroup>
							<tbody>
								<tr>
									<td style="white-space: nowrap;">
                              <i class="fas fa-chevron-right"></i>
										Request
									</td>
									<td>
										<th:block th:text="${action}"/>
										<a th:href="${requestUrl}" th:utext="${requestUrlText}" id="requestUrlAnchor"/>
									</td>
								</tr>
								<tr th:if="${requestHeaders.length} > 0">
									<td>Request Headers</td>
									<td class="headerBox">
										<div th:each="header : ${requestHeaders}">
											<span class="headerName" th:text="${header.name} + ': '"/>
											<span class="headerValue"
												th:if="${not #strings.equalsIgnoreCase(header.name, 'Authorization')}"
												th:text="${header.value}"/>
											<span class="headerValue suppressed"
												th:if="${#strings.equalsIgnoreCase(header.name, 'Authorization')}"
												th:text="suppressed"/>
										</div>
									</td>
								</tr>
								<tr th:if="${#strings.isEmpty(requestBody)} == false">
									<td>Request Body</td>
									<td valign="top" style="margin: 0px; padding: 0px;">
										<pre class="requestBodyPre resultBodyPlaceholder" id="requestBodyPlaceholder">...loading...</pre>
										<pre th:utext="${requestBody}" class="resultBodyPre pre" id="requestBodyActual" style="display: none;">{}</pre>
									</td>
								</tr>
							</tbody>
						</table>

						<table class="table table-bordered table-striped resultTable" id="resultTable" th:if="${resultStatus} != null">
							<colgroup>
								<col class="col-xs-1" />
								<col class="col-xs-7" />
							</colgroup>
							<tbody>
								<tr>
									<td style="white-space: nowrap;">
                              <i class="fas fa-chevron-left"></i>
										Response
									</td>
									<td>
										<i th:if="${resultStatus.contains(' 2')}" class="fa fa-check" style="color:#4E4;"></i>
										<i th:if="${!resultStatus.contains(' 2')}" class="fa fa-warning" style="color:#E44;"></i>
										<th:block th:text="${resultStatus}"/>
									</td>
								</tr>
								<tr>
									<td>Response Headers</td>
									<td class="headerBox">
										<div th:each="header : ${responseHeaders}">
											<span class="headerName" th:text="${header.name} + ': '"/>
											<span class="headerValue" th:text="${header.value}"/>
										</div>
									</td>
								</tr>
								<tr th:if="${!#strings.isEmpty(resultBody)}">
									<td rowspan="2">
										Result Body
										<small th:text="${resultDescription}" style="font-weight: normal;"/>
									</td>
									<td style="border-width: 0px; padding: 0px;">
														
										<!-- 
										If the response is a bundle, this block will contain a collapsible
										table with a summary of each entry as well as paging buttons and
										controls for viewing/editing/etc results
										
										NON-RI Bundle
										-->
										<div th:if="${bundle} != null" class="panel-group" id="accordion" style="margin-bottom: 0px;">
											<div class="panel panel-default" style="border: none; border-bottom: 1px solid #ddd; border-radius: 0px;">
												<div class="panel-heading">
													<div class="panel-title">
														<th:block th:if="${#lists.isEmpty(bundle.entries)}">Bundle contains no entries</th:block>
														<a th:unless="${#lists.isEmpty(bundle.entries)}" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                             <i id="collapseOneIcon" class="far fa-minus-square"></i>
															<span th:if="${bundle.totalResults.empty}" th:text="'Bundle contains ' + ${#lists.size(bundle.entries)} + ' entries'"/>
															<span th:unless="${bundle.totalResults.empty}" th:text="'Bundle contains ' + ${#lists.size(bundle.entries)} + ' / ' + ${bundle.totalResults.value} + ' entries'"/>
														</a>

														<th:block th:if="${!bundle.linkNext.empty} or ${!bundle.linkPrevious.empty}">
														
															<!-- Prev/Next Page Buttons -->
															<button	class="btn btn-success btn-xs" type="button" id="page-prev-btn"	
																style="margin-left: 15px;">
                                                <i class="fas fa-angle-double-left"></i>
																Prev Page
															</button>
															<script type="text/javascript" th:inline="javascript">
																if ([[${bundle.linkPrevious.empty}]]) {
																	$('#page-prev-btn').prop('disabled', true);
																}
																$('#page-prev-btn').click(function() {
																	var btn = $(this);
																	handleActionButtonClick($(this));
																	btn.append($('<input />', { type: 'hidden', name: 'page-url', value: [[${bundle.linkPrevious.value}]] }));
																	$("#outerForm").attr("action", "page").submit();
	
																});
															</script>
	
															<button	class="btn btn-success btn-xs" type="button" id="page-next-btn">
                                                <i class="fas fa-angle-double-right"></i>
																Next Page
															</button>
															<script type="text/javascript" th:inline="javascript">
																if ([[${bundle.linkNext.empty}]]) {
																	$('#page-next-btn').prop('disabled', true);
																}
																$('#page-next-btn').click(function() {
																	var btn = $(this);
																	handleActionButtonClick($(this));
																	btn.append($('<input />', { type: 'hidden', name: 'page-url', value: [[${bundle.linkNext.value}]] }));
																	$("#outerForm").attr("action", "page").submit();
																});
															</script>
														</th:block>
													</div>
												</div>
												<div id="collapseOne" class="panel-collapse in" th:unless="${#lists.isEmpty(bundle.entries)}">
													<div class="panel-body" style="padding-bottom: 0px;">
														<table class="table table-condensed" style="padding-bottom: 0px; margin-bottom: 0px;">
															<colgroup>
																<col style="width: 100px;"/>
																<col/>
																<col/>
																<col style="width: 100px;"/>
															</colgroup>
															<thead>
																<tr>
																	<th></th>
																	<th>ID</th>
																	<th>Title</th>
																	<th>Updated</th>
																</tr>
															</thead>
															<tbody>
															<tr th:each="entry : ${bundle.entries}">
																<td style="white-space: nowrap;">
																	<th:block th:if="${entry.resource} != null">
																		<button class="btn btn-primary btn-xs" th:data1="${entry.resource.id.resourceType}" th:data2="${entry.resource.id.idPart}" th:data3="${#strings.defaultString(entry.resource.id.versionIdPart,'')}" onclick="readFromEntriesTable(this, this.getAttribute('data1'), this.getAttribute('data2'), this.getAttribute('data3'));" type="submit" name="action" value="read"><i class="fas fa-book"></i> Read</button>
																		<button class="btn btn-primary btn-xs" th:data1="${entry.resource.id.resourceType}" th:data2="${entry.resource.id.idPart}" th:data3="${#strings.defaultString(entry.resource.id.versionIdPart,'')}" onclick="updateFromEntriesTable(this, this.getAttribute('data1'), this.getAttribute('data2'), this.getAttribute('data3'));" type="submit" name="action" value="home"><i class="far fa-edit"></i> Update</button>
																	</th:block>
																</td>
																<td>
																	<a th:if="${entry.resource} != null" th:href="${entry.resource.id}" th:text="${entry.resource.id.toUnqualified()}" style="font-size: 0.8em"/>
																</td>
																<td>
																	<!-- Title used to go here -->
																</td>
																<td th:if="${entry.updated.value} == null"></td>
																<td th:if="${entry.updated.value} != null and ${entry.updated.today} == true" th:text="${#dates.format(entry.updated.value, 'HH:mm:ss')}"></td>
																<td th:if="${entry.updated.value} != null and ${entry.updated.today} == false" th:text="${#dates.format(entry.updated.value, 'yyyy-MM-dd')}"></td>
															</tr>
															</tbody>
														</table>
													</div>
												</div>
												<script type="text/javascript">
                                       /*
													$('#collapseOne').on('hidden.bs.collapse', function () {
													   $("#collapseOneIcon").removeClass("fa-minus-square").addClass("fa-plus-square");
													});
	
													$('#collapseOne').on('shown.bs.collapse', function () {
													   $("#collapseOneIcon").removeClass("fa-plus-square").addClass("fa-minus-square");
													});
                                        */
												</script>
											</div>
										</div>
										<!-- END Non-RI Bundle -->


										<!-- 
										If the response is a bundle, this block will contain a collapsible
										table with a summary of each entry as well as paging buttons and
										controls for viewing/editing/etc results
										
										RI Bundle
										-->
										<div th:if="${riBundle} != null" class="panel-group" id="accordion" style="margin-bottom: 0px;">
											<div class="panel panel-default" style="border: none; border-bottom: 1px solid #ddd; border-radius: 0px;">
												<div class="panel-heading">
													<div class="panel-title">
														<th:block th:if="${#lists.isEmpty(riBundle.entry)}">Bundle contains no entries</th:block>
														<a th:unless="${#lists.isEmpty(riBundle.entry)}" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                             <i id="collapseOneIcon" class="far fa-minus-square"></i>
															<span th:if="${riBundle.totalElement.empty}" th:text="'Bundle contains ' + ${#lists.size(riBundle.entry)} + ' entries'"/>
															<span th:unless="${riBundle.totalElement.empty}" th:text="'Bundle contains ' + ${#lists.size(riBundle.entry)} + ' / ' + ${riBundle.totalElement.value} + ' entries'"/>
														</a>

														<th:block th:if="${riBundle.getLink('next') != null} or ${riBundle.getLink('prev') != null} or ${riBundle.getLink('previous') != null}">
														
															<!-- Prev/Next Page Buttons -->
															<button	class="btn btn-success btn-xs" type="button" id="page-prev-btn"	
																style="margin-left: 15px;">
                                                <i class="fas fa-angle-double-left"></i>
																Prev Page
															</button>
															<script type="text/javascript" th:inline="javascript">
																if ([[${riBundle.getLink('prev') == null && riBundle.getLink('previous') == null}]]) {
																	$('#page-prev-btn').prop('disabled', true);
																}
																$('#page-prev-btn').click(function() {
																	var btn = $(this);
																	handleActionButtonClick($(this));
																	var prev = [[${riBundle.getLinkOrCreate('prev').url}]];
																	var previous = [[${riBundle.getLinkOrCreate('previous').url}]];
																	var url = prev != null ? prev : previous;
																	btn.append($('<input />', { type: 'hidden', name: 'page-url', value: url }));
																	$("#outerForm").attr("action", "page").submit();
	
																});
															</script>
	
															<button	class="btn btn-success btn-xs" type="button" id="page-next-btn">
                                                <i class="fas fa-angle-double-right"></i>
																Next Page
															</button>
															<script type="text/javascript" th:inline="javascript">
																if ([[${riBundle.getLink('next') == null}]]) {
																	$('#page-next-btn').prop('disabled', true);
																}
																$('#page-next-btn').click(function() {
																	var btn = $(this);
																	handleActionButtonClick($(this));
																	btn.append($('<input />', { type: 'hidden', name: 'page-url', value: [[${riBundle.getLinkOrCreate('next').url}]] }));
																	$("#outerForm").attr("action", "page").submit();
																});
															</script>
														</th:block>
													</div>
												</div>
												<div id="collapseOne" class="panel-collapse in" th:unless="${#lists.isEmpty(riBundle.entry)}">
													<div class="panel-body" style="padding-bottom: 0px;">
														<table class="table table-condensed" style="padding-bottom: 0px; margin-bottom: 0px;">
															<colgroup>
																<col style="width: 100px;"/>
																<col/>
																<col/>
																<col style="width: 100px;"/>
															</colgroup>
															<thead>
																<tr>
																	<th></th>
																	<th>ID</th>
																	<th>Updated</th>
																</tr>
															</thead>
															<tbody>
															<tr th:each="entry : ${riBundle.entry}">
																<td style="white-space: nowrap;">
																	<th:block th:if="${entry.resource} != null">
                                                      <button class="btn btn-primary btn-xs" th:data1="${entry.resource.idElement.resourceType}" th:data2="${entry.resource.idElement.idPart}" th:data3="${#strings.defaultString(entry.resource.idElement.versionIdPart,'')}" onclick="readFromEntriesTable(this, this.getAttribute('data1'), this.getAttribute('data2'), this.getAttribute('data3'));" type="submit" name="action" value="read"><i class="fas fa-book"></i> Read</button>
                                                      <button class="btn btn-primary btn-xs" th:data1="${entry.resource.idElement.resourceType}" th:data2="${entry.resource.idElement.idPart}" th:data3="${#strings.defaultString(entry.resource.idElement.versionIdPart,'')}" onclick="updateFromEntriesTable(this, this.getAttribute('data1'), this.getAttribute('data2'), this.getAttribute('data3'));" type="submit" name="action" value="home"><i class="far fa-edit"></i> Update</button>
																	</th:block>
																</td>
																<td>
																	<a th:if="${entry.resource} != null" th:href="${entry.resource.id}" th:text="${entry.resource.idElement.toUnqualified()}" style="font-size: 0.8em"/>
																</td>
                                                <th:block th:if="${ri}">
                                                   <td th:if="${entry.resource} == null or ${entry.resource.meta.lastUpdatedElement.value} == null"></td>
                                                   <td th:if="${entry.resource} != null and ${entry.resource.meta.lastUpdatedElement.value} != null and ${entry.resource.meta.lastUpdatedElement.today} == true" th:text="${#dates.format(entry.resource.meta.lastUpdated, 'HH:mm:ss')}"></td>
                                                   <td th:if="${entry.resource} != null and ${entry.resource.meta.lastUpdatedElement.value} != null and ${entry.resource.meta.lastUpdatedElement.today} == false" th:text="${#dates.format(entry.resource.meta.lastUpdated, 'yyyy-MM-dd HH:mm:ss')}"></td>
                                                </th:block>
                                                <th:block th:unless="${ri}">
                                                   <td></td>
                                                </th:block>
															</tr>
															</tbody>
														</table>
													</div>
												</div>
												<script type="text/javascript">
                                       /*
													$('#collapseOne').on('hidden.bs.collapse', function () {
													   $("#collapseOneIcon").removeClass("fa-minus-square").addClass("fa-plus-square");
													});
	
													$('#collapseOne').on('shown.bs.collapse', function () {
													   $("#collapseOneIcon").removeClass("fa-plus-square").addClass("fa-minus-square");
													});
                                        */
												</script>
											</div>
										</div>
										<!-- END RI Bundle -->

										
										<div class="panel-heading" sstyle="margin: 5px;">
											<h4 class="panel-title">
												Raw Message
											</h4>										
										</div>										
									</td>
								</tr>
								<tr th:if="${!#strings.isEmpty(resultBody)}">
									<td valign="top" style="margin: 0px; padding: 0px; font-weight: normal;">
										<pre class="resultBodyPre resultBodyPlaceholder" id="resultBodyPlaceholder">...loading...</pre>
										<div id="resultBodyActual" class="resultBodyActual" style="display: none;">
											<pre id="resultBodyActualPre" th:utext="${resultBody}" class="resultBodyPre pre">{}</pre>
										</div>
									</td>
								</tr>
								<tr th:if="${!#strings.isEmpty(narrative)}">
									<td class="propertyKeyCell">Result Narrative</td>
									<td th:utext="${narrative}"></td>
								</tr>
							</tbody>
						</table>
						
						<script type="text/javascript"><!--
							$( document ).ready(function() {
								var reswidth = $('#resultBodyPlaceholder').outerWidth(true);
								var reqwidth = 0;
								if ($('#requestBodyPlaceholder') != null) {
									reqwidth = $('#requestBodyPlaceholder').outerWidth(true);
								}
								
								$('#resultBodyPlaceholder').hide();
								$('#resultBodyActual').width(reswidth);
								$('#resultBodyActual').show();
								
								if ($('#requestBodyPlaceholder') != null) {
									$('#requestBodyPlaceholder').hide();
									$('#requestBodyActual').width(reqwidth);
									$('#requestBodyActual').show();
								}
							});
							
							function lineWrap(){
							    var wrap = function () {
							        var elems = document.getElementsByClassName('syntaxhighlighter');
							        for (var j = 0; j < elems.length; ++j) {
							            var sh = elems[j];
							            var gLines = sh.getElementsByClassName('gutter')[0].getElementsByClassName('line');
							            var cLines = sh.getElementsByClassName('code')[0].getElementsByClassName('line');
							            var stand = 15;
							            for (var i = 0; i < gLines.length; ++i) {
							                var h = $(cLines[i]).height();
							                if (h != stand) {
							                    console.log(i);
							                    gLines[i].setAttribute('style', 'height: ' + h + 'px !important;');
							                }
							            }
							        }
							     };
							    var whenReady = function () {
							        if ($('.syntaxhighlighter').length === 0) {
							            setTimeout(whenReady, 800);
							        } else {
							            wrap();
							        }
							    };
							    whenReady();
							};
							lineWrap();
							$(window).resize(function(){lineWrap()});							
						--></script>
						
					</div>


				</div>
			</div>
		</div>

	</form>
	<div th:replace="tmpl-footer :: footer" ></div>
</body>
</html>
